2025-03-28
4099
#react
Paramanantham Harrison
10426
116
Mar 28, 2025 â‹… 14 min read

A complete guide to TanStack Table (formerly React Table)

Paramanantham Harrison Web and mobile app developer. Love exploring the depth of JS fullstack development. React, Vue, React Native, Next JS, and GraphQL are my current love interests. Find me online at learnwithparam.com.

Recent posts:

react view transitions and activity api tutorial

React View Transitions and Activity API tutorial: Animate an AirBnB clone

Explore the new React ViewTransition, addTransitionType, and Activity APIs by building an AirBnB clone project.

Emmanuel John
May 9, 2025 â‹… 8 min read

gRPC vs REST: Choosing the best API design approach

Compare gRPC vs REST to understand differences in performance, efficiency, and architecture for building modern APIs.

Alexander Godwin
May 9, 2025 â‹… 6 min read
Why Go wasn’t the right choice for the TypeScript compiler

Why Go wasn’t the right choice for the TypeScript compiler

The switch to Go may be a pragmatic move in the short term, but it risks alienating the very developers who built the tools that made TypeScript indispensable in the first place.

Muhammed Ali
May 8, 2025 â‹… 4 min read
how and when to use type casting in TypeScript

How and when to use type casting in TypeScript

Discover the basics and advanced use cases of type casting, how and why to use it to fix type mismatches, and gain some clarity on casting vs. assertion.

Paul Akinyemi
May 8, 2025 â‹… 14 min read
View all posts

13 Replies to "A complete guide to TanStack Table (formerly React Table)"

  1. “react–table is one of the most widely used table libraries in React.”… yet somehow I found two bugs in the first two minutes of playing with it – https://github.com/tannerlinsley/react-table/issues/created_by/dandv

    I don’t know why we keep reinventing the wheel. To repeat the same mistakes? There have been open source table components for over 10 years now. And of course, there’s a much larger crop of React table libraries than the 3 covered in this article. Material-ui, Autodesk, Vaadin, Blueprint all have React-compatible tables, and https://github.com/brillout/awesome-react-components#table–data-grid lists a ton more.

    “When to build your own table UI” should be “pretty much never”.

  2. Thanks for writing this article. In my current app, I use ag-Grid community edition and Tabulator. Both provide inline editing which is a must for me. Unfortunately ag-Grid community edition doesn’t provide row grouping and tree view which I sometimes need. Those features are only available in enterprise edition. So I use Tabulator : http://tabulator.info/, whenever I need row grouping and tree view. There is a React version of Tabulator.
    However, I am now concerned with the bundle size. Both libraries are big, especially ag-Grid. So recently I have been searching other options. React-Data-Grid looked nice, but when I saw the size of my app after adding a module that used it, I was surprised : my app size increased by about 10Mb. I also tried Reac-Table which was satisfactory in terms of the bundle size only, but it’s unlikely I will use it in my current app. I need some experiment of it prior to using it in a real project. Besides, I still lack of skill in using Hooks.
    I am quite tired searching for alternatives of ag-Grid community edition and Tabulator which have been serving me well apart of their bundle size.
    I am still wondering what caused such a huge bundle size increase when I used React-Data-Grid. Maybe you know the reason.

  3. Very nice article. Thank you Paramanantham. A couple small contributions: App.js is missing: import axios from ‘axios’; I also had problems with “yarn add” not installing things correctly. Fixed by switching to “npm install”. When I finally got the table to show up, there were no borders around the rows and columns like yours showed, nor was every other row shaded. Didn’t look as nice. Why?

  4. For Alternating table colors

    Add a table.css file
    make import Table.css into Table.js
    Add this code below

    table {
    border-collapse: collapse;
    width: 100%;
    }

    th, td {
    text-align: left;
    padding: 8px;
    }

    tr:nth-child(even) {background-color: #f2f2f2;}

  5. I am having the same issue with the lack of borders, also his code here:

    const Genres = ({ values }) => {
    // Loop through the array and create a badge-like component instead of a comma-separated string
    return (

    {values.map((genre, idx) => {
    return (

    {genre}

    );
    })}

    );
    };

    Does not have proper syntax.

  6. Well actually i was told to create a DataTable component, not to use an existing one, so for me it make sense that he share this knwoledge with us, though i agree with you there’re lot of libraries that we can use, but dependens on client also or that’s my particular case…

  7. thank you for this awesome article. really help.

    please , is there a way you can do vertical column header in react-table and also add pagination.

    i am having issue connecting pagination with this table you build in this tutorial.

    thank you.

  8. Hey,
    Can you please show how to implement setAllFilters([]). I do not want to use globalFilter, as I am looking to filter only two columns using the filter textfield provided in your example.
    There is no example online that shows how to use setAllFilters instead of setFilter. Also, the important thing is I want to use the same filterInput for both columns.

    Thanks !!

Leave a Reply