A complete guide to TanStack Table (formerly React Table)

If you need to organize and display data to your users, a table is the natural choice. While you can build your own tables for websites and apps from scratch, leveraging TanStack Table, a React Table library, saves you time by providing responsive, interactive tables that you can use right out of the box, customize, and even match to your branding.

What are React Table libraries?

React Table libraries help you create feature-rich, customizable tables in React applications. These libraries provide prebuilt table components and data processing utilities that enable you to implement advanced features like sorting, filtering, and pagination while following usability and accessibility best practices with minimal effort. React Table libraries allow you to focus on integrating and styling tables to meet your applications needs without having to write all of the code yourself.

Some of the most popular React Table libraries include AG Grid, which is used by large-scale commercial applications for its advanced functionality; Material React Table, which integrates with the Material Design Framework; and TanStack Table (formerly React Table), known for its lightweight and headless design.

If you’re new to React, try out our React starter kit to get up to speed.

Feature comparison of React Table libraries

When choosing a React Table library for your project, you should make sure it includes the required functionality. Most table libraries include a common feature set that is essential for building modern, interactive tables, including:

• Sorting: Organize data by columns in either ascending or descending order to make navigation and understanding large sets of information easy.

• Filtering: Narrow down the table data based on specific search criteria to quickly find specific information.

• Pagination: Break large datasets into smaller chunks, improving performance and usability.

• Styling: Redefine the appearance of tables, integrating them with your branding, color scheme, and layouts.

• Responsiveness: Use responsive tables that adapt to different screen sizes, enabling the table to be viewed on desktop as well as mobile devices. This is vital for modern web development but often frustrating to implement.

• Customization: Extend and adapt table functionality to meet specific use cases.

The table below compares the features of popular React Table libraries so that you can get an idea of what functionality you should look for when deciding which table library to adopt in your projects:

TanStack Table is headless

Some table libraries provide built-in styling and layouts, but many developers prefer headless solutions like TanStack Table. These libraries focus solely on functionality, which means the style and layout are completely customizable.

TanStack Table tutorial

This tutorial provides examples using TanStack Table, the most popular of the React Table libraries. TanStack is loaded with features, and because of its popularity, it has an active community, meaning it's well tested and likely to be supported for a long time. 

You can view and run the full ex code for this tutorial here.

First, run the following npm command to add the TanStack Table library to your project:

npm install @tanstack/react-table @tanstack/match-sorter-utils

To set up your first TanStack Table, you will need some data to display. Create a file named mockData.json in the public directory of your project containing the following JSON data:

To read this data, create a custom hook named useMockData in the src directory to fetch the data from the JSON file via its public URL:

This hook stores the data read from the JSON file in the application state using useState, making it available to the other components.

Create a basic table with TanStack Table

To create a simple table, use the TanStack useReactTable hook to create a component called BasicTable in the src directory:

The useReactTable hook in the above example accepts two properties (props): data and columns, which are used to pass data to it.

Initialization with useReactTable:

• The useReactTable hook is imported and initialized with the data and columns props.

• It calls the getCoreRowModel function, which maps rows to the data you provide.

Function of getCoreRowModel:

• getCoreRowModel prepares the data representation of the table.

• It includes all of the metadata needed for the table to interact with rows and cells.

Retrieving headers and rows:

• The getHeaderGroups function retrieves the table headers.

• The getRowModel function accesses the rows of data.

• You can then map out table rows (tr) and use getVisibleCells to map out table data (td).

Dynamic rendering with flexRender:

• flexRender allows dynamic values to be passed through in the column definitions.

• For instance, you can pass a function that returns a calculated result instead of a static string or number.

As TanStack Table is a headless library, implementation of the CSS for layout is taken care of by the developer. Paste the following CSS into your main stylesheet to apply some basic theming to your table:

Now that everything is set up, replace the code in the App.jsx file with the following:

The useMockData function above returns the data fetched from the JSON file.

