Skip to content

Commit 5db38b1

Browse files
MBilalShafithomasmoon
MBilalShafi
authored and
thomasmoon
committed
[DataGridPro] Server-side tree data support (mui#12317)
1 parent 9d718f8 commit 5db38b1

File tree

87 files changed

+4031
-1176
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+4031
-1176
lines changed

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from 'react';
2+
import { DataGridPro } from '@mui/x-data-grid-pro';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
function ServerSideDataGrid() {
6+
const { columns, initialState, fetchRows } = useMockServer(
7+
{},
8+
{ useCursorPagination: false },
9+
);
10+
11+
const dataSource = React.useMemo(
12+
() => ({
13+
getRows: async (params) => {
14+
const urlParams = new URLSearchParams({
15+
paginationModel: encodeURIComponent(
16+
JSON.stringify(params.paginationModel),
17+
),
18+
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
19+
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
20+
});
21+
const getRowsResponse = await fetchRows(
22+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
23+
);
24+
return {
25+
rows: getRowsResponse.rows,
26+
rowCount: getRowsResponse.rowCount,
27+
};
28+
},
29+
}),
30+
[fetchRows],
31+
);
32+
33+
const initialStateWithPagination = React.useMemo(
34+
() => ({
35+
...initialState,
36+
pagination: {
37+
paginationModel: { pageSize: 10, page: 0 },
38+
rowCount: 0,
39+
},
40+
}),
41+
[initialState],
42+
);
43+
44+
return (
45+
<div style={{ width: '100%', height: 400 }}>
46+
<DataGridPro
47+
columns={columns}
48+
unstable_dataSource={dataSource}
49+
pagination
50+
initialState={initialStateWithPagination}
51+
pageSizeOptions={[10, 20, 50]}
52+
/>
53+
</div>
54+
);
55+
}
56+
57+
export default ServerSideDataGrid;

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from 'react';
2+
import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
function ServerSideDataGrid() {
6+
const { columns, initialState, fetchRows } = useMockServer(
7+
{},
8+
{ useCursorPagination: false },
9+
);
10+
11+
const dataSource: GridDataSource = React.useMemo(
12+
() => ({
13+
getRows: async (params) => {
14+
const urlParams = new URLSearchParams({
15+
paginationModel: encodeURIComponent(
16+
JSON.stringify(params.paginationModel),
17+
),
18+
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
19+
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
20+
});
21+
const getRowsResponse = await fetchRows(
22+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
23+
);
24+
return {
25+
rows: getRowsResponse.rows,
26+
rowCount: getRowsResponse.rowCount,
27+
};
28+
},
29+
}),
30+
[fetchRows],
31+
);
32+
33+
const initialStateWithPagination = React.useMemo(
34+
() => ({
35+
...initialState,
36+
pagination: {
37+
paginationModel: { pageSize: 10, page: 0 },
38+
rowCount: 0,
39+
},
40+
}),
41+
[initialState],
42+
);
43+
44+
return (
45+
<div style={{ width: '100%', height: 400 }}>
46+
<DataGridPro
47+
columns={columns}
48+
unstable_dataSource={dataSource}
49+
pagination
50+
initialState={initialStateWithPagination}
51+
pageSizeOptions={[10, 20, 50]}
52+
/>
53+
</div>
54+
);
55+
}
56+
57+
export default ServerSideDataGrid;

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from 'react';
2+
import { DataGridPro } from '@mui/x-data-grid-pro';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const pageSizeOptions = [5, 10, 50];
6+
7+
const serverOptions = { useCursorPagination: false };
8+
const dataSetOptions = {};
9+
10+
export default function ServerSideDataGridNoCache() {
11+
const { fetchRows, columns, initialState } = useMockServer(
12+
dataSetOptions,
13+
serverOptions,
14+
);
15+
16+
const dataSource = React.useMemo(
17+
() => ({
18+
getRows: async (params) => {
19+
const urlParams = new URLSearchParams({
20+
paginationModel: encodeURIComponent(
21+
JSON.stringify(params.paginationModel),
22+
),
23+
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
24+
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
25+
});
26+
const getRowsResponse = await fetchRows(
27+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
28+
);
29+
return {
30+
rows: getRowsResponse.rows,
31+
rowCount: getRowsResponse.rowCount,
32+
};
33+
},
34+
}),
35+
[fetchRows],
36+
);
37+
38+
const initialStateWithPagination = React.useMemo(
39+
() => ({
40+
...initialState,
41+
pagination: {
42+
paginationModel: { pageSize: 10, page: 0 },
43+
},
44+
}),
45+
[initialState],
46+
);
47+
48+
return (
49+
<div style={{ height: 400, width: '100%' }}>
50+
<DataGridPro
51+
initialState={initialStateWithPagination}
52+
columns={columns}
53+
unstable_dataSource={dataSource}
54+
unstable_dataSourceCache={null}
55+
pagination
56+
pageSizeOptions={pageSizeOptions}
57+
/>
58+
</div>
59+
);
60+
}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from 'react';
2+
import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const pageSizeOptions = [5, 10, 50];
6+
7+
const serverOptions = { useCursorPagination: false };
8+
const dataSetOptions = {};
9+
10+
export default function ServerSideDataGridNoCache() {
11+
const { fetchRows, columns, initialState } = useMockServer(
12+
dataSetOptions,
13+
serverOptions,
14+
);
15+
16+
const dataSource: GridDataSource = React.useMemo(
17+
() => ({
18+
getRows: async (params) => {
19+
const urlParams = new URLSearchParams({
20+
paginationModel: encodeURIComponent(
21+
JSON.stringify(params.paginationModel),
22+
),
23+
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
24+
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
25+
});
26+
const getRowsResponse = await fetchRows(
27+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
28+
);
29+
return {
30+
rows: getRowsResponse.rows,
31+
rowCount: getRowsResponse.rowCount,
32+
};
33+
},
34+
}),
35+
[fetchRows],
36+
);
37+
38+
const initialStateWithPagination = React.useMemo(
39+
() => ({
40+
...initialState,
41+
pagination: {
42+
paginationModel: { pageSize: 10, page: 0 },
43+
},
44+
}),
45+
[initialState],
46+
);
47+
48+
return (
49+
<div style={{ height: 400, width: '100%' }}>
50+
<DataGridPro
51+
initialState={initialStateWithPagination}
52+
columns={columns}
53+
unstable_dataSource={dataSource}
54+
unstable_dataSourceCache={null}
55+
pagination
56+
pageSizeOptions={pageSizeOptions}
57+
/>
58+
</div>
59+
);
60+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<DataGridPro
2+
initialState={initialStateWithPagination}
3+
columns={columns}
4+
unstable_dataSource={dataSource}
5+
unstable_dataSourceCache={null}
6+
pagination
7+
pageSizeOptions={pageSizeOptions}
8+
/>

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from 'react';
2+
import { DataGridPro, GridDataSourceCacheDefault } from '@mui/x-data-grid-pro';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
6+
7+
function ServerSideDataGridTTL() {
8+
const { columns, initialState, fetchRows } = useMockServer(
9+
{},
10+
{ useCursorPagination: false },
11+
);
12+
13+
const dataSource = React.useMemo(
14+
() => ({
15+
getRows: async (params) => {
16+
const urlParams = new URLSearchParams({
17+
paginationModel: encodeURIComponent(
18+
JSON.stringify(params.paginationModel),
19+
),
20+
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
21+
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
22+
});
23+
const getRowsResponse = await fetchRows(
24+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
25+
);
26+
return {
27+
rows: getRowsResponse.rows,
28+
rowCount: getRowsResponse.rowCount,
29+
};
30+
},
31+
}),
32+
[fetchRows],
33+
);
34+
35+
const initialStateWithPagination = React.useMemo(
36+
() => ({
37+
...initialState,
38+
pagination: {
39+
paginationModel: { pageSize: 10, page: 0 },
40+
rowCount: 0,
41+
},
42+
}),
43+
[initialState],
44+
);
45+
46+
return (
47+
<div style={{ width: '100%', height: 400 }}>
48+
<DataGridPro
49+
columns={columns}
50+
unstable_dataSource={dataSource}
51+
unstable_dataSourceCache={lowTTLCache}
52+
pagination
53+
initialState={initialStateWithPagination}
54+
pageSizeOptions={[10, 20, 50]}
55+
/>
56+
</div>
57+
);
58+
}
59+
60+
export default ServerSideDataGridTTL;

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from 'react';
2+
import {
3+
DataGridPro,
4+
GridDataSource,
5+
GridDataSourceCacheDefault,
6+
} from '@mui/x-data-grid-pro';
7+
import { useMockServer } from '@mui/x-data-grid-generator';
8+
9+
const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds
10+
11+
function ServerSideDataGridTTL() {
12+
const { columns, initialState, fetchRows } = useMockServer(
13+
{},
14+
{ useCursorPagination: false },
15+
);
16+
17+
const dataSource: GridDataSource = React.useMemo(
18+
() => ({
19+
getRows: async (params) => {
20+
const urlParams = new URLSearchParams({
21+
paginationModel: encodeURIComponent(
22+
JSON.stringify(params.paginationModel),
23+
),
24+
filterModel: encodeURIComponent(JSON.stringify(params.filterModel)),
25+
sortModel: encodeURIComponent(JSON.stringify(params.sortModel)),
26+
});
27+
const getRowsResponse = await fetchRows(
28+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
29+
);
30+
return {
31+
rows: getRowsResponse.rows,
32+
rowCount: getRowsResponse.rowCount,
33+
};
34+
},
35+
}),
36+
[fetchRows],
37+
);
38+
39+
const initialStateWithPagination = React.useMemo(
40+
() => ({
41+
...initialState,
42+
pagination: {
43+
paginationModel: { pageSize: 10, page: 0 },
44+
rowCount: 0,
45+
},
46+
}),
47+
[initialState],
48+
);
49+
50+
return (
51+
<div style={{ width: '100%', height: 400 }}>
52+
<DataGridPro
53+
columns={columns}
54+
unstable_dataSource={dataSource}
55+
unstable_dataSourceCache={lowTTLCache}
56+
pagination
57+
initialState={initialStateWithPagination}
58+
pageSizeOptions={[10, 20, 50]}
59+
/>
60+
</div>
61+
);
62+
}
63+
64+
export default ServerSideDataGridTTL;

0 commit comments

Comments
 (0)