Skip to content

Commit

Permalink
Code review: Danail
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Sep 1, 2022
1 parent 58d2263 commit c5291f9
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion docs/data/data-grid/row-updates/row-updates.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,18 @@ 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.replaceRows()` like in the demo below.
Finally, replace the empty rows with the newly fetched ones using `apiRef.current.unstable_replaceRows()` like in the demo below.

{{"demo": "LazyLoadingGrid.js", "bg": "inline", "disableAd": true}}

:::warning
The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing debouncing.
:::

:::warning
For now, lazy loading rows does not work with row grouping or tree data.
:::

:::info
In order for filtering and sorting to work you need to set their modes to `server`.
You can find out more information about how to do that on the [server-side filter page](/x/react-data-grid/filtering/#server-side-filter) and on the [server-side sorting page](/x/react-data-grid/sorting/#server-side-sorting).
Expand Down

0 comments on commit c5291f9

Please sign in to comment.