[DataGridPro] Server side data source lazy loading (#13878)

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>

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/ServerSideDataGridNoCache.js

@@ -38,6 +38,7 @@ export default function ServerSideDataGridNoCache() {
       ...initialState,
       pagination: {
         paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
       },
     }),
     [initialState],

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

@@ -38,6 +38,7 @@ export default function ServerSideDataGridNoCache() {
       ...initialState,
       pagination: {
         paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
       },
     }),
     [initialState],

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

@@ -0,0 +1,109 @@
+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';
+import Snackbar from '@mui/material/Snackbar';
+
+function ErrorSnackbar(props) {
+  const { onRetry, ...rest } = props;
+  return (
+    <Snackbar {...rest}>
+      <Alert
+        severity="error"
+        variant="filled"
+        sx={{ width: '100%' }}
+        action={
+          <Button color="inherit" size="small" onClick={onRetry}>
+            Retry
+          </Button>
+        }
+      >
+        Failed to fetch row data
+      </Alert>
+    </Snackbar>
+  );
+}
+
+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),
+          start: `${params.start}`,
+          end: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+
+        // Reset the retryParams when new rows are fetched
+        setRetryParams(null);
+        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 && (
+          <ErrorSnackbar
+            open={!!retryParams}
+            onRetry={() => {
+              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}
+          unstable_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,113 @@
+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';
+import Snackbar, { SnackbarProps } from '@mui/material/Snackbar';
+
+function ErrorSnackbar(props: SnackbarProps & { onRetry: () => void }) {
+  const { onRetry, ...rest } = props;
+  return (
+    <Snackbar {...rest}>
+      <Alert
+        severity="error"
+        variant="filled"
+        sx={{ width: '100%' }}
+        action={
+          <Button color="inherit" size="small" onClick={onRetry}>
+            Retry
+          </Button>
+        }
+      >
+        Failed to fetch row data
+      </Alert>
+    </Snackbar>
+  );
+}
+
+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),
+          start: `${params.start}`,
+          end: `${params.end}`,
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+
+        // Reset the retryParams when new rows are fetched
+        setRetryParams(null);
+        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 && (
+          <ErrorSnackbar
+            open={!!retryParams}
+            onRetry={() => {
+              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}
+          unstable_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),
+          start: `${params.start}`,
+          end: `${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}
+        unstable_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),
+          start: `${params.start}`,
+          end: `${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}
+        unstable_lazyLoading
+        paginationModel={{ page: 0, pageSize: 15 }}
+      />
+    </div>
+  );
+}
+
+export default ServerSideLazyLoadingInfinite;