TanStack Table for React Table Component: Advanced Features and Updates

Are you planning to build a Data-intensive web application with React and looking for a proven way to organize complex data in the application?

Well, when it comes to displaying and managing tabular data, React table components play a vital role. And one such impressive library that has gained a lot of traction in the React ecosystem is  "TanStack Table.”

The blog post explores the advanced features and updates of TanStack Table and also provides a simple implementation example of it. This helps you to find out how this library became an exceptional choice for React developers for building powerful React tables.

So, are you ready to dive in? 

Let’s get started!

What is a TanStack?

TanStack Table is widely known as the Headless UI for creating robust tables and data grids. It has gained significant popularity in recent years. It is a robust React table component library that offers a wide range of features for displaying and managing tables and data grids in web applications. 

It is a powerful React table library that provides comprehensive features for displaying and interacting with data. It is easy to use and customizable, making it a great choice for a variety of projects.

But why use TanStack headless UI over Component-based libraries?

The term "headless" comes from the idea of separating the "head" (the UI components) from the "body" (the logic and functionality). 

In the Context of TanStack headless UI, it means that the UI component provided by the library solely focuses on the logic, state, processing, and API for UI elements and interactions. However, it does not provide markups, styles, or any prebuilt implementations which means it removes these concerns to make logic and component more modular and reusable. 

On the other hand, component-based UI libraries need to support a massive API surface around markup and style customization limiting the possibilities of decoupling your logic from the UI. 

Overall, if you choose the headless UI library it will handle the complex tasks of data processing, state management, and business logic, empowering you to take high-cardinality decisions that differ across app implementations and use cases. 

Note: You can have full control over markup and implementation using TanStack Table, a headless table library.

However, if you want a ready-to-use component-based table with more power and more constraints around markup/styles/implementation, you should consider using AG Grid, a component-based table library from TanStack’s OSS partner AG Grid .

The advanced features and updates in TanStack version V8.0

TanStack is currently available in its latest version V8.0, this version brings significant upgrades from its previous version V7.0. TanStack Table V8.0 is designed to be highly performant and feature-rich. It extends its support to various web frameworks including Vue, Solid, and Svelte. 

So, let's look into its advanced features first, and then version updates. 

TanStack key feature list: 

Lightweight (10 - 15 kb):

TanStack is lightweight and so it will not increase your application bundle size.

Tree-Shaking: 

With the tree-shaking feature, you can reduce the size below ~14 kb.

Headless UI library: 

With TanStack you can make logic and component more modular and reusable. 

Cell Formatters:

Can provide custom cell formatter by passing a function to the cell property and using the prop.getValue() function to access the cell’s value. Cell formatters are also provided with the row and table objects. 

Auto-managed internal state: 

The state passed will be merged with and override the internal automatically-managed state and produce the final state for the table. 

Sorting and Multi Sort: 

It allows you to sort and multi-sort table content using prebuilt functions.

Global Filters and Columns Filters: 

The library provides you with the ability to column filter Table column and Global filter if it is provided with the accessorKey/accessorFn.

Pagination: 

It supports pagination, the pagination state can be stored on the table.

Row Grouping, Selection, and Expansion: 

It supports the important functions for performing Table operations such as Row Grouping, Row Selection, and Row Expansion.

Column ordering, visibility, and Resizing: 

It supports important functions for performing Table operations like Column ordering, Column Resizing, and managing Column Visibility. 

Other than the above features, the library also provides features such as Aggregation, Virtualization, Server-side/ External data model support, and Nested/Grouped Headers.

The major updates included in TanStack Version V7 to V8  

Full rewrite to TypeScript:

TanStack Table V8 was a major rewrite of React Table v7 from the ground up in TypeScript. This means that the library is now more type-safe and easier to use with TypeScript projects.

Removal of plugin system: 

The plugin system in TanStack Table v7 has been removed in favor of a more inversion of control (IoC) approach. This means that you now have more control over how the table works and can customize it to your specific needs.

Vastly larger and improved API: 

The API in TanStack Table V8 has been vastly improved and expanded. This means that you have more control over the table and can do more with it.

‍‍

New features like pinning: 

TanStack Table V8 includes several new features, such as pinning rows and columns. This makes it easier to work with large tables and to focus on the data that you are most interested in.

Better controlled state management: 

The state management in TanStack Table V8 has been improved. This means that you have more control over how the table's state is managed and can customize it to your specific needs.

Better support for server-side operations: 

TanStack Table V8 now has better support for server-side operations. This means that you can now use the table to display data that is stored on the server.

Complete (but optional) data pipeline control: 

TanStack Table V8 now gives you complete (but optional) control over the data pipeline. This means that you can now customize how the data is loaded, filtered, and sorted. 

Agnostic core with framework adapters for React, Solid, Svelte, Vue, and potentially more in the future: 

TanStack Table V8 now has an agnostic core with framework adapters for React, Solid, Svelte, and Vue. This means that you can use the table with any of these frameworks.

New Dev Tools: 

TanStack Table V8 includes new Dev Tools that make it easier to debug and troubleshoot your tables.

Overall, TanStack Table V8 is a major improvement over TanStack Table v7. It is more type-safe, easier to use, and more powerful. If you are using TanStack Table, I recommend that you upgrade to V8.

TanStack Table implementation in React application

To use the TanStack Table in the React application first install the @tanstack/react-table package. You can do this by running the following command:

1npm install @tanstack/react-table

Once you have installed the package, you can run the code by starting a development server:

1npm start 

TanStack Table code Example:

This code below will create a simple table with three columns: name, age, and gender. The data for the table is hard-coded in the data array. The useTable hook is used to create the table and to bind it to the table state variable. The tableRef variable is used to access the table DOM element.

1import React, { useState, useEffect } from "react";
2import { useTable } from "@tanstack/react-table";
3const columns = [
4  {
5    id: "name",
6    Header: "Name",
7    accessor: "name",
8  },
9
10  {
11    id: "age",
12    Header: "Age",
13    accessor: "age",
14  },
15
16  {
17    id: "gender",
18    Header: "Gender",
19    accessor: "gender",
20  },
21];
22const data = [
23  {
24    name: "John Doe",
25    age: 30,
26    gender: "Male",
27  },
28  {
29    name: "Jane Doe",
30    age: 25,
31    gender: "Female",
32  },
33  {
34    name: "Bill Smith",
35    age: 40,
36    gender: "Male",
37  },
38];
39const App = () => {
40  const [table, setTable] = useState(null);
41  useEffect(() => {
42    const tableRef = useTable({
43      columns,
44      data,
45    });
46    setTable(tableRef);
47  }, [data]);
48  return (
49    <div>
50      <table ref={table} />
51    </div>
52  );
53};
54export default App;

The table will be displayed in your browser. You can interact with the table by clicking on the columns and rows. You can also perform operations on the table, such as filtering, sorting, and paginating.

Build Powerful React Table with TanStack Table and DhiWise

TanStack Table is a powerful React table library that offers a comprehensive set of features for displaying and interacting with data. It is easy to use and customizable, making it a great choice for a variety of projects.

In the blog, we have discussed some of the advanced features and updates of TanStack Table and its simple implementation. If you are looking for an efficient way to build data-intensive React applications with a powerful table library, try DhiWise.

DhiWise supports web app development with React. The platform’s advanced features speeds up your React application development and also supports the powerful and versatile TanStack React table library for building React Table while having full control over markups and Styles.

Explore more about React application development with DhiWise.