TanStack Table

TanStack Table is a headless table and datagrid library for TypeScript and JavaScript. It handles the state and logic behind sorting, filtering, grouping, pagination, and row selection, but leaves rendering entirely up to you. It's built for developers who want full control over markup and CSS instead of inheriting a pre-styled component's look and behavior.

The library ships a framework-agnostic core with official bindings (called adapters) for React, Vue, Solid, Svelte, Angular, Preact, Ember, Lit, Alpine, and Octane. So if you already know it as React Table, Vue Table, or Solid Table, you're looking at the same underlying project.

Key features

• Headless architecture: no bundled UI components, so you write the JSX/templates and CSS yourself and keep design system consistency.
• Framework adapters: one core engine with thin bindings for React, Vue, Solid, Svelte, Angular, Preact, Ember, Lit, and Alpine.
• Sorting, filtering, grouping, and aggregation: built-in column and row-level logic you wire up through hooks/composables instead of config props buried in a black box.
• Row selection: state management for single or multi-row selection built into the core.
• Virtualization and server-side friendly: designed to pair with virtualized rendering and server-driven pagination/filtering for large datasets.
• Small bundle size: as a headless library it avoids shipping styling or DOM structure, keeping the footprint lean.
• TypeScript-first: written in TypeScript with typed column definitions and table state.
• AI agent skills: ships TanStack Intent skill definitions so coding agents like Claude Code, Cursor, or Copilot get version-matched guidance for the installed adapter.

Ideal use cases

TanStack Table fits when you're building a custom datagrid inside an app that already has its own design system and you don't want to fight a pre-styled component library's CSS overrides. It works well for admin dashboards, internal tools, and data-heavy UIs where sorting, filtering, and pagination need to match specific business logic rather than generic defaults.

It's also a good match for teams working across multiple frameworks (say, a React app and a Vue app) that want consistent table behavior without maintaining two separate table implementations, since the core logic is shared.

It's not a good fit if you want a drop-in, pre-styled datagrid with minimal setup. Because it's headless, you write the rendering layer yourself, which means more upfront work compared to something like AG Grid or MUI's DataGrid. If your project needs built-in themes, cell editors, or Excel-like features out of the box, a full-featured commercial grid will get you there faster.

Installation

Install the adapter package for your framework. For a React project:

npm install @tanstack/react-table

Other frameworks use their own adapter package, for example @tanstack/vue-table, @tanstack/solid-table, @tanstack/svelte-table, or @tanstack/angular-table. Import the core hooks/composables (like useReactTable in React) and pass in your data array and column definitions to get a table instance with sorting, filtering, and pagination state.

If you use an AI coding agent (Claude Code, Cursor, Copilot, etc.), you can install version-matched skill guidance after installing the library:

npx @tanstack/intent@latest install

Use intent list to browse available skills and intent load <skill> to inspect one before installing. This is only available for v9 and above.

Full framework-specific docs, including quick-start guides for each adapter, are available at tanstack.com/table.