Performance
The Kendo UI for Vue Native 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 Kendo UI for Vue Native 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 Kendo UI for Vue Native 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 thedataItemKeyimproves 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 Kendo UI for Vue Native Data Grid, make sure to use a production build. Vue is times faster when using a production build. This is closer to what the end-user will experience when using the final deployed version.
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 you can use to test the actual performance of the Kendo UI for Vue Native Data Grid. The sample application you can find below, allows you to see how each Grid feature impacts the component's performance.
You can download this sample application from GitHub.
We advise testing with a production build as well. That shows the real power of the Kendo UI for Vue Native Grid.
To play with the demo and see how we built it, you may want to run it locally:
- Clone or download the source code from GitHub.
- Install the required dependencies using
npm install --save. - Run the application using
npm run serve. - Then serve the create production build with
npm run production. - Observe the real performance results from the production build.
