Data Grid - Server-side aggregation

Aggregation with server-side data source.

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.

Server-side aggregation requires some additional steps to implement:

1. 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} />
   

   CopyCopied(or $keyC)

   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. Use aggregationModel passed in the getRows() method of 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,
        }
      }
    }
   

   CopyCopied(or $keyC)

3. 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`];
     },
   }
   

   CopyCopied(or $keyC)

The following example demonstrates basic server-side aggregation.

Usage with lazy loading

Server-side aggregation can be implemented along with server-side lazy loading as shown in the demo below.

Usage with row grouping

Server-side aggregation works with row grouping in a similar way as described in Aggregation—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 in a similar way as described in Aggregation—usage with tree data. The aggregated values are acquired from the parent rows using the getAggregatedValue() method.

API

• DataGrid
• DataGridPro
• DataGridPremium
• GridAggregationFunctionDataSource