Skip to content
Edit this page

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 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 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.

<DataGridPro
  {...data}
  rows={data.rows.concat(loadedRows)}
  loading={loading}
  hideFooterPagination
  onRowsScrollEnd={handleOnRowsScrollEnd}
  components={{
    LoadingOverlay: LinearProgress,
  }}
/>

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 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.

<DataGridPro
  rows={initialRows}
  {...data}
  apiRef={apiRef}
  hideFooterPagination
  rowCount={rowCount}
  sortingMode="server"
  filterMode="server"
  rowsLoadingMode="server"
  onFetchRows={debouncedHandleFetchRows}
  experimentalFeatures={{
    lazyLoading: true,
  }}
/>

High frequency

Whenever the rows are updated, the grid has to apply the sorting and filters. This can be a problem if you have high frequency updates. To maintain good performances, the 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 grid will wait before updating the rows.

The following demo updates the rows every 10 ms, but they are only applied every 2 seconds.

<DataGridPro
  rows={rows}
  columns={columns}
  apiRef={apiRef}
  throttleRowsMs={2000}
/>

API