Data Grid - Server-side aggregation
Implement the Data Grid's aggregation features with server-side data sources.
The Data Grid Premium provides tools to give end users the ability to aggregate and compare row values. These features are fully documented in the primary Aggregation doc which covers client-side implementation. The information that follows here is specifically for implementing aggregation on the server side.
Prerequisites
To dynamically load tree data from the server, you must create a data source and pass the dataSource prop to the Data Grid as detailed in the Server-side data overview.
Implementing server-side aggregation
Compared to client-side aggregation, server-side aggregation requires some additional steps to implement:
1. Pass aggregation functions
Pass the available aggregation functions of type GridAggregationFunctionDataSource to the Data Grid using the aggregationFunctions prop.
Its default value is empty when the Data Grid is used with server-side data.
const aggregationFunctions: Record<string, GridAggregationFunctionDataSource> = {
size: { label: 'Size' },
sum: { label: 'Sum', columnTypes: ['number'] },
}
<DataGridPremium aggregationFunctions={aggregationFunctions} />
The GridAggregationFunctionDataSource interface is similar to GridAggregationFunction, but it doesn't have apply() or getCellValue() properties because the computation is done on the server.
See the GridAggregationFunctionDataSource API page for more details.
2. Fetch aggregated values
Use aggregationModel passed in the getRows() method of the GridDataSource to fetch the aggregated values.
For the root level footer aggregation row, pass aggregateRow containing the aggregated values in the GetRowsResponse.
const dataSource = {
getRows: async ({
sortModel,
filterModel,
paginationModel,
+ aggregationModel,
}) => {
- const response = await fetchData({ sortModel, filterModel, paginationModel });
+ const response = await fetchData({ sortModel, filterModel, paginationModel, aggregationModel });
return {
rows: response.rows,
rowCount: getRowsResponse.totalCount,
+ aggregateRow: response.aggregateRow,
}
}
}
3. Pass the getter method
Pass the getter method getAggregatedValue() in GridDataSource that defines how to get the aggregated value for a parent row (including the aggregateRow).
const dataSource = {
getRows: async ({
...
}) => {
...
},
getAggregatedValue: (row, field) => {
return row[`${field}Aggregate`];
},
}
Server-side aggregation example
The example below shows how to use the methods and patterns described above to implement server-side aggregation.
Usage with lazy loading
The demo below shows to how implement server-side aggregation with server-side lazy loading.
Usage with row grouping
Server-side aggregation works with row grouping similarly to how it's described in Aggregation (client-side)—usage with row grouping.
The aggregated values are acquired from the parent rows using the getAggregatedValue() method.
Usage with tree data
Server-side aggregation can be used with tree data similarly to how it's described in Aggregation (client-side)—usage with tree data.
The aggregated values are acquired from the parent rows using the getAggregatedValue() method.