[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,78 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { createFakeServer, loadServerRows } from '@mui/x-data-grid-generator';
+
+const DATASET_OPTION = {
+  dataSet: 'Employee',
+  rowLength: 10000,
+};
+
+const { columns, columnsWithDefaultColDef, useQuery } =
+  createFakeServer(DATASET_OPTION);
+
+export default function LazyLoadingGrid() {
+  const apiRef = useGridApiRef();
+  const [queryOptions, setQueryOptions] = React.useState({});
+  const { data } = useQuery(queryOptions);
+  const initialRows = React.useMemo(() => data.slice(0, 10), [data]);
+
+  const handleFetchRows = async (params) => {
+    // Bug, it shouldn't be triggered for the initial rendering
+    if (data.length === 0) {
+      return;
+    }
+
+    setQueryOptions((prev) => {
+      if (
+        prev.filterModel === params.filterModel &&
+        prev.sortModel === params.sortModel
+      ) {
+        return prev;
+      }
+
+      return {
+        filterModel: params.filterModel,
+        sortModel: params.sortModel,
+      };
+    });
+
+    const serverRows = await loadServerRows(
+      data,
+      {
+        filterModel: params.filterModel,
+        sortModel: params.sortModel,
+      },
+      {
+        minDelay: 300,
+        maxDelay: 800,
+        useCursorPagination: false,
+      },
+      columnsWithDefaultColDef,
+    );
+
+    apiRef.current.replaceRows(
+      params.firstRowToRender,
+      params.lastRowToRender,
+      serverRows.returnedRows.slice(params.firstRowToRender, params.lastRowToRender),
+    );
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        columns={columns}
+        rows={initialRows}
+        apiRef={apiRef}
+        hideFooterPagination
+        rowCount={data.length}
+        sortingMode="server"
+        filterMode="server"
+        rowsLoadingMode="server"
+        onFetchRows={handleFetchRows}
+        experimentalFeatures={{
+          lazyLoading: true,
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridFetchRowsParams,
+  useGridApiRef,
+} from '@mui/x-data-grid-pro';
+import {
+  createFakeServer,
+  QueryOptions,
+  loadServerRows,
+  UseDemoDataOptions,
+} from '@mui/x-data-grid-generator';
+
+const DATASET_OPTION: UseDemoDataOptions = {
+  dataSet: 'Employee',
+  rowLength: 10000,
+};
+
+const { columns, columnsWithDefaultColDef, useQuery } =
+  createFakeServer(DATASET_OPTION);
+
+export default function LazyLoadingGrid() {
+  const apiRef = useGridApiRef();
+  const [queryOptions, setQueryOptions] = React.useState<QueryOptions>({});
+  const { data } = useQuery(queryOptions);
+  const initialRows = React.useMemo(() => data.slice(0, 10), [data]);
+
+  const handleFetchRows = async (params: GridFetchRowsParams) => {
+    // Bug, it shouldn't be triggered for the initial rendering
+    if (data.length === 0) {
+      return;
+    }
+
+    setQueryOptions((prev) => {
+      if (
+        prev.filterModel === params.filterModel &&
+        prev.sortModel === params.sortModel
+      ) {
+        return prev;
+      }
+
+      return {
+        filterModel: params.filterModel,
+        sortModel: params.sortModel,
+      };
+    });
+
+    const serverRows = await loadServerRows(
+      data,
+      {
+        filterModel: params.filterModel,
+        sortModel: params.sortModel,
+      },
+      {
+        minDelay: 300,
+        maxDelay: 800,
+        useCursorPagination: false,
+      },
+      columnsWithDefaultColDef,
+    );
+
+    apiRef.current.replaceRows(
+      params.firstRowToRender,
+      params.lastRowToRender,
+      serverRows.returnedRows.slice(params.firstRowToRender, params.lastRowToRender),
+    );
+  };
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        columns={columns}
+        rows={initialRows}
+        apiRef={apiRef}
+        hideFooterPagination
+        rowCount={data.length}
+        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={initialRows}
+  apiRef={apiRef}
+  hideFooterPagination
+  rowCount={data.length}
+  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).                                                                                                                                                      |