Column definitions:

• The accessorKey defines the key from the data object being passed in to the table.

• Example: The Name column will look for data from data.name.

• The header defines the heading of each column in the table.

Cell customization:

• The cell property allows you to access the data passed into each row.

• You can use this to perform operations such as formatting data.

Fuzzy filtering with TanStack Table

To filter table results based on approximate matches to search criteria (fuzzy filter), each column requires a filter type to be defined using the filterFn key:

Implementation:

• Replace the columns function in the main App file with the updated version below.

• The updated version adds a filterFn key to each column and specifies the required filter function.

Commonly used values include:

• includesString for string values

• equals for numbers or booleans

Next, add an input to the BasicTable TanStack Table component, which will appear above the table for search functionality. This will set the globalFilter state, which will then trigger the fuzzyFilter function defined in the TanStack Table initialization.

The fuzzyFilter function uses rankItem (a utility that TanStack Table provides to determine how well a row's value in a specific column matches the provided filter). It does this by storing ranking metadata and then returning true or false to indicate if the row should be included in the filtered results.

Sorting data in React with TanStack Table

To implement table sorting, add a sorting state to the table component:

• Use the getSortedRowModel function in the table initialization.

• Set up the sorting state and onSortingChange to manage the sorting behavior dynamically.

• Use the getToggleSortingHandler function in the header to enable sorting interaction for each column.

This is demonstrated in the example below, which updates BasicTable.js to include sorting. It also includes some UI indicators showing whether a column is sorted:

Pagination with TanStack Table

To set up pagination in the TanStack Table, use the getPaginationRowModel function and set the pagination state. 

Passing state as a prop

Pass the initialization of the state as a prop to the useReactTable hook: BasicTable. This allows the pagination to be controlled from the parent component that will render it.

Adding pagination controls

The only extra thing to add is some pagination controls so the global state can be controlled by the user.

How to customize TanStack Table

To demonstrate the flexibility of TanStack Table and how to build a custom feature into the table, the example below adds a function that highlights rows based on the price being above a certain value. This is implemented using a custom function named isRowHighlighted:

Pass the row to be checked by the isRowHighlighted function in the styling for each tr:

When would I need to use a React Table library?

React Table libraries are used where advanced functionality is required to handle complex datasets or provide a better user experience over plain HTML tables. While some design systems and UI libraries include their own interactive tables, they are often not as robust or functional as libraries that focus entirely on providing table functionality.

Use cases for a React Table library

• Business applications: Tools like CRM systems, admin dashboards, and analytic platforms require tables to display, sort, and filter data like user information, sales records, or financial reports.

• Ecommerce: Online stores and inventory systems use tables to show product details, including names, prices, stock, and availability.

• Data analysis tools: Tables are a vital component in financial dashboards and scientific analysis tools where users need to manipulate large datasets interactively.

• Content management systems (CMS): CMS dashboards use tables to list blog posts, media assets, or user-generated content complete with administrative actions like editing or deleting entries.

While libraries like jQuery DataTables were once the best choice for handling data-heavy tables in web applications, integrating jQuery with React applications is generally a very bad idea (adding complexity, additional development overheads, and potential conflicts). Hence, native React solutions such as TanStack Table are now a more popular (and sensible) option. 

Tabulated content drives the web

Even the most high-concept web designs boil down to a few common elements, tables being one of them. Data is almost always presented in rows and columns, whether you notice it or not. From product listings in ecommerce to transactions in your banking apps, and even the endlessly scrolling feed of videos and captions in social apps, underneath them all are tables.

By combining TanStack Table with the Contentful Composable Content Platform, you can compose your back end and fill it with engaging data, including product listings, blog posts, and viral videos. You can then use TanStack Table to display your content in a way that's easy for your users to consume. Contentful makes all of your data available from a secure, high-speed global CDN with REST and GraphQL APIs that you can connect to any table in any app.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.