Skip to content
+

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 unstable_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} />

    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 rows = await fetchRows();
-    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 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`];
  },
}

The following example demonstrates basic server-side aggregation.

Press Enter to start editing

Usage with lazy loading

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

Press Enter to start editing

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.

Press Enter to start editing

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.

Press Enter to start editing

API