[DataGridPro] Server side data source lazy loading

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

@@ -227,7 +227,7 @@
   {
     "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.",
+    "description": "Fired when a new batch of rows is requested to be loaded. Called with a GridFetchRowsParams object. Used to trigger <code>onFetchRows</code>.",
     "params": "GridFetchRowsParams",
     "event": "MuiEvent<{}>",
     "componentProp": "onFetchRows"

docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.js

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  useGridApiRef,
+  GridToolbar,
+  GRID_ROOT_GROUP_ID,
+} from '@mui/x-data-grid-pro';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+
+function ErrorAlert({ onClick }) {
+  return (
+    <Alert
+      sx={{
+        position: 'absolute',
+        bottom: '0',
+        paddingX: 2,
+        paddingY: 1,
+        width: '100%',
+        zIndex: 10,
+      }}
+      severity="error"
+      action={
+        <Button color="inherit" size="small" onClick={onClick}>
+          Retry
+        </Button>
+      }
+    >
+      Could not fetch the data
+    </Alert>
+  );
+}
+
+function ServerSideLazyLoadingErrorHandling() {
+  const apiRef = useGridApiRef();
+  const [retryParams, setRetryParams] = React.useState(null);
+  const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);
+
+  const { fetchRows, ...props } = useMockServer(
+    { rowLength: 100 },
+    { useCursorPagination: false, minDelay: 300, maxDelay: 800 },
+    shouldRequestsFail,
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          firstRowToRender: `${params.start}`,
+          lastRowToRender: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={shouldRequestsFail}
+            onChange={(event) => setShouldRequestsFail(event.target.checked)}
+          />
+        }
+        label="Make the requests fail"
+      />
+      <div style={{ height: 400, position: 'relative' }}>
+        {retryParams && (
+          <ErrorAlert
+            onClick={() => {
+              apiRef.current.unstable_dataSource.fetchRows(
+                GRID_ROOT_GROUP_ID,
+                retryParams,
+              );
+              setRetryParams(null);
+            }}
+          />
+        )}
+        <DataGridPro
+          {...props}
+          apiRef={apiRef}
+          unstable_dataSource={dataSource}
+          unstable_onDataSourceError={(_, params) => setRetryParams(params)}
+          unstable_dataSourceCache={null}
+          lazyLoading
+          paginationModel={{ page: 0, pageSize: 10 }}
+          slots={{ toolbar: GridToolbar }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ServerSideLazyLoadingErrorHandling;

docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  useGridApiRef,
+  GridToolbar,
+  GridDataSource,
+  GridGetRowsParams,
+  GRID_ROOT_GROUP_ID,
+} from '@mui/x-data-grid-pro';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { useMockServer } from '@mui/x-data-grid-generator';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+
+function ErrorAlert({ onClick }: { onClick: () => void }) {
+  return (
+    <Alert
+      sx={{
+        position: 'absolute',
+        bottom: '0',
+        paddingX: 2,
+        paddingY: 1,
+        width: '100%',
+        zIndex: 10,
+      }}
+      severity="error"
+      action={
+        <Button color="inherit" size="small" onClick={onClick}>
+          Retry
+        </Button>
+      }
+    >
+      Could not fetch the data
+    </Alert>
+  );
+}
+
+function ServerSideLazyLoadingErrorHandling() {
+  const apiRef = useGridApiRef();
+  const [retryParams, setRetryParams] = React.useState<GridGetRowsParams | null>(
+    null,
+  );
+  const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);
+
+  const { fetchRows, ...props } = useMockServer(
+    { rowLength: 100 },
+    { useCursorPagination: false, minDelay: 300, maxDelay: 800 },
+    shouldRequestsFail,
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          firstRowToRender: `${params.start}`,
+          lastRowToRender: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={shouldRequestsFail}
+            onChange={(event) => setShouldRequestsFail(event.target.checked)}
+          />
+        }
+        label="Make the requests fail"
+      />
+      <div style={{ height: 400, position: 'relative' }}>
+        {retryParams && (
+          <ErrorAlert
+            onClick={() => {
+              apiRef.current.unstable_dataSource.fetchRows(
+                GRID_ROOT_GROUP_ID,
+                retryParams,
+              );
+              setRetryParams(null);
+            }}
+          />
+        )}
+        <DataGridPro
+          {...props}
+          apiRef={apiRef}
+          unstable_dataSource={dataSource}
+          unstable_onDataSourceError={(_, params) => setRetryParams(params)}
+          unstable_dataSourceCache={null}
+          lazyLoading
+          paginationModel={{ page: 0, pageSize: 10 }}
+          slots={{ toolbar: GridToolbar }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ServerSideLazyLoadingErrorHandling;

docs/data/data-grid/server-side-data/ServerSideLazyLoadingInfinite.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+function ServerSideLazyLoadingInfinite() {
+  const { fetchRows, ...props } = useMockServer(
+    { rowLength: 100 },
+    { useCursorPagination: false, minDelay: 200, maxDelay: 500 },
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      getRows: async (params) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          firstRowToRender: `${params.start}`,
+          lastRowToRender: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+
+        return {
+          rows: getRowsResponse.rows,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        {...props}
+        unstable_dataSource={dataSource}
+        lazyLoading
+        paginationModel={{ page: 0, pageSize: 15 }}
+      />
+    </div>
+  );
+}
+
+export default ServerSideLazyLoadingInfinite;

docs/data/data-grid/server-side-data/ServerSideLazyLoadingInfinite.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridDataSource,
+  GridGetRowsParams,
+} from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+function ServerSideLazyLoadingInfinite() {
+  const { fetchRows, ...props } = useMockServer(
+    { rowLength: 100 },
+    { useCursorPagination: false, minDelay: 200, maxDelay: 500 },
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      getRows: async (params: GridGetRowsParams) => {
+        const urlParams = new URLSearchParams({
+          filterModel: JSON.stringify(params.filterModel),
+          sortModel: JSON.stringify(params.sortModel),
+          firstRowToRender: `${params.start}`,
+          lastRowToRender: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+
+        return {
+          rows: getRowsResponse.rows,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        {...props}
+        unstable_dataSource={dataSource}
+        lazyLoading
+        paginationModel={{ page: 0, pageSize: 15 }}
+      />
+    </div>
+  );
+}
+
+export default ServerSideLazyLoadingInfinite;