loading...
Cover image for React Grid Component Comparison

React Grid Component Comparison

ngduc profile image Duc Ng ・2 min read

As usual, there are so many choices when it comes to pick a React Component, in this case, a Grid Component. This post is an attempt to compare those choices.

Below is a list of popular grid components:

  • react-virtualized grid (bvaughn) - MIT Demo

  • react-tools/react-table - MIT Demo

  • react-data-grid (adazzle) - MIT Demo

  • react-bootstrap-table2 - MIT Demo

  • olifolkerd/tabulator (react version: react-tabulator) - MIT Demo

They are really high quality and popular components. So most common usecases are supported. But here, I am only comparing based on a few less common but "nice to have" features.

Nice to have features:

Virtualized rendering

Virtualization means only render visible rows. It's very useful when you want to render a large amount of data. Without this, UI will slow down because of many DOM elements created.

react-tabulator - Yes
react-virtualized grid - Yes
react-data-grid - Yes

react-table - no info (support pagination)
react-bootstrap-table2 - no info (support pagination)

Resize-able columns

react-tabulator - Yes
react-data-grid - Yes
react-table - Yes

react-virtualized grid - no info
react-bootstrap-table2 - no info

Cell editing

It's also a common use case. Sometimes you want users to edit data from a grid.

react-tabulator - Yes
react-data-grid - Yes
react-table - Yes
react-bootstrap-table2 - Yes

react-virtualized grid - no info

Nesting tables

Not very common but in some report screens, when we want to show data in groups, nesting tables will be needed.

react-tabulator - Yes
react-data-grid - Yes
react-table - Yes

react-virtualized grid - no info
react-bootstrap-table2 - no info

Filter in columns

A convenient feature that most users will appreciate.

react-tabulator - Yes
react-data-grid - Yes
react-table - Yes
react-bootstrap-table2 - Yes

react-virtualized grid - no info

Conclusion

At the end, I found these grid components satisfied all the nice-to-have requirements that I need: react-data-grid and react-tabulator.

How about you? What is your favorite React Grid Component and why?

Posted on by:

ngduc profile

Duc Ng

@ngduc

JS enthusiast / 15y tinkering with screens & code.

Discussion

markdown guide
 

I am using ag-Grid. It provides all features that I need. Unfortunately, row grouping is only available in enterprise edition, which is not free. My company and I are considering about purchasing the library.
I am searching for other free libraries that satisfy two main criteria :

  • inline editing
  • row grouping (multi-level, the better)

I like Slickgrid, unfortunately there is no React version of this library. But that's alright, as long as it supports ES6 so I can wrap it in React myself. Unfortunately, currently, there is only one version that supports ES6. For simple grid, it runs well. But for row grouping, I got some errors when trying to use it. I see the errors are in the library source code, not in my code. So I suspend to use it until I find the solution.
JqGrid is good, but its free edition doesn't support ES6, so it cannot be my option.
I am going to try React-Data-Grid for row grouping. I hope it will satisfy my need.
As for React-Tabulator, I have tried its vanilla version (named Tabulator) several months ago. But comparing to other popular libraries such Datatables, Handsontable, for handling large data, I find it inferior : slow. The only features I like in Tabulator are inline editing and row grouping, although it cannot create multi-level grouping. Maybe I will give it a 2nd try. :)

 

Thank you so much for such an informative article. I would like to mention the Essential JS 2 Grid for React by Syncfusion. It supports all the features you have mentioned in this article and even more :).

 
 

May I know why?
Their demo shows that scrolling performance is not very good - blueprintjs.com/docs/#table/features

 

Row grouping is not available in that libary. It's just like other general purpose GUI libraries like Bootstrap, Foundation, Material-UI, etc. So it cannot be in my list of option for data grid.
I prefer a specialized data grid library like ag-Grid, Fancygrid, Tabulator, etc which provide rich features, including multi-level row grouping.

 

Hello, I'm a big fan of the react-virtualized-grid option as one of the better choices for open-source, also the author Brian is part of the React core team and I'm aware of his work in open source, also there are some great articles about how to use it, why you should use it, etc. I also think that virtualized rows and columns are super important for any data grid that may be rendering a large number of results. To think that this used to be a feature that almost no libraries were supporting.

I would also recommend the KendoReact Grid as it supports all of the features that you mention, as well; no license is required to use it so long as you are not putting it in a commercial site and I wanted to make sure I was suggesting a possible free option. If you have any questions about how that works, hit me up, full disclosure, I am the developer advocate for that product and I can help if you have any questions!

Thanks for taking the time to compare these other options, it's super helpful to those of us trying to navigate similar decisions about which grids to use!

 

I have just tried Tabulator (not React-Tabulator) quickly for testing its features, esp grouping of fairly large data (about 4000 records), and I find several things I need :

  1. Multi-level grouping is available. It is easy to achieve this. Great !
  2. Inline editing, with various kinds of formatting. Very good
  3. Filtering within the column header.
  4. Various kinds of data loading, esp local and ajax.
  5. Data manipulation is provided by several ways which is easy to use.
  6. Performance is acceptable.
  7. ES6 features are supported, such as promise. This is very nice.
  8. It supports integration with popular frameworks/libraries : React, Angular and Vue. This is very nice.
  9. The documentation is terrific, so that I can quickly try its interesting or useful features.
  10. The library is actively maintained, so that there can be improvement, including addition of new features as well as improvement of existing features/functionality. I like this.

Tabulator improves significantly since I tried it several months ago.

Having said that, I hope Tabulator won't turn into paid library when it gets popular like others such as ag-Grid (enterprise edition), jqGrid, Datatables pro edition, Handsontable pro edition, etc. :)

Thank you very much for mentioning React-Tabulator that leads me to turn back to Tabulator after leaving it several months ago.