Skip to content

Commit 296a499

Browse files
MBilalShafiarminmeh
MBilalShafi
and
arminmeh
authored
[DataGridPremium] Server-side aggregation with data source (#15741)
Co-authored-by: Armin Mehinovic <[email protected]>
1 parent 3b0bba2 commit 296a499

File tree

57 files changed

+1579
-123
lines changed

Some content is hidden

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

57 files changed

+1579
-123
lines changed

‎docs/data/data-grid/aggregation/aggregation.md

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ The aggregated values are rendered in a footer row at the bottom of the Data Gri
1212

1313
{{"demo": "AggregationInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
1414

15+
:::info
16+
If you're looking for aggregation on the server side, see [Server-side data—Aggregation](/x/react-data-grid/server-side-data/aggregation/).
17+
:::
18+
1519
## Pass aggregation to the Data Grid
1620

1721
### Structure of the model

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

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import * as React from 'react';
2+
import { DataGridPremium } from '@mui/x-data-grid-premium';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const aggregationFunctions = {
6+
sum: { columnTypes: ['number'] },
7+
avg: { columnTypes: ['number'] },
8+
min: { columnTypes: ['number', 'date', 'dateTime'] },
9+
max: { columnTypes: ['number', 'date', 'dateTime'] },
10+
size: {},
11+
};
12+
13+
export default function ServerSideDataGridAggregation() {
14+
const { columns, initialState, fetchRows } = useMockServer(
15+
{},
16+
{ useCursorPagination: false },
17+
);
18+
19+
const dataSource = React.useMemo(
20+
() => ({
21+
getRows: async (params) => {
22+
const urlParams = new URLSearchParams({
23+
paginationModel: JSON.stringify(params.paginationModel),
24+
filterModel: JSON.stringify(params.filterModel),
25+
sortModel: JSON.stringify(params.sortModel),
26+
aggregationModel: JSON.stringify(params.aggregationModel),
27+
});
28+
const getRowsResponse = await fetchRows(
29+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
30+
);
31+
return {
32+
rows: getRowsResponse.rows,
33+
rowCount: getRowsResponse.rowCount,
34+
aggregateRow: getRowsResponse.aggregateRow,
35+
};
36+
},
37+
getAggregatedValue: (row, field) => {
38+
return row[`${field}Aggregate`];
39+
},
40+
}),
41+
[fetchRows],
42+
);
43+
44+
const initialStateWithPagination = React.useMemo(
45+
() => ({
46+
...initialState,
47+
pagination: {
48+
paginationModel: { pageSize: 10, page: 0 },
49+
rowCount: 0,
50+
},
51+
aggregation: {
52+
model: { commodity: 'size', quantity: 'sum' },
53+
},
54+
}),
55+
[initialState],
56+
);
57+
58+
return (
59+
<div style={{ width: '100%', height: 400 }}>
60+
<DataGridPremium
61+
columns={columns}
62+
unstable_dataSource={dataSource}
63+
pagination
64+
initialState={initialStateWithPagination}
65+
pageSizeOptions={[10, 20, 50]}
66+
aggregationFunctions={aggregationFunctions}
67+
/>
68+
</div>
69+
);
70+
}

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

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import * as React from 'react';
2+
import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const aggregationFunctions = {
6+
sum: { columnTypes: ['number'] },
7+
avg: { columnTypes: ['number'] },
8+
min: { columnTypes: ['number', 'date', 'dateTime'] },
9+
max: { columnTypes: ['number', 'date', 'dateTime'] },
10+
size: {},
11+
};
12+
13+
export default function ServerSideDataGridAggregation() {
14+
const { columns, initialState, fetchRows } = useMockServer(
15+
{},
16+
{ useCursorPagination: false },
17+
);
18+
19+
const dataSource: GridDataSource = React.useMemo(
20+
() => ({
21+
getRows: async (params) => {
22+
const urlParams = new URLSearchParams({
23+
paginationModel: JSON.stringify(params.paginationModel),
24+
filterModel: JSON.stringify(params.filterModel),
25+
sortModel: JSON.stringify(params.sortModel),
26+
aggregationModel: JSON.stringify(params.aggregationModel),
27+
});
28+
const getRowsResponse = await fetchRows(
29+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
30+
);
31+
return {
32+
rows: getRowsResponse.rows,
33+
rowCount: getRowsResponse.rowCount,
34+
aggregateRow: getRowsResponse.aggregateRow,
35+
};
36+
},
37+
getAggregatedValue: (row, field) => {
38+
return row[`${field}Aggregate`];
39+
},
40+
}),
41+
[fetchRows],
42+
);
43+
44+
const initialStateWithPagination = React.useMemo(
45+
() => ({
46+
...initialState,
47+
pagination: {
48+
paginationModel: { pageSize: 10, page: 0 },
49+
rowCount: 0,
50+
},
51+
aggregation: {
52+
model: { commodity: 'size', quantity: 'sum' },
53+
},
54+
}),
55+
[initialState],
56+
);
57+
58+
return (
59+
<div style={{ width: '100%', height: 400 }}>
60+
<DataGridPremium
61+
columns={columns}
62+
unstable_dataSource={dataSource}
63+
pagination
64+
initialState={initialStateWithPagination}
65+
pageSizeOptions={[10, 20, 50]}
66+
aggregationFunctions={aggregationFunctions}
67+
/>
68+
</div>
69+
);
70+
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<DataGridPremium
2+
columns={columns}
3+
unstable_dataSource={dataSource}
4+
pagination
5+
initialState={initialStateWithPagination}
6+
pageSizeOptions={[10, 20, 50]}
7+
aggregationFunctions={aggregationFunctions}
8+
/>

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

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as React from 'react';
2+
import { DataGridPremium } from '@mui/x-data-grid-premium';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const aggregationFunctions = {
6+
sum: { columnTypes: ['number'] },
7+
avg: { columnTypes: ['number'] },
8+
min: { columnTypes: ['number', 'date', 'dateTime'] },
9+
max: { columnTypes: ['number', 'date', 'dateTime'] },
10+
size: {},
11+
};
12+
13+
export default function ServerSideDataGridAggregationLazyLoading() {
14+
const {
15+
columns,
16+
initialState: initState,
17+
fetchRows,
18+
} = useMockServer({}, { useCursorPagination: false });
19+
20+
const dataSource = React.useMemo(
21+
() => ({
22+
getRows: async (params) => {
23+
const urlParams = new URLSearchParams({
24+
filterModel: JSON.stringify(params.filterModel),
25+
sortModel: JSON.stringify(params.sortModel),
26+
aggregationModel: JSON.stringify(params.aggregationModel),
27+
start: `${params.start}`,
28+
end: `${params.end}`,
29+
});
30+
const getRowsResponse = await fetchRows(
31+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
32+
);
33+
return {
34+
rows: getRowsResponse.rows,
35+
rowCount: getRowsResponse.rowCount,
36+
aggregateRow: getRowsResponse.aggregateRow,
37+
};
38+
},
39+
getAggregatedValue: (row, field) => {
40+
return row[`${field}Aggregate`];
41+
},
42+
}),
43+
[fetchRows],
44+
);
45+
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+
60+
return (
61+
<div style={{ width: '100%', height: 400 }}>
62+
<DataGridPremium
63+
columns={columns}
64+
unstable_dataSource={dataSource}
65+
initialState={initialState}
66+
unstable_lazyLoading
67+
aggregationFunctions={aggregationFunctions}
68+
/>
69+
</div>
70+
);
71+
}

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

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import * as React from 'react';
2+
import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
3+
import { useMockServer } from '@mui/x-data-grid-generator';
4+
5+
const aggregationFunctions = {
6+
sum: { columnTypes: ['number'] },
7+
avg: { columnTypes: ['number'] },
8+
min: { columnTypes: ['number', 'date', 'dateTime'] },
9+
max: { columnTypes: ['number', 'date', 'dateTime'] },
10+
size: {},
11+
};
12+
13+
export default function ServerSideDataGridAggregationLazyLoading() {
14+
const {
15+
columns,
16+
initialState: initState,
17+
fetchRows,
18+
} = useMockServer({}, { useCursorPagination: false });
19+
20+
const dataSource: GridDataSource = React.useMemo(
21+
() => ({
22+
getRows: async (params) => {
23+
const urlParams = new URLSearchParams({
24+
filterModel: JSON.stringify(params.filterModel),
25+
sortModel: JSON.stringify(params.sortModel),
26+
aggregationModel: JSON.stringify(params.aggregationModel),
27+
start: `${params.start}`,
28+
end: `${params.end}`,
29+
});
30+
const getRowsResponse = await fetchRows(
31+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
32+
);
33+
return {
34+
rows: getRowsResponse.rows,
35+
rowCount: getRowsResponse.rowCount,
36+
aggregateRow: getRowsResponse.aggregateRow,
37+
};
38+
},
39+
getAggregatedValue: (row, field) => {
40+
return row[`${field}Aggregate`];
41+
},
42+
}),
43+
[fetchRows],
44+
);
45+
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+
60+
return (
61+
<div style={{ width: '100%', height: 400 }}>
62+
<DataGridPremium
63+
columns={columns}
64+
unstable_dataSource={dataSource}
65+
initialState={initialState}
66+
unstable_lazyLoading
67+
aggregationFunctions={aggregationFunctions}
68+
/>
69+
</div>
70+
);
71+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<DataGridPremium
2+
columns={columns}
3+
unstable_dataSource={dataSource}
4+
initialState={initialState}
5+
unstable_lazyLoading
6+
aggregationFunctions={aggregationFunctions}
7+
/>

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

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from 'react';
2+
import {
3+
DataGridPremium,
4+
useKeepGroupedColumnsHidden,
5+
useGridApiRef,
6+
} from '@mui/x-data-grid-premium';
7+
import { useMockServer } from '@mui/x-data-grid-generator';
8+
9+
const aggregationFunctions = {
10+
sum: { columnTypes: ['number'] },
11+
avg: { columnTypes: ['number'] },
12+
min: { columnTypes: ['number', 'date', 'dateTime'] },
13+
max: { columnTypes: ['number', 'date', 'dateTime'] },
14+
size: {},
15+
};
16+
17+
export default function ServerSideDataGridAggregationRowGrouping() {
18+
const apiRef = useGridApiRef();
19+
const {
20+
columns,
21+
initialState: initState,
22+
fetchRows,
23+
} = useMockServer({ rowGrouping: true });
24+
25+
const dataSource = React.useMemo(
26+
() => ({
27+
getRows: async (params) => {
28+
const urlParams = new URLSearchParams({
29+
paginationModel: JSON.stringify(params.paginationModel),
30+
filterModel: JSON.stringify(params.filterModel),
31+
sortModel: JSON.stringify(params.sortModel),
32+
groupKeys: JSON.stringify(params.groupKeys),
33+
groupFields: JSON.stringify(params.groupFields),
34+
aggregationModel: JSON.stringify(params.aggregationModel),
35+
});
36+
const getRowsResponse = await fetchRows(
37+
`https://mui.com/x/api/data-grid?${urlParams.toString()}`,
38+
);
39+
return {
40+
rows: getRowsResponse.rows,
41+
rowCount: getRowsResponse.rowCount,
42+
aggregateRow: getRowsResponse.aggregateRow,
43+
};
44+
},
45+
getGroupKey: (row) => row.group,
46+
getChildrenCount: (row) => row.descendantCount,
47+
getAggregatedValue: (row, field) => row[`${field}Aggregate`],
48+
}),
49+
[fetchRows],
50+
);
51+
52+
const initialState = useKeepGroupedColumnsHidden({
53+
apiRef,
54+
initialState: {
55+
...initState,
56+
rowGrouping: {
57+
model: ['company', 'director'],
58+
},
59+
aggregation: {
60+
model: { title: 'size', gross: 'sum', year: 'max' },
61+
},
62+
},
63+
});
64+
65+
return (
66+
<div style={{ width: '100%', height: 400 }}>
67+
<DataGridPremium
68+
apiRef={apiRef}
69+
columns={columns}
70+
unstable_dataSource={dataSource}
71+
initialState={initialState}
72+
aggregationFunctions={aggregationFunctions}
73+
/>
74+
</div>
75+
);
76+
}

0 commit comments

Comments
 (0)