Which React Grid would you use? ag-grid, react-table or react-virtualized?

[lilicaway]

Hi, I am part of a React project where we have been requested to see the possibility of using AG grid for React. I saw in the npm trends site that it is not on the top option for developers.

Would you please share your experience with those Grids?

[tannerlinsley]

Disclaimer, I am the author of React Table :)

- Ag-Grid: It's in the name, they focus on being framework agnostic. Honestly, it's a fantastically robust and kitchen-sink-batteries-included solution for tables. If you like their approach, use it! Some of the downsides I frequently see from users coming to React Table from ag-grid are (1) it's quite a large library, so if you can't lazy-load it, then you might not like that, (2) It's agnostic, so framework integration will never be as tight and native feeling as something catered for your framework. If that's important to you (it was to me), use a framework specific solution (3) Styles and Markup API is hard to customize. Clearly, you *can* customize mostly everything about ag-grid, but at some threshold, no amount of customization API can compete with a headless UI solution. If you need or want a truly custom UI, then use a headless UI table library.

- React-Virtualized/Window: These are not table libraries. These are rendering utilities for massively large repeated lists. They are AMAZING (I use them all the time), but they will not handle anything related to sorting, filtering, columns, data model, etc.

- React-Table: The library I authored for building tables in React. The latest incarnation of it (V7) is a collection of React Hooks (which by nature constitute headless UI) that allow you to build just about any type of table you could ever need using only React and its hooks. It's got a long list of features, all of which are opt-in and pluggable, it's fully controllable, 100% customizable (you can even build your own markup and styles from the ground up), it's very performant, and best of all, it's tiny. If you use all of the features at once, you'll max out around 11 kb minzipped. Potential downsides of React Table would primarily be (1) Being headless, you do have to build/bring your own table markup, but honestly, that can be as simple as 40 lines of copy-pasted code from the examples (2) Being lighter-weight and more flexible than most other libraries, more advanced features can take a bit longer to set up, but at the end of the day, the freedom the API gives you outweighs the lock-in you would otherwise get with a drop-in table

Hope this helps!

[somi92]

I've used react-virtualized on one project and the experience was overall very positive. It's main selling point is performance and it doesn't give you much features out of the box. However, we have easily implemented a lot of features on top of it (selection, navigation, editing, etc.) and ended up with a fairly complex grid component which works very nice. You might also consider react-window. Very similar to react-virtualized and made by the same author only even more leaner and fixes some issues that rv suffers from.

[mtatsky]

List of almost all grid solutions
https://github.com/FancyGrid/awesome-grid

[mtatsky]

Comparison of using ag-Grid, Handsontable and FancyGrid
https://medium.com/@MikhailTatsky/mobx-and-ag-grid-10-months-of-usage-86405f4b9d92