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,
  }}
/>

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 10ms, but they are only applied every 2 seconds.

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

API