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.