tanstack-table

Provide framework-agnostic table primitives for sorting, filtering, and pagination.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/Ikki-Group/erp --skill tanstack-table-ikki-group
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/Ikki-Group/erp/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/Ikki-Group/erp --skill tanstack-table-ikki-group

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table provides core table logic without rendering, enabling flexible UI integration across frameworks and rendering layers.

Core Features & Use Cases

  • Column definitions, table instance, row models, sorting, filtering, pagination, grouping, expanding, pinning/visibility/resizing, and row selection across TS/JS ecosystems.
  • Real-world use: build dashboards with sortable grids that adapt to your UI framework.

Quick Start

Create a table with a data array and column definitions, then render it in your favorite framework.

Frequently Asked Questions about tanstack-table

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a framework-agnostic datagrid with sorting and filtering?

You can build a framework-agnostic datagrid by defining a data array and column definitions to instantiate table logic, then rendering it via your framework's hooks. This delivers core sorting and filtering without enforcing a specific UI structure.

Does TanStack Table work with Vue and Solid for datatable components?

Yes, TanStack Table supports Vue, Solid, Svelte, Qwik, Angular, Lit, and React for datatable components. It provides framework-agnostic table primitives that integrate with your chosen rendering layer through core hooks.

What is the best way to implement row pinning and column visibility in a TypeScript datatable?

The best way to implement row pinning and column visibility in a TypeScript datatable is using core table primitives that separate state logic from rendering. This approach manages pinning and visibility internally while you control the UI layer.

How do I set up column definitions for a React datagrid?

You set up column definitions for a React datagrid by passing a data array and column configurations to create a table instance. You then use core hooks to render the table rows and cells within your React component.

Can I use this table library to group and paginate data without a UI framework?

Yes, you can use this table library in plain TS/JS projects without a UI framework. It provides core logic for grouping and pagination, allowing you to attach a custom rendering layer to display the processed data.

What are the limitations of using headless UI table primitives for dashboards?

The main limitation of using headless UI table primitives is that they provide no out-of-the-box rendering. You must manually build the UI structure for your dashboards, requiring extra setup compared to pre-packaged grid components.