What to Look for When Choosing a React Data Grid Component

Selecting a robust React grid is something a lot of us will eventually be required to do as 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 front-end 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 as a foundation, expand on it with your own research and considerations and find the ideal grid for your project.

Performance

Most components 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 component (or 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.

The React.js Blog's Introducing the React Profiler is a great resource 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 in?

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 React Grid component into your project.

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 developer 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. You can see a specific example with demos of what these features cover and how you can set them up to test their functionality in Carl Bergenhem's in-depth tutorial for the KendoReact Grid component.

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.

As an aside, a great bonus in a UI library can offer is to help us query data. If the library you are looking at has something similar to the KendoReact 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.

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 Data 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 (Virtualization)

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.

If you like to see an example of this, you can check out a quick video demo I did of virtualization as implemented in the KendoReact Grid for our R2 2019 release webinar (starts at 18"20').

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 data grid, or a complete component library for that matter, you want to know that if you invest in using the library,  it's going to continue growing and being supported. Some libraries have been short-lived, either because the main contributor started spending less time on the project or because the company building it was not able to continue supporting it. 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 should give you confidence that it will be here for ten or 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, components 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. It's helpful to have someone to reach out to that is an expert on working with the component you're implementing.

Those are some of the key criteria on which to evaluate the React data grid that you're selecting for your next big app. 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.