[DataGridPro] Server-side tree data support (mui#12317)

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+function ServerSideDataGrid() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      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)),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+      />
+    </div>
+  );
+}
+
+export default ServerSideDataGrid;

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+function ServerSideDataGrid() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      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)),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+      />
+    </div>
+  );
+}
+
+export default ServerSideDataGrid;

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const pageSizeOptions = [5, 10, 50];
+
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
+export default function ServerSideDataGridNoCache() {
+  const { fetchRows, columns, initialState } = useMockServer(
+    dataSetOptions,
+    serverOptions,
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      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)),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        initialState={initialStateWithPagination}
+        columns={columns}
+        unstable_dataSource={dataSource}
+        unstable_dataSourceCache={null}
+        pagination
+        pageSizeOptions={pageSizeOptions}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const pageSizeOptions = [5, 10, 50];
+
+const serverOptions = { useCursorPagination: false };
+const dataSetOptions = {};
+
+export default function ServerSideDataGridNoCache() {
+  const { fetchRows, columns, initialState } = useMockServer(
+    dataSetOptions,
+    serverOptions,
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      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)),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        initialState={initialStateWithPagination}
+        columns={columns}
+        unstable_dataSource={dataSource}
+        unstable_dataSourceCache={null}
+        pagination
+        pageSizeOptions={pageSizeOptions}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+<DataGridPro
+  initialState={initialStateWithPagination}
+  columns={columns}
+  unstable_dataSource={dataSource}
+  unstable_dataSourceCache={null}
+  pagination
+  pageSizeOptions={pageSizeOptions}
+/>

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { DataGridPro, GridDataSourceCacheDefault } from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
+
+function ServerSideDataGridTTL() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource = React.useMemo(
+    () => ({
+      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)),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        columns={columns}
+        unstable_dataSource={dataSource}
+        unstable_dataSourceCache={lowTTLCache}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+      />
+    </div>
+  );
+}
+
+export default ServerSideDataGridTTL;

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridDataSource,
+  GridDataSourceCacheDefault,
+} from '@mui/x-data-grid-pro';
+import { useMockServer } from '@mui/x-data-grid-generator';
+
+const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
+
+function ServerSideDataGridTTL() {
+  const { columns, initialState, fetchRows } = useMockServer(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const dataSource: GridDataSource = React.useMemo(
+    () => ({
+      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)),
+        });
+        const getRowsResponse = await fetchRows(
+          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
+        );
+        return {
+          rows: getRowsResponse.rows,
+          rowCount: getRowsResponse.rowCount,
+        };
+      },
+    }),
+    [fetchRows],
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+        rowCount: 0,
+      },
+    }),
+    [initialState],
+  );
+
+  return (
+    <div style={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        columns={columns}
+        unstable_dataSource={dataSource}
+        unstable_dataSourceCache={lowTTLCache}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+      />
+    </div>
+  );
+}
+
+export default ServerSideDataGridTTL;