[DataGridPro] Server-side tree data support

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoDataSource } from '@mui/x-data-grid-generator';
+
+function ServerSideDataGrid() {
+  const { getRows, columns, initialState } = useDemoDataSource(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+      },
+    }),
+    [initialState],
+  );
+
+  const dataSource = React.useMemo(() => {
+    return {
+      getRows,
+    };
+  }, [getRows]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <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,40 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoDataSource } from '@mui/x-data-grid-generator';
+
+function ServerSideDataGrid() {
+  const { getRows, columns, initialState } = useDemoDataSource(
+    {},
+    { useCursorPagination: false },
+  );
+
+  const initialStateWithPagination = React.useMemo(
+    () => ({
+      ...initialState,
+      pagination: {
+        paginationModel: { pageSize: 10, page: 0 },
+      },
+    }),
+    [initialState],
+  );
+
+  const dataSource = React.useMemo(() => {
+    return {
+      getRows,
+    };
+  }, [getRows]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        columns={columns}
+        unstable_dataSource={dataSource}
+        pagination
+        initialState={initialStateWithPagination}
+        pageSizeOptions={[10, 20, 50]}
+      />
+    </div>
+  );
+}
+
+export default ServerSideDataGrid;

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef, GridToolbar } from '@mui/x-data-grid-pro';
+import Button from '@mui/material/Button';
+import { useDemoDataSource } from '@mui/x-data-grid-generator';
+import { QueryClient } from '@tanstack/query-core';
+
+const cacheInstance = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
+const cache = {
+  set: (key, value) => {
+    cacheInstance.setQueryData(key, value);
+  },
+  get: (key) => {
+    return cacheInstance.getQueryData(key);
+  },
+  clear: () => {
+    cacheInstance.clear();
+  },
+};
+
+const pageSizeOptions = [5, 10, 50];
+
+export default function ServerSideTreeData() {
+  const apiRef = useGridApiRef();
+
+  const { getRows, ...props } = useDemoDataSource({
+    dataSet: 'Employee',
+    rowLength: 1000,
+    treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 5 },
+  });
+
+  const dataSource = React.useMemo(() => {
+    return {
+      getRows,
+    };
+  }, [getRows]);
+
+  const initialState = React.useMemo(
+    () => ({
+      ...props.initialState,
+      pagination: {
+        paginationModel: {
+          pageSize: 5,
+        },
+        rowCount: 0,
+      },
+    }),
+    [props.initialState],
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Button onClick={() => cache.clear()}>Reset cache</Button>
+      <div style={{ height: 400 }}>
+        <DataGridPro
+          {...props}
+          unstable_dataSource={dataSource}
+          unstable_dataSourceCache={cache}
+          treeData
+          apiRef={apiRef}
+          pagination
+          pageSizeOptions={pageSizeOptions}
+          initialState={initialState}
+          slots={{ toolbar: GridToolbar }}
+          slotProps={{ toolbar: { showQuickFilter: true } }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  useGridApiRef,
+  GridInitialState,
+  GridToolbar,
+  GridDataSourceCache,
+} from '@mui/x-data-grid-pro';
+import Button from '@mui/material/Button';
+import { useDemoDataSource } from '@mui/x-data-grid-generator';
+import { QueryClient } from '@tanstack/query-core';
+
+const cacheInstance = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
+const cache: GridDataSourceCache = {
+  set: (key, value) => {
+    cacheInstance.setQueryData(key, value);
+  },
+  get: (key) => {
+    return cacheInstance.getQueryData(key);
+  },
+  clear: () => {
+    cacheInstance.clear();
+  },
+};
+
+const pageSizeOptions = [5, 10, 50];
+
+export default function ServerSideTreeData() {
+  const apiRef = useGridApiRef();
+
+  const { getRows, ...props } = useDemoDataSource({
+    dataSet: 'Employee',
+    rowLength: 1000,
+    treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 5 },
+  });
+
+  const dataSource = React.useMemo(() => {
+    return {
+      getRows,
+    };
+  }, [getRows]);
+
+  const initialState: GridInitialState = React.useMemo(
+    () => ({
+      ...props.initialState,
+      pagination: {
+        paginationModel: {
+          pageSize: 5,
+        },
+        rowCount: 0,
+      },
+    }),
+    [props.initialState],
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Button onClick={() => cache.clear()}>Reset cache</Button>
+      <div style={{ height: 400 }}>
+        <DataGridPro
+          {...props}
+          unstable_dataSource={dataSource}
+          unstable_dataSourceCache={cache}
+          treeData
+          apiRef={apiRef}
+          pagination
+          pageSizeOptions={pageSizeOptions}
+          initialState={initialState}
+          slots={{ toolbar: GridToolbar }}
+          slotProps={{ toolbar: { showQuickFilter: true } }}
+        />
+      </div>
+    </div>
+  );
+}