TanStack Table
By TanStack
TanStack Table is a headless library for building data tables and datagrids in JavaScript, providing the logic for sorting, filtering, pagination, grouping, and column resizing without dictating any markup or styling. Developers use its…
Definition
TanStack Table is a headless library for building data tables and datagrids in JavaScript, providing the logic for sorting, filtering, pagination, grouping, and column resizing without dictating any markup or styling. Developers use its framework adapters for React, Vue, Solid, Svelte, or Angular to wire that logic into their own components, giving full control over rendering while reusing well-tested table behavior.
Overview
TanStack Table, formerly known as React Table, was built around the headless UI philosophy that has driven several other TanStack libraries: rather than shipping a pre-styled table component with a fixed set of visual options, it provides only the state management and computational logic that any data table needs, and leaves all markup, styling, and DOM structure entirely to the developer. This addresses a common frustration with traditional table component libraries, where achieving a specific custom design often means fighting against a component's built-in rendering assumptions. Mechanically, a developer defines column definitions describing how to access and optionally format each field of the underlying data, and passes those columns along with the raw data array into a useReactTable (or equivalent per-framework) hook, which returns a table instance. That instance exposes methods like getHeaderGroups, getRowModel, and getFooterGroups that yield structured objects describing exactly what to render, but never actual DOM elements or JSX; the developer maps over these structures to produce their own table markup. Features like sorting, filtering, and pagination are implemented as composable row models that can be layered on top of the core row model, and each feature's state, such as the current sort column, can be either managed internally by the library or lifted out and controlled externally by the application. Compared to component-based table libraries like Material-UI's DataGrid or Ant Design's Table, which ship built-in rendering and styling that can be customized through configuration or theming, TanStack Table takes the opposite approach of shipping no rendering at all, which trades faster initial setup for essentially unlimited visual flexibility, since there is no component styling to override or work around. It differs from AG Grid, a fully-featured, more opinionated enterprise grid product, by staying deliberately unopinionated about UI while still matching or approaching its logical feature set for complex behaviors like column pinning and grouping. In practice, TanStack Table is used heavily in design-system-driven applications and admin dashboards where tables must match a specific existing visual language, and in situations requiring virtualization, custom cell renderers, or nonstandard row/column interactions that pre-styled grid components make difficult to achieve without overriding significant internal behavior. The main trade-off with TanStack Table is the amount of upfront work required: because it provides no default markup, styling, or accessibility affordances out of the box, teams must build a working, accessible table UI themselves using the library's returned data structures, which is more initial effort than dropping in a pre-styled grid component, though it pays off for applications with nonstandard design requirements or long-term maintenance across varied use cases.
Key Features
- Provides table logic with no built-in markup or styling
- Supports sorting, filtering, pagination, and grouping as composable features
- Offers framework adapters for React, Vue, Solid, Svelte, and Angular
- Exposes structured row and header data via a table instance
- Allows internal or externally controlled state for each feature
- Supports column resizing, pinning, and virtualization integration
- Was formerly known as React Table before becoming framework-agnostic
Use Cases
Alternatives
Frequently Asked Questions
From the Blog
How to choose a statistical test from your question, not a lookup table
Three questions narrow the choice to one or two tests every time: what type is the outcome, how many groups are you comparing and are they paired, and what does the shape of the data allow. Answering them in order is more reliable than memorising a table, and it surfaces the assumption that actually matters — independence.
Read More AI & TechnologyWhat Is a Confusion Matrix in Machine Learning
A confusion matrix is a simple table that shows exactly where a classification model gets predictions right and wrong, broken down by every class.
Read More Data ScienceHow to Optimize Slow SQL Queries
Optimize slow SQL queries by reading the execution plan, adding the right indexes, avoiding full-table scans, and selecting only the columns you need.
Read More AI & TechnologyHow to Evaluate a RAG Pipeline End to End
Evaluate a RAG pipeline by scoring retrieval and generation separately, because a bad answer has two possible causes and one number cannot tell them apart. This article sets out the retrieval metrics, the answer metrics, and the diagnostic table that tells you which stage to fix.
Read More