[DataGridPro] Implement Lazy loading

docs/data/data-grid/events/events.json

@@ -181,6 +181,13 @@
     "params": "GridEditRowsModel",
     "event": "MuiEvent<{}>"
   },
+  {
+    "projects": ["x-data-grid-pro", "x-data-grid-premium"],
+    "name": "fetchRows",
+    "description": "Fired when a new batch of rows is requested to be loaded. Called with a GridFetchRowsParams object.",
+    "params": "GridFetchRowsParams",
+    "event": "MuiEvent<{}>"
+  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "filterModelChange",
@@ -237,6 +244,13 @@
     "params": "GridPreferencePanelParams",
     "event": "MuiEvent<{}>"
   },
+  {
+    "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
+    "name": "renderedRowsIntervalChange",
+    "description": "Fired when the rendered rows index interval changes. Called with a GridRenderedRowsIntervalChangeParams object.",
+    "params": "GridRenderedRowsIntervalChangeParams",
+    "event": "MuiEvent<{}>"
+  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "resize",

docs/data/data-grid/rows/LazyLoadingGrid.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import {
+  useDemoData,
+  getRealGridData,
+  getCommodityColumns,
+} from '@mui/x-data-grid-generator';
+
+async function sleep(duration) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+const loadServerRows = async (newRowLength) => {
+  const newData = await getRealGridData(newRowLength, getCommodityColumns());
+  // Simulate network throttle
+  await sleep(Math.random() * 100 + 100);
+
+  return newData.rows;
+};
+
+export default function LazyLoadingGrid() {
+  const apiRef = useGridApiRef();
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  const handleFetchRows = async (params) => {
+    const newRowsBatch = await loadServerRows(
+      params.lastRowToRender - params.firstRowToRender,
+    );
+
+    apiRef.current.replaceRows(
+      params.firstRowToRender,
+      params.lastRowToRender,
+      newRowsBatch,
+    );
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        apiRef={apiRef}
+        hideFooterPagination
+        rowCount={50}
+        sortingMode="server"
+        filterMode="server"
+        rowsLoadingMode="server"
+        onFetchRows={handleFetchRows}
+      />
+    </div>
+  );
+}

docs/data/data-grid/rows/LazyLoadingGrid.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {
+  GridFetchRowsParams,
+  DataGridPro,
+  useGridApiRef,
+} from '@mui/x-data-grid-pro';
+import {
+  useDemoData,
+  getRealGridData,
+  getCommodityColumns,
+} from '@mui/x-data-grid-generator';
+
+async function sleep(duration: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+const loadServerRows = async (newRowLength: number) => {
+  const newData = await getRealGridData(newRowLength, getCommodityColumns());
+  // Simulate network throttle
+  await sleep(Math.random() * 100 + 100);
+
+  return newData.rows;
+};
+
+export default function LazyLoadingGrid() {
+  const apiRef = useGridApiRef();
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  const handleFetchRows = async (params: GridFetchRowsParams) => {
+    const newRowsBatch = await loadServerRows(
+      params.lastRowToRender - params.firstRowToRender,
+    );
+
+    apiRef.current.replaceRows(
+      params.firstRowToRender,
+      params.lastRowToRender,
+      newRowsBatch,
+    );
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        apiRef={apiRef}
+        hideFooterPagination
+        rowCount={50}
+        sortingMode="server"
+        filterMode="server"
+        rowsLoadingMode="server"
+        onFetchRows={handleFetchRows}
+      />
+    </div>
+  );
+}

docs/data/data-grid/rows/LazyLoadingGrid.tsx.preview

@@ -0,0 +1,10 @@
+<DataGridPro
+  {...data}
+  apiRef={apiRef}
+  hideFooterPagination
+  rowCount={50}
+  sortingMode="server"
+  filterMode="server"
+  rowsLoadingMode="server"
+  onFetchRows={handleFetchRows}
+/>

docs/data/data-grid/rows/rows.md

@@ -33,6 +33,8 @@ The following demo shows how to use `getRowId` to grab the unique identifier fro
 <DataGrid getRowId={(row) => row.internalId} />
 ```
 
+:::
+
 {{"demo": "RowsGridWithGetRowId.js", "bg": "inline", "defaultCodeOpen": false}}
 
 If no such unique identifier exists in the data set, then you must create it by some other means, but this scenario should be avoided because it leads to issues with other features of the grid.
@@ -80,6 +82,20 @@ In addition, the area in which `onRowsScrollEnd` is called can be changed using
 
 {{"demo": "InfiniteLoadingGrid.js", "bg": "inline", "disableAd": true}}
 
+### Lazy loading [<span class="plan-pro"></span>](https://mui.com/store/items/mui-x-pro/)
+
+To allow the grid to lazy load data, set `rowsLoadingMode="server"`.
+Then the `rowCount` needs to be set and the number of initially loaded rows needs to be less than the `rowCount` value.
+In addition, you need to handle the `onFetchRows` callback to fetch the rows for the corresponding index.
+Finally, you need to use the `apiRef.current.insertRows()` to tell the DataGrid where to insert the newly fetched rows.
+
+:::info
+In order for the 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](/components/data-grid/filtering/#server-side-filter) and on the [server-side sorting page](/components/data-grid/sorting/#server-side-sorting).
+:::
+
+{{"demo": "LazyLoadingGrid.js", "bg": "inline", "disableAd": true}}
+
 ### High frequency [<span class="plan-pro"></span>](https://mui.com/store/items/mui-x-pro/)
 
 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.

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -143,6 +143,7 @@
     },
     "onEditRowsModelChange": { "type": { "name": "func" } },
     "onError": { "type": { "name": "func" } },
+    "onFetchRows": { "type": { "name": "func" } },
     "onFilterModelChange": { "type": { "name": "func" } },
     "onMenuClose": { "type": { "name": "func" } },
     "onMenuOpen": { "type": { "name": "func" } },
@@ -189,6 +190,9 @@
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
     "rowModesModel": { "type": { "name": "object" } },
     "rowReordering": { "type": { "name": "bool" } },
+    "rowsLoadingMode": {
+      "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" }
+    },
     "rowSpacingType": {
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
       "default": "\"margin\""

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -142,6 +142,7 @@
     },
     "onEditRowsModelChange": { "type": { "name": "func" } },
     "onError": { "type": { "name": "func" } },
+    "onFetchRows": { "type": { "name": "func" } },
     "onFilterModelChange": { "type": { "name": "func" } },
     "onMenuClose": { "type": { "name": "func" } },
     "onMenuOpen": { "type": { "name": "func" } },
@@ -182,6 +183,9 @@
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
     "rowModesModel": { "type": { "name": "object" } },
     "rowReordering": { "type": { "name": "bool" } },
+    "rowsLoadingMode": {
+      "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" }
+    },
     "rowSpacingType": {
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
       "default": "\"margin\""
@@ -295,6 +299,7 @@
     "QuickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } },
     "Row": { "default": "GridRow", "type": { "name": "elementType" } },
     "RowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } },
+    "SkeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } },
     "Toolbar": { "default": "null", "type": { "name": "elementType | null" } },
     "TreeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } },
     "TreeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } }

docs/pages/x/api/data-grid/data-grid.json

@@ -250,6 +250,7 @@
     "QuickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } },
     "Row": { "default": "GridRow", "type": { "name": "elementType" } },
     "RowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } },
+    "SkeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } },
     "Toolbar": { "default": "null", "type": { "name": "elementType | null" } },
     "TreeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } },
     "TreeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } }

docs/pages/x/api/data-grid/grid-api.md

@@ -70,6 +70,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">pinColumn [<span class="plan-pro" title="Pro plan"></span>](https://mui.com/store/items/mui-x-pro/)</span>                                     | <span class="prop-type">(field: string, side: GridPinnedPosition) =&gt; void</span>                                                                               | Pins a column to the left or right side of the grid.                                                                                                                                                                     |
 | <span class="prop-name">publishEvent</span>                                                                                                                            | <span class="prop-type">GridEventPublisher</span>                                                                                                                 | Emits an event.                                                                                                                                                                                                          |
 | <span class="prop-name">removeRowGroupingCriteria [<span class="plan-premium" title="Premium plan"></span>](https://mui.com/store/items/material-ui-premium/)</span>   | <span class="prop-type">(groupingCriteriaField: string) =&gt; void</span>                                                                                         | Remove the field from the row grouping model.                                                                                                                                                                            |
+| <span class="prop-name">replaceRows</span>                                                                                                                             | <span class="prop-type">(firstRowToReplace: number, lastRowToReplace: number, newRows: GridRowModel[]) =&gt; void</span>                                          | Replace a set of rows with new rows.                                                                                                                                                                                     |
 | <span class="prop-name">resize</span>                                                                                                                                  | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Triggers a resize of the component and recalculation of width and height.                                                                                                                                                |
 | <span class="prop-name">restoreState</span>                                                                                                                            | <span class="prop-type">(stateToRestore: InitialState) =&gt; void</span>                                                                                          | Inject the given values into the state of the DataGrid.                                                                                                                                                                  |
 | <span class="prop-name">scroll</span>                                                                                                                                  | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span>                                                                               | Triggers the viewport to scroll to the given positions (in pixels).                                                                                                                                                      |

docs/translations/api-docs/data-grid/data-grid-premium-pt.json

@@ -90,6 +90,7 @@
     "onEditCellPropsChange": "Callback fired when the edit cell value changes.<br><br><strong>Signature:</strong><br><code>function(params: GridEditCellPropsParams, event: MuiEvent&lt;React.SyntheticEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridEditCellPropsParams.<br><em>event:</em> The event that caused this prop to be called.<br><em>details:</em> Additional details for this callback.",
     "onEditRowsModelChange": "Callback fired when the <code>editRowsModel</code> changes.<br><br><strong>Signature:</strong><br><code>function(editRowsModel: GridEditRowsModel, details: GridCallbackDetails) =&gt; void</code><br><em>editRowsModel:</em> With all properties from GridEditRowsModel.<br><em>details:</em> Additional details for this callback.",
     "onError": "Callback fired when an exception is thrown in the grid.<br><br><strong>Signature:</strong><br><code>function(args: any, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>args:</em> The arguments passed to the <code>showError</code> call.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
+    "onFetchRows": "Callback fired when rowCount is set and the next batch of virtualized rows is rendered.<br><br><strong>Signature:</strong><br><code>function(params: GridFetchRowsParams, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridFetchRowsParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onFilterModelChange": "Callback fired when the Filter model changes before the filters are applied.<br><br><strong>Signature:</strong><br><code>function(model: GridFilterModel, details: GridCallbackDetails) =&gt; void</code><br><em>model:</em> With all properties from <a href=\"/x/api/data-grid/grid-filter-model/\">GridFilterModel</a>.<br><em>details:</em> Additional details for this callback.",
     "onMenuClose": "Callback fired when the menu is closed.<br><br><strong>Signature:</strong><br><code>function(params: GridMenuParams, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridMenuParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onMenuOpen": "Callback fired when the menu is opened.<br><br><strong>Signature:</strong><br><code>function(params: GridMenuParams, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridMenuParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
@@ -126,6 +127,7 @@
     "rowModesModel": "Controls the modes of the rows.",
     "rowReordering": "If <code>true</code>, the reordering of rows is enabled.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowsLoadingMode": "Loading rows can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle the infnite loading on the client-side. Set it to &#39;server&#39; if you would like to handle the infnite loading on the server-side. * @default &quot;client&quot;",
     "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",

docs/translations/api-docs/data-grid/data-grid-premium-zh.json

@@ -90,6 +90,7 @@
     "onEditCellPropsChange": "Callback fired when the edit cell value changes.<br><br><strong>Signature:</strong><br><code>function(params: GridEditCellPropsParams, event: MuiEvent&lt;React.SyntheticEvent&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridEditCellPropsParams.<br><em>event:</em> The event that caused this prop to be called.<br><em>details:</em> Additional details for this callback.",
     "onEditRowsModelChange": "Callback fired when the <code>editRowsModel</code> changes.<br><br><strong>Signature:</strong><br><code>function(editRowsModel: GridEditRowsModel, details: GridCallbackDetails) =&gt; void</code><br><em>editRowsModel:</em> With all properties from GridEditRowsModel.<br><em>details:</em> Additional details for this callback.",
     "onError": "Callback fired when an exception is thrown in the grid.<br><br><strong>Signature:</strong><br><code>function(args: any, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>args:</em> The arguments passed to the <code>showError</code> call.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
+    "onFetchRows": "Callback fired when rowCount is set and the next batch of virtualized rows is rendered.<br><br><strong>Signature:</strong><br><code>function(params: GridFetchRowsParams, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridFetchRowsParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onFilterModelChange": "Callback fired when the Filter model changes before the filters are applied.<br><br><strong>Signature:</strong><br><code>function(model: GridFilterModel, details: GridCallbackDetails) =&gt; void</code><br><em>model:</em> With all properties from <a href=\"/x/api/data-grid/grid-filter-model/\">GridFilterModel</a>.<br><em>details:</em> Additional details for this callback.",
     "onMenuClose": "Callback fired when the menu is closed.<br><br><strong>Signature:</strong><br><code>function(params: GridMenuParams, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridMenuParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
     "onMenuOpen": "Callback fired when the menu is opened.<br><br><strong>Signature:</strong><br><code>function(params: GridMenuParams, event: MuiEvent&lt;{}&gt;, details: GridCallbackDetails) =&gt; void</code><br><em>params:</em> With all properties from GridMenuParams.<br><em>event:</em> The event object.<br><em>details:</em> Additional details for this callback.",
@@ -126,6 +127,7 @@
     "rowModesModel": "Controls the modes of the rows.",
     "rowReordering": "If <code>true</code>, the reordering of rows is enabled.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowsLoadingMode": "Loading rows can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle the infnite loading on the client-side. Set it to &#39;server&#39; if you would like to handle the infnite loading on the server-side. * @default &quot;client&quot;",
     "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",