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?
Top comments (10)
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 :
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 :).
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 :
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.
My personal favorite is blueprintjs.com/docs/#table
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!
Thanks for putting the effort to write this.
Wanted to add to the list the datagrid/table component we're building at infinite-table.com - built for React from the ground-up, with full virtualization.
We're still working on some features like editing and row/cell keyboard navigation.
But other important features like grouping, pivoting, aggregations, sorting are already implemented and documented.
You might want to have a look - we'd appreciate your feedback.
May be worths mentioning: jqwidgets.com/react/react-grid/
Just have a look to this react data grid component - it ticks all the features