AG-Grid: Decent Data Grid Library with a Few Headaches (ReactJS)
Jack of all frameworks, master of none
Introduction
Recently, we’ve been using a lot of AG-Grid in React to power data-table views for a client.
AG-Grid allows you to manage large data sets with a lot of plug-and-play functionality. Unlike a more UI-focused library like Material UI’s table component, there’s no need to worry about baking interactivity into controlled components.
Pros
- Highly-responsive and fast
- Decent UI with built-in themes (they even have a Material UI-inspired theme)
- Sorting and filtering for all columns
- Editable data
- Exportable data
Cons
- UI difficult to customize
- React integration requires a lot of event listeners, doesn’t adhere to React best practices
- No fine-grained control over data once grid is populated
- Server-side row model (syncing data with server) difficult to implement
Usage
In general, you’ll rely on the client-side row-data model to power the grid. This simply means the entire dataset must be loaded at once from the server, and should not change or refresh once that has occurred (if you plan to manipulate or edit the data).
To handle this efficiently, we recommend pairing AG-Grid with React-Query, a library that allows you to fetch, cache, and update the client-side row model data as needed.
Here’s an incomplete starter boilerplate for how you may commonly use AG-Grid with React-Query.
Headaches
AG-Grid features support across multiple frameworks: vanilla JS, AngularJS, ReactJS, and VueJS. This cross-functionality presents challenges when working with their API interface in React.
As in the code sample above, a lot of AG-Grid’s functionality is driven by methods called on the gridApi object. For example, rather than creating a controlled isLoading prop on the AgGridReact component, you must rely on the gridApi object to render a loading state while the React-Query useQuery() fires.
These quirks have not yet prevented me from achieving my desired functionality, though you may need to apply creative solutions (not standard React patterns) when working with AG-Grid. Perhaps most notable is dynamic selection of row data, which requires a deep understanding of React Hooks to work properly in AG-Grid.
Conclusion
AG-Grid is best for analytic applications and internal tools rather than end-user presentation. It’s easy to use, especially if your use-cases are minimal and view focused. If you want custom styling or dynamic data functionality, the library is still workable but requires some compromise depending on the front-end framework you use.
