Skip to content
Get packs

Guide · Open source

How to use TanStack Table: headless tables in TypeScript

Updated · written with AI from the project's own documentation and checked against our catalogue data

TanStack Table is a free, MIT-licensed headless library for building data tables and datagrids in TypeScript and JavaScript. It handles the table logic, such as sorting, filtering, grouping, aggregation, row selection and pagination, but it ships no visual components, so you write the markup and styles yourself. This guide explains what that means, how to choose the right adapter for your framework, and what the library can do once it is in your project.

TanStack TableTanStack/table · ★ 28.5k · MIT

Quick start

  1. 1Pick your framework. Identify the framework your app uses. The library has adapters for React, Vue, Solid, Svelte, Angular and others.
  2. 2Install the adapter package. Add the package for your framework, such as @tanstack/react-table, using your usual package manager.
  3. 3Define columns and data. Describe the columns and the rows your table will show, then pass them to the adapter.
  4. 4Add the features you need. Turn on sorting, filtering, grouping, row selection or pagination as your table requires.
  5. 5Build the markup and styles. Render the table with your own HTML, components and CSS so it matches your design system.

What TanStack Table does and does not do

TanStack Table is a headless library. It manages the data logic of a table and leaves the rendering to you. You get full control over markup, styles and behaviour, but you also have to build the table's HTML and CSS.

The library covers sorting, filtering, grouping, aggregation, row selection and pagination. It is lightweight, can be virtualized for large datasets, and works well when the data is handled on the server.

  • Sorting, filtering, grouping, aggregation and row selection
  • Pagination and server-side data handling
  • Virtualization support for large datasets
  • No built-in buttons, tables or styles

Choose an adapter for your framework

The core is framework-agnostic. You use an adapter package for the framework your app is built with. The README lists bindings for React, Preact, Octane, Vue, Solid, Svelte, Angular, Ember, Lit and Alpine. The package names follow the pattern @tanstack/<framework>-table, for example @tanstack/react-table.

If your team already has a design system, this is useful because the table can match it. If you want a ready-made grid with styling included, this library is not that kind of tool.

  • React: @tanstack/react-table
  • Other supported frameworks use the same @tanstack/<framework>-table pattern

Add sorting, filtering and pagination

Once the adapter is installed, you define your columns and data, then connect the features you need. Sorting, filtering, grouping and pagination are all part of the library's table logic, so you do not need to write these algorithms from scratch.

Because the library gives you the state and the handlers but not the interface, you decide how sort arrows, filter inputs and page buttons look. The full API and examples are in the official documentation at tanstack.com/table.

  • Read the official documentation at https://tanstack.com/table for the adapter you chose
  • Start with a simple table, then add one feature at a time

Get help from an AI coding agent

If you use an AI coding assistant, TanStack Table ships TanStack Intent skills inside each adapter package. The skills are versioned with the library, so the guidance matches the version you installed. The README gives this command to add skill-loading guidance for your agent:

  • intent list browses the available skills
  • intent load <skill> prints one skill for inspection
npx @tanstack/intent@latest install

Look at the source or contribute

The source is on GitHub, so you can clone it to read the code or work on it. The README also points to GitHub discussions and a Discord server for questions, and to CONTRIBUTING.md for setup instructions if you want to submit a pull request.

  • Ask questions in GitHub discussions
  • Chat with the community on Discord
  • Read CONTRIBUTING.md before opening a pull request
git clone https://github.com/TanStack/table

What people use it for

  • A React admin dashboard that needs sortable, filterable customer lists styled to match the team's design system
  • A Vue or Svelte app that pages through server-side data with server-side handling
  • An internal tool that groups and aggregates rows, then lets users select records
  • A data-heavy page that uses virtualization to keep large tables fast

Frequently asked questions

Is TanStack Table free to use?

Yes. The repository is licensed under MIT, which the README states. The library is open source, so you can use it in commercial and personal projects under the terms of that licence.

What does headless mean in TanStack Table?

Headless means the library handles the table logic, such as sorting, filtering and pagination, but provides no visual components. You write the markup and styles yourself, so the table looks exactly how you design it.

Which frameworks does TanStack Table support?

The README lists bindings for React, Preact, Octane, Vue, Solid, Svelte, Angular, Ember, Lit and Alpine. Each framework has its own adapter package named in the pattern @tanstack/<framework>-table.

Can I use TanStack Table without writing code?

No. The library requires writing code in your application, so it is aimed at developers. Non-developers who need a grid without coding should look at a ready-made product.

How does TanStack Table compare to AG Grid or MUI X Data Grid?

TanStack Table gives you full control over markup and styles but provides no UI components. AG Grid, react-data-grid and MUI X Data Grid ship ready-made grid interfaces, which is faster to start with but less flexible for custom designs.

Does TanStack Table support editing like a spreadsheet?

The README describes only headless table logic, such as sorting, filtering, grouping, aggregation, row selection and pagination. It does not describe built-in spreadsheet-style editing, so check the official documentation before relying on that feature.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

TanStack Table suits developers who want a small, flexible table library and already have a design system or are willing to build the UI themselves. It is a poor fit if you want a grid that works with styling out of the box, if you need spreadsheet-style editing built in, or if you do not write code.

Install options & downloads