Selecting a React grid is something a lot of us will eventually be required to do as an enterprise level developer. In this article I try to give some insight into what features I look for in a data grid.
Finding a workhorse grid for tabular data in your applications is something you regularly need to do as a frontend developer building line-of-business applications in the enterprise or at a large company. Understanding what to look for and what features you will need is a good prerequisite to choosing a React data grid.
When thinking about the must-have features of a solid data grid component, it's a matter of selecting one that fits all the criteria you have at the moment and anticipating where your project might go in the future. With this article, I've attempted to compile a list of key criteria most developers will need to consider when looking for a grid solution. I hope that you can take this guide and expand on it with your own research and find the ideal grid for your project.
Performance
Most major component libraries are going to appear to work fine in application demos and during your development phase. But you may run into performance issues once you start using real data and users start interacting with it in a test or production environment. For this reason, before making any final decisions on a particular library, you should use the React Performance Tools to analyze its performance and try to replicate a real use case or scenario similar to how you will use it in production.
We have info on the Telerik Blogs about measuring performance, including one article in particular about Profiling React Components, which shows how to use the User Timing API. In combination with the React Blog's Introducing the React Profiler, these are great resources for measuring the performance of a React component. Just as you would profile components you build and release yourself to production, when looking for a component library to bring into your project you should be testing them with your own application-specific data. How do they perform under the situations you envision them working?
Package Support
All React component libraries should give you the ability to install through npm or GitHub. Below is an example of importing and using a Grid component into your project. Most libraries will have a similar experience for incorporating their library easily into your project.
We make our packages easily consumable through npm to ensure that if you need to test an idea and build a demo, you're just an npm install away!
Must-Have Features in a React Grid
The following list of features is largely based on my experience building line of business applications for a large auto manufacturer.
Sorting, Filtering, and Paging
We need to ensure that any grid that we decide to use has options for basic Sorting, Filtering and Paging. This is the absolute minimum requirement I would have needed for any grid we would have used for our inventory system. If the devleoper has to worry too much about the implementation details of how to do these tasks, they are not getting their money's worth in a grid.
Sorting Examples
In React we typically will have a wrapper around our component that will allow us to keep track of our component's state.
We can utilize this local state to store information about our sorting, what field we want to sort on and the direction (ascending or descending), as well as default settings.
We can pass these into our component using props. A StackBlitz demo I created shows a very basic setup where we want to sort our data based on a productName. The default is true, and as you would guess, if you pass a false value to this prop you turn off the sorting feature.
A great bonus in any library is to help us query data. If the library you are looking at has something remotely similar to our Data Query package, it should help tremendously when applying the sorting, filtering, grouping, and other aggregate data operations. It makes methods like process(), orderBy(), and filterBy() available. These methods are helpful in areas outside your grid component as well. It's just a utility library, but another huge bonus.
In React, we also have the concept of a container component. These container components can be utilized to wrap and store our state for the grid component. We can import orderBy() and use it to sort our data which we have imported from a json file, which in turn has a column called productName. This makes it easy to load our data with default sort already in place. Maybe we want to always start off in a state where the data is in reverse alphabetical order? We would have the following setup in our state object:
state = {
sort: [
{ field: 'ProductName', dir: 'desc' }
]
}
And now when we create our Grid component in React, we just need to pass the data into the grid using the data prop. The product of this value is an orderBy applied to the json data and as the second argument we can pass in our settings from our state object:
render() {
return (
<Grid data={orderBy(products, this.state.sort)}>
<Column field="ProductID" />
<Column field="ProductName" title="Product Name" />
<Column field="UnitPrice" title="Unit Price" />
</Grid>
);
}
Already, and with very minimal effort, we have sorted our products by productName in a descending fashion. In order to make the individual column sortable we can use onSortChange(), an event that fires when the sorting of the Grid is changed. We handle this event ourselves and sort the data using a simple arrow function that updates our state using the setState() method in React.
By default, when filtering is enabled, the Grid renders a filter row in its header. Based on the type of data the columns contain, the filter row displays text boxes in each column header where the user can filter string, numeric, or date inputs.
Filtering and Paging Examples
Most of the filtering that I want to do can be achieved with a Custom Filter Cell. This technique is easy to understand and it's powerful. Filtering can be accomplished similarly to our previous sorting example. Using a higher order component in conjunction with the process() Data Query method, we can manage local data. It has its own state and adds the filter, sort, total, and skip props to the Grid to handle an onDataStateChange() event. We can bind to more than one grid if needed using different sets of data, without the need for you to write any logic for the filtering, sorting or paging. Below is what this feature looks like in a grid:
I prepared a StackBlitz Demo to show some basic filtering and paging as well.
Virtual Scrolling
Sometimes we have a large amount of data in our grids. When we're working with large numbers of columns or rows, we want to implement virtual scrolling. While the user is scrolling the table, the Grid needs to display only the visible data. Column Virtualization ensures that columns outside of the currently visible area of the grid will not be rendered.
The grid also has a special scrolling mode called Virtual Scrolling. It's this scrolling mode that is most useful with large data sets. You can set a prop on the grid called pageSize.
In this demo, if you open the grid in a new browser window and inspect the grid (as seen in the animated gif below) as you scroll, you will notice that the only rows getting rendered to the view at any one time are those that you see. Once you scroll past older records, they are removed and new records are rendered. Having this type of functionality can mean better grid performance.
Playing The Long Game
When looking for a good grid, or a general component library for that matter, you want to know that if you invest in using the library, that it's going to continue growing and being supported. Some libraries have been short-lived, either because the main contributor spends less time on the project or because the company building it was not able to continue. In most cases, active development on the project ensures future bug fixes and maintenance at the very least.
Knowing that a library has been around for a while and that new flavors and products are being built to this day in React, your favorite frontend framework, should give you confidence that it will be here for ten more years, that it will grow and that bugs will get fixed quickly. These are things that you want in a library. Having these traits will ensure you can have longevity with the tools and that your skills can be transferable or exploited as a developer in another job. You only get this from the larger libraries that have longevity.
Enterprise Level Support
Plain and simple, libraries that are not licensed rarely have any type of support outside of at-will community help. Most big web development shops and enterprise level businesses have tight deadlines and their developers push the technology to the edges. Sometimes it's helpful to have someone to reach out to that is an expert on working with the library. With KendoReact we can make those people accessible to you - they run our customer support channels, in fact.
Although we have seen some examples in our grid demo, we suggest looking around to see what else is out there that competes at this high level. If there are any features that you think you can't live without, put them in the comments and let us know what your favorite grid features are.