Data Grid - Row updates
Always keep your rows up to date.
The rows prop
The simplest way to update the rows is to provide the new rows using the rows prop.
It replaces the previous values. This approach has some drawbacks:
- You need to provide all the rows.
- You might create a performance bottleneck when preparing the rows array to provide to the Data Grid.
The updateRows method
If you want to only update part of the rows, you can use the apiRef.current.updateRows method.
The default behavior of updateRows API is to upsert rows.
So if a row has an id that is not in the current list of rows then it will be added to the Data Grid.
Alternatively, if you would like to delete a row, you would need to pass an extra _action property in the update object as below.
apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
Infinite loading
The grid provides a onRowsScrollEnd prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.
In addition, the area in which onRowsScrollEnd is called can be changed using scrollEndThreshold.
Lazy loading
Lazy Loading works like a pagination system, but instead of loading new rows based on pages, it loads them based on the viewport. It loads new rows in chunks, as the user scrolls through the Data Grid and reveals empty rows.
The Data Grid builds the vertical scroll as if all the rows are already there, and displays empty (skeleton) rows while loading the data. Only rows that are displayed get fetched.
To enable lazy loading, there are a few steps you need to follow:
First, set rowsLoadingMode="server".
Then, set rowCount to reflect the number of available rows on the server.
Third, set a callback function on onFetchRows to load the data corresponding to the row indices passed within GridFetchRowsParams.
Finally, replace the empty rows with the newly fetched ones using apiRef.current.unstable_replaceRows() like in the demo below.
High frequency
Whenever the rows are updated, the Data Grid has to apply the sorting and filters. This can be a problem if you have high frequency updates. To maintain good performances, the Data Grid allows to batch the updates and only apply them after a period of time. The throttleRowsMs prop can be used to define the frequency (in milliseconds) at which rows updates are applied.
When receiving updates more frequently than this threshold, the Data Grid will wait before updating the rows.
The following demo updates the rows every 10 ms, but they are only applied every 2 seconds.