[DataGridPro] Server-side tree data support (#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;