Skip to content

Commit 04c75a5

Browse files
MBilalShafiMBilalShafi
authored
[DataGrid] Make base data source available in the Community plan (#16359)
1 parent 3f8343a commit 04c75a5

File tree

83 files changed

+1267
-966
lines changed

Some content is hidden

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

83 files changed

+1267
-966
lines changed

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { DataGridPro } from '@mui/x-data-grid-pro';
2+
import { DataGrid } from '@mui/x-data-grid';
33
import { useMockServer } from '@mui/x-data-grid-generator';
44

55
export default function ServerSideDataGrid() {
@@ -28,24 +28,16 @@ export default function ServerSideDataGrid() {
2828
[fetchRows],
2929
);
3030

31-
const initialStateWithPagination = React.useMemo(
32-
() => ({
33-
...initialState,
34-
pagination: {
35-
paginationModel: { pageSize: 10, page: 0 },
36-
rowCount: 0,
37-
},
38-
}),
39-
[initialState],
40-
);
41-
4231
return (
4332
<div style={{ width: '100%', height: 400 }}>
44-
<DataGridPro
33+
<DataGrid
4534
columns={columns}
4635
unstable_dataSource={dataSource}
4736
pagination
48-
initialState={initialStateWithPagination}
37+
initialState={{
38+
...initialState,
39+
pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
40+
}}
4941
pageSizeOptions={[10, 20, 50]}
5042
/>
5143
</div>

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { DataGridPro, GridDataSource } from '@mui/x-data-grid-pro';
2+
import { DataGrid, GridDataSource } from '@mui/x-data-grid';
33
import { useMockServer } from '@mui/x-data-grid-generator';
44

55
export default function ServerSideDataGrid() {
@@ -28,24 +28,16 @@ export default function ServerSideDataGrid() {
2828
[fetchRows],
2929
);
3030

31-
const initialStateWithPagination = React.useMemo(
32-
() => ({
33-
...initialState,
34-
pagination: {
35-
paginationModel: { pageSize: 10, page: 0 },
36-
rowCount: 0,
37-
},
38-
}),
39-
[initialState],
40-
);
41-
4231
return (
4332
<div style={{ width: '100%', height: 400 }}>
44-
<DataGridPro
33+
<DataGrid
4534
columns={columns}
4635
unstable_dataSource={dataSource}
4736
pagination
48-
initialState={initialStateWithPagination}
37+
initialState={{
38+
...initialState,
39+
pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
40+
}}
4941
pageSizeOptions={[10, 20, 50]}
5042
/>
5143
</div>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
<DataGridPro
1+
<DataGrid
22
columns={columns}
33
unstable_dataSource={dataSource}
44
pagination
5-
initialState={initialStateWithPagination}
5+
initialState={{
6+
...initialState,
7+
pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
8+
}}
69
pageSizeOptions={[10, 20, 50]}
710
/>

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import * as React from 'react';
2-
import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
2+
import {
3+
DataGridPremium,
4+
GridDataSource,
5+
GridGetRowsResponse,
6+
} from '@mui/x-data-grid-premium';
37
import { useMockServer } from '@mui/x-data-grid-generator';
48

59
const aggregationFunctions = {
@@ -11,7 +15,7 @@ const aggregationFunctions = {
1115
};
1216

1317
export default function ServerSideDataGridAggregation() {
14-
const { columns, initialState, fetchRows } = useMockServer(
18+
const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>(
1519
{},
1620
{ useCursorPagination: false },
1721
);

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

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,10 @@ const aggregationFunctions = {
1111
};
1212

1313
export default function ServerSideDataGridAggregationLazyLoading() {
14-
const {
15-
columns,
16-
initialState: initState,
17-
fetchRows,
18-
} = useMockServer({}, { useCursorPagination: false });
14+
const { columns, initialState, fetchRows } = useMockServer(
15+
{},
16+
{ useCursorPagination: false },
17+
);
1918

2019
const dataSource = React.useMemo(
2120
() => ({
@@ -43,26 +42,18 @@ export default function ServerSideDataGridAggregationLazyLoading() {
4342
[fetchRows],
4443
);
4544

46-
const initialState = React.useMemo(
47-
() => ({
48-
...initState,
49-
pagination: {
50-
paginationModel: { pageSize: 10, page: 0 },
51-
rowCount: 0,
52-
},
53-
aggregation: {
54-
model: { commodity: 'size', quantity: 'sum' },
55-
},
56-
}),
57-
[initState],
58-
);
59-
6045
return (
6146
<div style={{ width: '100%', height: 400 }}>
6247
<DataGridPremium
6348
columns={columns}
6449
unstable_dataSource={dataSource}
65-
initialState={initialState}
50+
initialState={{
51+
...initialState,
52+
pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
53+
aggregation: {
54+
model: { commodity: 'size', quantity: 'sum' },
55+
},
56+
}}
6657
unstable_lazyLoading
6758
aggregationFunctions={aggregationFunctions}
6859
/>

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

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import * as React from 'react';
2-
import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
2+
import {
3+
DataGridPremium,
4+
GridDataSource,
5+
GridGetRowsResponse,
6+
} from '@mui/x-data-grid-premium';
37
import { useMockServer } from '@mui/x-data-grid-generator';
48

59
const aggregationFunctions = {
@@ -11,11 +15,10 @@ const aggregationFunctions = {
1115
};
1216

1317
export default function ServerSideDataGridAggregationLazyLoading() {
14-
const {
15-
columns,
16-
initialState: initState,
17-
fetchRows,
18-
} = useMockServer({}, { useCursorPagination: false });
18+
const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>(
19+
{},
20+
{ useCursorPagination: false },
21+
);
1922

2023
const dataSource: GridDataSource = React.useMemo(
2124
() => ({
@@ -43,26 +46,18 @@ export default function ServerSideDataGridAggregationLazyLoading() {
4346
[fetchRows],
4447
);
4548

46-
const initialState = React.useMemo(
47-
() => ({
48-
...initState,
49-
pagination: {
50-
paginationModel: { pageSize: 10, page: 0 },
51-
rowCount: 0,
52-
},
53-
aggregation: {
54-
model: { commodity: 'size', quantity: 'sum' },
55-
},
56-
}),
57-
[initState],
58-
);
59-
6049
return (
6150
<div style={{ width: '100%', height: 400 }}>
6251
<DataGridPremium
6352
columns={columns}
6453
unstable_dataSource={dataSource}
65-
initialState={initialState}
54+
initialState={{
55+
...initialState,
56+
pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
57+
aggregation: {
58+
model: { commodity: 'size', quantity: 'sum' },
59+
},
60+
}}
6661
unstable_lazyLoading
6762
aggregationFunctions={aggregationFunctions}
6863
/>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<DataGridPremium
22
columns={columns}
33
unstable_dataSource={dataSource}
4-
initialState={initialState}
4+
initialState={{
5+
...initialState,
6+
pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
7+
aggregation: {
8+
model: { commodity: 'size', quantity: 'sum' },
9+
},
10+
}}
511
unstable_lazyLoading
612
aggregationFunctions={aggregationFunctions}
713
/>

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

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,9 @@ const aggregationFunctions = {
1616

1717
export default function ServerSideDataGridAggregationRowGrouping() {
1818
const apiRef = useGridApiRef();
19-
const {
20-
columns,
21-
initialState: initState,
22-
fetchRows,
23-
} = useMockServer({ rowGrouping: true });
19+
const { columns, initialState, fetchRows } = useMockServer({
20+
rowGrouping: true,
21+
});
2422

2523
const dataSource = React.useMemo(
2624
() => ({
@@ -49,16 +47,16 @@ export default function ServerSideDataGridAggregationRowGrouping() {
4947
[fetchRows],
5048
);
5149

52-
const initialState = useKeepGroupedColumnsHidden({
50+
const initialStateUpdated = useKeepGroupedColumnsHidden({
5351
apiRef,
5452
initialState: {
55-
...initState,
56-
rowGrouping: {
57-
model: ['company', 'director'],
58-
},
53+
...initialState,
5954
aggregation: {
6055
model: { title: 'size', gross: 'sum', year: 'max' },
6156
},
57+
rowGrouping: {
58+
model: ['company', 'director'],
59+
},
6260
},
6361
});
6462

@@ -68,7 +66,7 @@ export default function ServerSideDataGridAggregationRowGrouping() {
6866
apiRef={apiRef}
6967
columns={columns}
7068
unstable_dataSource={dataSource}
71-
initialState={initialState}
69+
initialState={initialStateUpdated}
7270
aggregationFunctions={aggregationFunctions}
7371
/>
7472
</div>

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
useKeepGroupedColumnsHidden,
55
useGridApiRef,
66
GridDataSource,
7+
GridGetRowsResponse,
78
} from '@mui/x-data-grid-premium';
89
import { useMockServer } from '@mui/x-data-grid-generator';
910

@@ -17,11 +18,9 @@ const aggregationFunctions = {
1718

1819
export default function ServerSideDataGridAggregationRowGrouping() {
1920
const apiRef = useGridApiRef();
20-
const {
21-
columns,
22-
initialState: initState,
23-
fetchRows,
24-
} = useMockServer({ rowGrouping: true });
21+
const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>({
22+
rowGrouping: true,
23+
});
2524

2625
const dataSource: GridDataSource = React.useMemo(
2726
() => ({
@@ -50,16 +49,16 @@ export default function ServerSideDataGridAggregationRowGrouping() {
5049
[fetchRows],
5150
);
5251

53-
const initialState = useKeepGroupedColumnsHidden({
52+
const initialStateUpdated = useKeepGroupedColumnsHidden({
5453
apiRef,
5554
initialState: {
56-
...initState,
57-
rowGrouping: {
58-
model: ['company', 'director'],
59-
},
55+
...initialState,
6056
aggregation: {
6157
model: { title: 'size', gross: 'sum', year: 'max' },
6258
},
59+
rowGrouping: {
60+
model: ['company', 'director'],
61+
},
6362
},
6463
});
6564

@@ -69,7 +68,7 @@ export default function ServerSideDataGridAggregationRowGrouping() {
6968
apiRef={apiRef}
7069
columns={columns}
7170
unstable_dataSource={dataSource}
72-
initialState={initialState}
71+
initialState={initialStateUpdated}
7372
aggregationFunctions={aggregationFunctions}
7473
/>
7574
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
apiRef={apiRef}
33
columns={columns}
44
unstable_dataSource={dataSource}
5-
initialState={initialState}
5+
initialState={initialStateUpdated}
66
aggregationFunctions={aggregationFunctions}
77
/>

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

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,7 @@ const aggregationFunctions = {
1818

1919
export default function ServerSideDataGridAggregationTreeData() {
2020
const apiRef = useGridApiRef();
21-
const {
22-
fetchRows,
23-
columns,
24-
initialState: initState,
25-
} = useMockServer(dataSetOptions);
26-
27-
const initialState = React.useMemo(
28-
() => ({
29-
...initState,
30-
aggregation: {
31-
model: { rating: 'avg', website: 'size' },
32-
},
33-
}),
34-
[initState],
35-
);
21+
const { fetchRows, columns, initialState } = useMockServer(dataSetOptions);
3622

3723
const dataSource = React.useMemo(
3824
() => ({
@@ -67,7 +53,12 @@ export default function ServerSideDataGridAggregationTreeData() {
6753
unstable_dataSource={dataSource}
6854
treeData
6955
apiRef={apiRef}
70-
initialState={initialState}
56+
initialState={{
57+
...initialState,
58+
aggregation: {
59+
model: { rating: 'avg', website: 'size' },
60+
},
61+
}}
7162
aggregationFunctions={aggregationFunctions}
7263
/>
7364
</div>

0 commit comments

Comments
 (0)