◐ Shell
clean mode source ↗

TanStack Table

Headless table engine

TanStackTable

Build the table you actually designed.

Table is the headless engine for rows, columns, sorting, filtering, grouping, pagination, selection, and controlled state. It gives you the hard parts of a data grid without taking over the markup.

00.0 MillionTotal Downloads000,000,000Weekly Downloads0GitHub Stars

The most popular and most used data grid engine in the world.

Headless engine

bring your markup, styles, and components

Row models

sort, filter, group, expand, paginate

Controlled state

own every toggle, filter, and selection

Why Table

A data grid should not decide your UI system.

Most table libraries sell a finished component. TanStack Table sells the engine underneath it, so your product can keep its own design language, interaction model, accessibility choices, and performance strategy.

Headless means the designer still wins.

Table gives you the math and state. Your app keeps the elements, classes, interactions, density, empty states, and brand-specific details.

Feature power without a grid tax.

Sorting, filtering, faceting, grouping, aggregation, expansion, selection, sizing, pinning, visibility, ordering, and pagination are opt-in row models.

Server-side data is not an afterthought.

Pagination, sorting, and filters can be local, controlled, URL-driven, or backed by your API. Table does not assume where the data lives.

Virtualization stays your choice.

Pair with TanStack Virtual when the table needs huge rows or columns, without turning the table engine into a scroll container framework.

1

Columns

Column defs describe accessors, headers, cells, metadata, and feature behavior without owning your DOM.

2

Rows

Core, filtered, sorted, grouped, expanded, and paginated row models compose into the exact data shape you need.

3

State

Let Table manage state by default, then control the pieces your product needs to own.

4

Markup

Render semantic tables, card grids, virtualized panes, or spreadsheet-like layouts from the same engine.

Row model pipeline

Compose the exact table behavior the product needs.

Start with core rows, then opt into filtering, sorting, grouping, expansion, pagination, selection, column sizing, and visibility. Every feature is explicit, and every state slice can be controlled.

Controlled state

Own the table state that matters.

Keep internal state for quick prototypes, then lift sorting, filters, pagination, selection, visibility, sizing, or ordering into your app when the product needs URL state, server queries, or saved user preferences.

state: {
  sorting,
  columnVisibility,
  rowSelection,
  pagination
}

sorting

[{ id: "score", desc: true }]

columnVisibility

{ owner: false }

rowSelection

{ "issue-42": true }

pagination

{ pageIndex: 2, pageSize: 25 }

Framework adapters

One table core, every renderer.

The table model is framework agnostic. Use the adapter that fits the UI runtime, keep the same column definitions and feature strategy, and render the table with your own components.

ReactVueSolidSvelteQwikAngularLitAlpineVanilla

Field notes

The best Table examples do not look alike.

That is the point. TanStack Table powers shadcn-style data tables, accessible React Aria tables, dense admin grids, custom filters, and spreadsheet-like product surfaces because it stays below the visual layer.

Open source ecosystem

Table is shaped by the people building serious tables.

Maintainers, framework adapters, partner integrations, examples, and GitHub sponsors all keep the table engine close to real product work.

Maintainers

Partners

Table You?

We're looking for

TanStack Table

Partners to join our mission! Partner with us to push the boundaries of

TanStack Table

and build amazing things together.

Let's chat

Only one thing left to do...