Performance

The KendoReact Data Grid can work with large data sets that consist of millions of records and hundreds of fields.

Key Performance Features

These features enable the KendoReact Data Table to display millions of records:

  • Column Virtualization - The column virtualization can reduce the number of DOM elements on the page. This feature will render only the visible columns dynamically when the user scrolls horizontally. This allows only rendering a portion of the data when the user needs it.
  • Virtual Scrolling (row virtualization) - This feature will only render a portion of the data initially, and it will dynamically render the rest of the data based on the scroll position. This is ideal when working with millions of records, as the KendoReact Grid will render only a small subset of the data at a time.
  • Paging - Similar to the virtual scrolling, this will render only a portion of the data for the currently selected page. This feature can be used like an alternative to the virtual scrolling to cover other UX scenarios.
  • dataItemKey - This Grid property allows you to associate each row with a field from the data set, for example, ID. Using the dataItemKey improves the performance as React will update the associated row only if it is changed. This reduces the DOM operations after the state updates.

When testing the performance of the KendoReact Data Grid, make sure to use a production build. React is times faster when using a production build. This is closer to what the end-user will experience when using the final deployed version.

Example
View Source
Change Theme:

Performance Tips In the Demo

  • With local operations we recommend sorting the data only when the user changes the sorting. Avoid sorting the data each time the component rerenders.

  • By default the Grid will update during the cell editing which will cause multiple component renders. With large Data Grids we recommend updating the Data Grid state when the user stops editing the cell.

Testing Performance

Performance is a story best told in numbers. That is why we have made a sample application that uses React.Profiler to test the actual performance numbers of the KendoReact Data Grid. This sample application allows you to see how different features impact the performance.

You can download the sample application from GitHub.

We advise testing with a production build as well. That shows the real power of the KendoReact Grid with up to 6 times improved performance compared to when testing with a development build.

To play with the demo and see how we built it, you may want to run it locally:

  1. Clone or download the source code from GitHub.
  2. Install the required dependencies using npm install --save.
  3. Run the application using npm start.
  4. To build it for production with the profiler active using the command npm run build -- --profile.
  5. Then serve the create production build with serve -s build.
  6. Observe the real performance results from the production build.