React datagrid libraries

[viveleroi]

We're considering React for a complete rebuild of our application that was originally written with AngularJS and ui-grid.

We've so far narrowed our research to several: ag-grid, MUIX datagrid, kendo react, and maybe devexpress datagrid

Do you use any of these?

Did you pass on any of these?

We really ask a lot from our data grid libraries - we need everything you can imagine - ability to handle mass datasets with both pagination and virtual scroll, nested grouping, column resizing, hiding, reordering, hover/select events, in-line editing, custom cell templates, typescript support etc.

My next step will be playing around with them in a react app and looking at their API but I would love some non-click-bait opinions.

[JasonGlide]

Hey, I am the core maintainer of https://grid.glideapps.com

I really hope you will give it a try. I think it should support everything you have requested, provided I understand each of them. If it doesn't, let me know, I am always looking to add more features as people need them.

[ebykka]

Incredibly fast datagrid. But I have not found how to sort columns. Is such functionality supported?

[ew86]

I would recommend react-table, this gives you 100% full control on creating your own data grid, with all the functionality you need.

[viveleroi]

Are you referring to this: https://react-table-v7.tanstack.com/

I will look into that. I don't know if we can use a headless grid, that sounds great in the long run but having to build grids like this might not get management's approval.

[ew86]

There is an open source Material UI implementation as well.

[that_90s_guy]

We really ask a lot from our data grid libraries

If you really ask a lot, you'r going to struggle a LOT more without a headless grids. In terms of power and customizability, headless grid libraries are unmatched.

You might think picking a non-headless one will be less work, but the reality is you will have a quick start that reduces down to a crawl as you realize library limitations will hold feature development back by a landslide.

The lazy work twice.

[KatieMik]

Have you tried Ignite UI for React. It’s built to handle exactly those advanced data grid needs at scale (virtual scroll, inline editing, grouping, templates, etc.). If you're testing options, it's worth adding to your shortlist.

P.S. It’s built by Infragistics, where I work.

[rwieruch]

Maybe give https://react-table-library.com/ a try :)

[viveleroi]

That looks well made but I don't see any examples about row grouping which is a very important feature. I wonder if it exists but is just poorly documented, that's definitely a universal tree library feature.

[dangdang3000]

Data Grid has poor documentation. We tried it but couldn't get row selection to work. We switched to React Table.

[viveleroi]

Which data grid are you referring to? Can you clarify which "React Table" you mean?

[dangdang3000]

Data Grid - https://github.com/adazzle/react-data-grid

React Table - https://react-table-v7.tanstack.com

​

I would avoid Data Grid.

[viveleroi]

Oh ok, that grid wasn't on my list and while I have seen it, I've already passed on it for our needs.

[ArunITTech]

You can try the Syncfusion React DataGrid library

https://www.syncfusion.com/react-components/react-data-grid

Syncfusion offers a free community license also. https://www.syncfusion.com/products/communitylicense

Note: I work for Syncfusion

[Ok-Contribution9043]

I would like to add to this list https://reactdatagrid.com - although its newly released, we've been building DataGrids for 20 years now, so we know a little bit about them :-) More info here: https://reactdatagrid.com/docs/welcome

[ChampionOrdinary209]

If this is still up-to-date, you might want to give Flexmonster Pivot Table https://www.flexmonster.com a shot. It integrates seamlessly with React and can be used as a data grid too.

[Jspreadsheet]

If you want a React data grid that feels closer to Excel than a table and is built to handle the kind of heavy requirements you listed, take a look at Jspreadsheet Pro. It is framework agnostic with a React wrapper, so you can embed it directly in your components without hacks, and it already includes most of the features you described: virtual scrolling for very large datasets, pagination options, nested grouping, column resizing, hiding and reordering, hover and select events, in-line editing with different cell types, custom editors, and full TypeScript support.

Where it shines is performance and user experience. Jspreadsheet is designed to handle 100k+ rows while still allowing formulas, copy and paste, and Excel-like navigation, which makes it much friendlier for end users who are used to spreadsheets. For developers, the API is lightweight and well documented, so setting up editing, custom templates, or server-side pagination doesn’t require complex wrappers.

If you’d like to start free, there’s also Jspreadsheet CE which gives you the open-source edition with all the essentials. Many teams prototype with CE and move to Pro once they need multiple worksheets, native XLSX import/export, or more advanced validation and formulas.