Overview

TanStack Table's core is framework agnostic, which means its API is the same regardless of the framework you're using. Adapters are provided to make working with the table core easier depending on your framework. See the Adapters menu for available adapters.

Typescript

While TanStack Table is written in TypeScript, using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase)

If you use TypeScript, you will get top-notch type safety and editor autocomplete for all table APIs and state.

Headless

As it was mentioned extensively in the Intro section, TanStack Table is headless. This means that it doesn't render any DOM elements, and instead relies on you, the UI/UX developer to provide the table's markup and styles. This is a great way to build a table that can be used in any UI framework, including React, Vue, Solid, Svelte, Qwik, and even JS-to-native platforms like React Native!

Agnostic

Since TanStack Table is headless and runs on a vanilla JavaScript core, it is agnostic in a couple of ways:

1. TanStack Table is Framework Agnostic, which means you can use it with any JavaScript framework (or library) that you want. TanStack Table provides ready-to-use adapters for React, Vue, Solid, Svelte, and Qwik out of the box, but you can create your own adapter if you need to.
2. TanStack Table is CSS / Component Library Agnostic, which means that you can use TanStack Table with whatever CSS strategy or component library you want. TanStack Table itself does not render any table markup or styles. You bring your own! Want to use Tailwind or ShadCN? No problem! Want to use Material UI or Bootstrap? No problem!

Features

TanStack Table will help you build just about any type of table you can imagine. It has built-in state and APIs for the following features:

• Column Faceting - List unique lists of column values or min/max values for a column
• Column Filtering - Filter rows based on search values for a column
• Column Grouping - Group columns together, run aggregations, and more
• Column Ordering - Dynamically change the order of columns
• Column Pinning - Pin (Freeze) columns to the left or right of the table
• Column Sizing - Dynamically change the size of columns (column resizing handles)
• Column Visibility - Hide/show columns
• Global Faceting - List unique lists of column values or min/max values for the entire table
• Global Filtering - Filter rows based on search values for the entire table
• Row Expanding - Expand/collapse rows (sub-rows)
• Row Pagination - Paginate rows
• Row Pinning - Pin (Freeze) rows to the top or bottom of the table
• Row Selection - Select/deselect rows (checkboxes)
• Row Sorting - Sort rows by column values

These are just some of the capabilities that you can build with TanStack Table. There are many more features that are possible with TanStack Table that you can add along-side the built-in features.

Virtualization is an example of a feature that is not built-in to TanStack Table, but can be achieved by using another library (like TanStack Virtual) and adding it along-side your other table rendering logic.

TanStack Table also supports Custom Features (plugins) that you can use to modify the table instance to add your own custom logic to the table in a more integrated way.

And of course, you can just write your own state and hooks to add whatever other features you want for your table. The features from the TanStack Table core are just a solid foundation to build on, with a large focus on performance and DX.

Core Objects and Types

The table core uses the following abstractions, commonly exposed by adapters:

• Column Defs
  • Objects used to configure a column and its data model, display templates, and more
• Table
  • The core table object containing both state and API
• Table Data
  • The core data array you provide the table
• Columns
  • Each column mirrors its respective column def and also provides column-specific APIs
• Rows
  • Each row mirrors its respective row data and provides row-specific APIs
• Header Groups
  • Header groups are computed slices of nested header levels, each containing a group of headers
• Headers
  • Each header is either directly associated with or derived from its column def and provides header-specific APIs
• Cells
  • Each cell mirrors its respective row-column intersection and provides cell-specific APIs