Try msw as a network interceptor

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

@@ -1,28 +1,82 @@
 import * as React from 'react';
 import { DataGridPro } from '@mui/x-data-grid-pro';
+import CircularProgress from '@mui/material/CircularProgress';
+import { lighten, darken, alpha, styled } from '@mui/material/styles';
 import { useDemoDataSource } from '@mui/x-data-grid-generator';
 
-function ServerSideDataGrid() {
- const { getRows, columns, initialState } = useDemoDataSource(
- {},
- { useCursorPagination: false },
+function getBorderColor(theme) {
+ if (theme.palette.mode === 'light') {
+ return lighten(alpha(theme.palette.divider, 1), 0.88);
+ }
+ return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+
+function getBorderRadius(theme) {
+ const radius = theme.shape.borderRadius;
+ return typeof radius === 'number' ? `${radius}px` : radius;
+}
+
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
+const dataSource = {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: encodeURIComponent(JSON.stringify(params.paginationModel)),
+ filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
+ sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
+ groupKeys: encodeURIComponent(JSON.stringify(params.groupKeys)),
+ });
+ const serverResponse = await fetch(
+ `https://mui.com/x/api/x-grid?${urlParams.toString()}`,
+ );
+ const getRowsResponse = await serverResponse.json();
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+};
+
+const Div = styled('div')(({ theme }) => ({
+ height: 400,
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ border: `1px solid ${getBorderColor(theme)}`,
+ borderRadius: getBorderRadius(theme),
+}));
+
+function LoadingSlate() {
+ return (
+ <Div>
+ <CircularProgress />
+ </Div>
  );
+}
+
+function ServerSideDataGrid() {
+ const {
+ loading: serverConfiguring,
+ columns,
+ initialState,
+ } = useDemoDataSource(dataSetOptions, serverOptions);
 
  const initialStateWithPagination = React.useMemo(
  () => ({
  ...initialState,
  pagination: {
  paginationModel: { pageSize: 10, page: 0 },
+ rowCount: 0,
  },
  }),
  [initialState],
  );
 
- const dataSource = React.useMemo(() => {
- return {
- getRows,
- };
- }, [getRows]);
+ if (serverConfiguring) {
+ return <LoadingSlate />;
+ }
 
  return (
  <div style={{ height: 400, width: '100%' }}>

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

@@ -1,28 +1,86 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import {
+ DataGridPro,
+ GridDataSource,
+ GridGetRowsResponse,
+} from '@mui/x-data-grid-pro';
+import CircularProgress from '@mui/material/CircularProgress';
+import { lighten, darken, alpha, styled, Theme } from '@mui/material/styles';
 import { useDemoDataSource } from '@mui/x-data-grid-generator';
 
-function ServerSideDataGrid() {
- const { getRows, columns, initialState } = useDemoDataSource(
- {},
- { useCursorPagination: false },
+function getBorderColor(theme: Theme) {
+ if (theme.palette.mode === 'light') {
+ return lighten(alpha(theme.palette.divider, 1), 0.88);
+ }
+ return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+
+function getBorderRadius(theme: Theme) {
+ const radius = theme.shape.borderRadius;
+ return typeof radius === 'number' ? `${radius}px` : radius;
+}
+
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
+const dataSource: GridDataSource = {
+ getRows: async (params) => {
+ const urlParams = new URLSearchParams({
+ paginationModel: encodeURIComponent(JSON.stringify(params.paginationModel)),
+ filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
+ sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
+ groupKeys: encodeURIComponent(JSON.stringify(params.groupKeys)),
+ });
+ const serverResponse = await fetch(
+ `https://mui.com/x/api/x-grid?${urlParams.toString()}`,
+ );
+ const getRowsResponse = (await serverResponse.json()) as GridGetRowsResponse;
+ return {
+ rows: getRowsResponse.rows,
+ rowCount: getRowsResponse.rowCount,
+ };
+ },
+};
+
+const Div = styled('div')(({ theme }) => ({
+ height: 400,
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ border: `1px solid ${getBorderColor(theme)}`,
+ borderRadius: getBorderRadius(theme),
+}));
+
+function LoadingSlate() {
+ return (
+ <Div>
+ <CircularProgress />
+ </Div>
  );
+}
+
+function ServerSideDataGrid() {
+ const {
+ loading: serverConfiguring,
+ columns,
+ initialState,
+ } = useDemoDataSource(dataSetOptions, serverOptions);
 
  const initialStateWithPagination = React.useMemo(
  () => ({
  ...initialState,
  pagination: {
  paginationModel: { pageSize: 10, page: 0 },
+ rowCount: 0,
  },
  }),
  [initialState],
  );
 
- const dataSource = React.useMemo(() => {
- return {
- getRows,
- };
- }, [getRows]);
+ if (serverConfiguring) {
+ return <LoadingSlate />;
+ }
 
  return (
  <div style={{ height: 400, width: '100%' }}>

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

@@ -4,10 +4,13 @@ import { useDemoDataSource } from '@mui/x-data-grid-generator';
 
 const pageSizeOptions = [5, 10, 50];
 
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
 export default function ServerSideDataGridNoCache() {
  const { getRows, columns, initialState } = useDemoDataSource(
- {},
- { useCursorPagination: false },
+ dataSetOptions,
+ serverOptions,
  );
 
  const dataSource = React.useMemo(() => {

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

@@ -4,10 +4,13 @@ import { useDemoDataSource } from '@mui/x-data-grid-generator';
 
 const pageSizeOptions = [5, 10, 50];
 
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
 export default function ServerSideDataGridNoCache() {
  const { getRows, columns, initialState } = useDemoDataSource(
- {},
- { useCursorPagination: false },
+ dataSetOptions,
+ serverOptions,
  );
 
  const dataSource = React.useMemo(() => {

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

@@ -3,10 +3,13 @@ import { DataGridPro } from '@mui/x-data-grid-pro';
 import { useDemoDataSource } from '@mui/x-data-grid-generator';
 import { useSWRConfig } from 'swr';
 
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
 function ServerSideDataGridWithSWR() {
  const { getRows, columns, initialState } = useDemoDataSource(
- {},
- { useCursorPagination: false },
+ dataSetOptions,
+ serverOptions,
  );
  const { cache: swrCache } = useSWRConfig();
 

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

@@ -7,10 +7,13 @@ import {
 import { useDemoDataSource } from '@mui/x-data-grid-generator';
 import { useSWRConfig } from 'swr';
 
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
 function ServerSideDataGridWithSWR() {
  const { getRows, columns, initialState } = useDemoDataSource(
- {},
- { useCursorPagination: false },
+ dataSetOptions,
+ serverOptions,
  );
  const { cache: swrCache } = useSWRConfig();
 

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

@@ -8,6 +8,7 @@ import { useDemoDataSource } from '@mui/x-data-grid-generator';
 
 const pageSizeOptions = [5, 10, 50];
 const serverOptions = { useCursorPagination: false };
+const datasetOptions = {};
 
 function getBorderColor(theme) {
  if (theme.palette.mode === 'light') {
@@ -44,7 +45,7 @@ export default function ServerSideErrorHandling() {
  const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);
 
  const { getRows, ...props } = useDemoDataSource(
- {},
+ datasetOptions,
  serverOptions,
  shouldRequestsFail,
  );

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

@@ -13,6 +13,7 @@ import { useDemoDataSource } from '@mui/x-data-grid-generator';
 
 const pageSizeOptions = [5, 10, 50];
 const serverOptions = { useCursorPagination: false };
+const datasetOptions = {};
 
 function getBorderColor(theme: Theme) {
  if (theme.palette.mode === 'light') {
@@ -49,7 +50,7 @@ export default function ServerSideErrorHandling() {
  const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);
 
  const { getRows, ...props } = useDemoDataSource(
- {},
+ datasetOptions,
  serverOptions,
  shouldRequestsFail,
  );

docs/data/data-grid/server-side-data/index.md

@@ -120,22 +120,32 @@ const customDataSource: GridDataSource = {
 
 The code has been significantly reduced, the need for managing the controlled states is removed, and data fetching logic is centralized.
 
-The following demo uses a public testing API `dummyjson.com` to fetch products data with server side pagination.
-
-{{"demo": "ServerSideDataGridDummyJson.js", "bg": "inline"}}
-
 :::info
 
-For the following examples, a utility `useDemoDataSource` is used to simulate the server-side data fetching based on the package `@mui/x-data-grid-generator`. It returns a function `getRows` apart from other props that could be used to create a custom data source.
+For the following examples, a utility `useDemoDataSource` is used to simulate the server-side data fetching based on the package `@mui/x-data-grid-generator`. It creates a dummy server based on the mock service worker. You can replace this with your actual server-side data fetching logic.
 
 ```tsx
-const { getRows, columns, initialState } = useDemoDataSource(
+const { loading, columns, initialState } = useDemoDataSource(
  dataSetOptions,
  serverOptions,
 );
 
 const customDataSource: GridDataSource = {
- getRows,
+ getRows: async (params: GridGetRowsParams): GetRowsResponse => {
+ const requestParams = new URLSearchParams({
+ page: params.page.toString(),
+ pageSize: params.pageSize.toString(),
+ sortModel: JSON.stringify(params.sortModel),
+ filterModel: JSON.stringify(params.filterModel),
+ });
+ const response = await fetch(`https://api-url?${requestParams.toString()}`);
+ const data = await response.json();
+
+ return {
+ rows: data.rows,
+ rowCount: data.totalCount,
+ };
+ },
 };
 
 <DataGridPro columns={columns} pagination unstable_dataSource={customDataSource} />;

docs/package.json

@@ -116,5 +116,10 @@
  "@types/webpack-bundle-analyzer": "^4.7.0",
  "gm": "^1.25.0",
  "serve": "^14.2.3"
+ },
+ "msw": {
+ "workerDirectory": [
+ "public"
+ ]
  }
 }