[DataGridPro] Implement Lazy loading

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

@@ -204,6 +204,14 @@
     "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<{}>",
+    "componentProp": "onFetchRows"
+  },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "filterModelChange",
@@ -264,6 +272,13 @@
     "event": "MuiEvent<{}>",
     "componentProp": "onPreferencePanelOpen"
   },
+  {
+    "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/row-updates/InfiniteLoadingGrid.js

@@ -47,7 +47,7 @@ export default function InfiniteLoadingGrid() {
 
   React.useEffect(() => {
     return () => {
-      mounted.current = false;
+      mounted.current = true;
     };
   }, []);
 

docs/data/data-grid/row-updates/InfiniteLoadingGrid.tsx

@@ -47,7 +47,7 @@ export default function InfiniteLoadingGrid() {
 
   React.useEffect(() => {
     return () => {
-      mounted.current = false;
+      mounted.current = true;
     };
   }, []);
 

docs/data/data-grid/row-updates/LazyLoadingGrid.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { createFakeServer } from '@mui/x-data-grid-generator';
+
+const ROW_COUNT = 10000;
+const DATASET_OPTION = {
+  dataSet: 'Employee',
+  rowLength: ROW_COUNT,
+};
+
+const { columns, useQuery } = createFakeServer(DATASET_OPTION);
+
+export default function LazyLoadingGrid() {
+  const apiRef = useGridApiRef();
+  const cachedQuery = React.useMemo(() => ({}), []);
+  const { data, loadServerRowsInterval } = useQuery(cachedQuery);
+  const cachedRows = React.useMemo(() => data.slice(0, 10), [data]);
+
+  const handleFetchRows = async (params) => {
+    const newRowsBatch = await loadServerRowsInterval(params);
+
+    apiRef.current.replaceRows(
+      params.firstRowToRender,
+      params.lastRowToRender,
+      newRowsBatch.returnedRows,
+    );
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        columns={columns}
+        rows={cachedRows}
+        apiRef={apiRef}
+        hideFooterPagination
+        rowCount={ROW_COUNT}
+        sortingMode="server"
+        filterMode="server"
+        rowsLoadingMode="server"
+        onFetchRows={handleFetchRows}
+        experimentalFeatures={{
+          lazyLoading: true,
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-updates/LazyLoadingGrid.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridFetchRowsParams,
+  useGridApiRef,
+} from '@mui/x-data-grid-pro';
+import { createFakeServer, UseDemoDataOptions } from '@mui/x-data-grid-generator';
+
+const ROW_COUNT = 10000;
+const DATASET_OPTION: UseDemoDataOptions = {
+  dataSet: 'Employee',
+  rowLength: ROW_COUNT,
+};
+
+const { columns, useQuery } = createFakeServer(DATASET_OPTION);
+
+export default function LazyLoadingGrid() {
+  const apiRef = useGridApiRef();
+  const cachedQuery = React.useMemo(() => ({}), []);
+  const { data, loadServerRowsInterval } = useQuery(cachedQuery);
+  const cachedRows = React.useMemo(() => data.slice(0, 10), [data]);
+
+  const handleFetchRows = async (params: GridFetchRowsParams) => {
+    const newRowsBatch = await loadServerRowsInterval(params);
+
+    apiRef.current.replaceRows(
+      params.firstRowToRender,
+      params.lastRowToRender,
+      newRowsBatch.returnedRows,
+    );
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        columns={columns}
+        rows={cachedRows}
+        apiRef={apiRef}
+        hideFooterPagination
+        rowCount={ROW_COUNT}
+        sortingMode="server"
+        filterMode="server"
+        rowsLoadingMode="server"
+        onFetchRows={handleFetchRows}
+        experimentalFeatures={{
+          lazyLoading: true,
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview

@@ -0,0 +1,14 @@
+<DataGridPro
+  columns={columns}
+  rows={cachedRows}
+  apiRef={apiRef}
+  hideFooterPagination
+  rowCount={ROW_COUNT}
+  sortingMode="server"
+  filterMode="server"
+  rowsLoadingMode="server"
+  onFetchRows={handleFetchRows}
+  experimentalFeatures={{
+    lazyLoading: true,
+  }}
+/>

docs/data/data-grid/row-updates/row-updates.md

@@ -39,6 +39,36 @@ 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>](/x/introduction/licensing/#pro-plan)
+
+:::warning
+This feature is experimental, it needs to be explicitly activated using the `lazyLoading` experimental feature flag.
+
+```tsx
+<DataGridPro experimentalFeatures={{ lazyLoading: true }} {...otherProps} />
+```
+
+:::
+
+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.replaceRows()` like in the demo below.
+
+{{"demo": "LazyLoadingGrid.js", "bg": "inline", "disableAd": true}}
+
+:::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).
+:::
+
 ## High frequency [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan)
 
 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

@@ -70,7 +70,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ aggregation?: bool, columnGrouping?: bool, newEditingApi?: bool, preventCommitWhileValidating?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
+        "description": "{ aggregation?: bool, columnGrouping?: bool, lazyLoading?: bool, newEditingApi?: bool, preventCommitWhileValidating?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
     "filterMode": {
@@ -159,6 +159,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" } },
@@ -205,6 +206,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\""
@@ -268,6 +272,7 @@
       "cell",
       "cellContent",
       "cellCheckbox",
+      "cellSkeleton",
       "checkboxInput",
       "columnHeader--alignCenter",
       "columnHeader--alignLeft",

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

@@ -59,7 +59,7 @@
     "experimentalFeatures": {
       "type": {
         "name": "shape",
-        "description": "{ columnGrouping?: bool, newEditingApi?: bool, preventCommitWhileValidating?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
+        "description": "{ columnGrouping?: bool, lazyLoading?: bool, newEditingApi?: bool, preventCommitWhileValidating?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }"
       }
     },
     "filterMode": {
@@ -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" } },
@@ -183,6 +184,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\""
@@ -296,6 +300,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" } }
@@ -320,6 +325,7 @@
       "cell",
       "cellContent",
       "cellCheckbox",
+      "cellSkeleton",
       "checkboxInput",
       "columnHeader--alignCenter",
       "columnHeader--alignLeft",

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" } }
@@ -274,6 +275,7 @@
       "cell",
       "cellContent",
       "cellCheckbox",
+      "cellSkeleton",
       "checkboxInput",
       "columnHeader--alignCenter",
       "columnHeader--alignLeft",

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

@@ -71,6 +71,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">pinColumn [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</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

@@ -97,6 +97,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.",
@@ -133,6 +134,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 enable infnite loading. Set it to &#39;server&#39; if you would like to enable lazy loading. * @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.",
@@ -226,6 +228,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"
     },
+    "cellSkeleton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the skeleton cell element"
+    },
     "checkboxInput": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the selection checkbox element"