2024-09-16
4556
#react
Paramanantham Harrison
10426
Sep 16, 2024 â‹… 16 min read

React Table: A complete guide with updates for TanStack 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 Native List Components: FlashList, FlatList, And More

React Native list components: FlashList, FlatList, and more

Explore the evolution of list components in React Native, from `ScrollView`, `FlatList`, `SectionList`, to the recent `FlashList`.

Chimezie Innocent
Jan 16, 2025 â‹… 4 min read
Building An AI Agent For Your Frontend Project

Building an AI agent for your frontend project

Explore the benefits of building your own AI agent from scratch using Langbase, BaseUI, and Open AI, in a demo Next.js project.

Ivaylo Gerchev
Jan 15, 2025 â‹… 12 min read
building UI sixty seconds shadcn framer ai

Building a UI in 60 seconds with Shadcn and Framer AI

Demand for faster UI development is skyrocketing. Explore how to use Shadcn and Framer AI to quickly create UI components.

Peter Aideloje
Jan 14, 2025 â‹… 6 min read
Server-Side Rendering With React Router V7

Server-side rendering with React Router v7

The recent merge of Remix and React Router in React Router v7 provides a full-stack framework for building modern SSR and SSG applications.

Amazing Enyichi Agu
Jan 13, 2025 â‹… 20 min read
View all posts

13 Replies to "React Table: A complete guide with updates for TanStack 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