Aggregates in React Data Grid

The Syncfusion® React Data Grid component supports summary rows that display aggregate values such as total, average, minimum, and maximum. The aggregates feature automatically computes column-level summaries from the data source without manual computation.

Setting up aggregates

The Data Grid component supports aggregate calculations through the aggregates property. Each aggregate is defined using an AggregateColumn, which includes the field property to specify the target column, the type property to define the calculation method such as sum, count, average, etc., and the format property to apply formatting to the displayed summary value. The footerTemplate property customizes how the summary value is shown in the footer row.

Types of built-in aggregates

The Data Grid component includes several built-in aggregate functions for common calculations:

Sum: Adds all values in a column.
Average: Calculates the mean of column values.
Min / Max: Finds the smallest or largest value in a column.
Count: Counts non-null values in a column.
TrueCount / FalseCount: Counts occurrences of true or false for boolean values.

Multiple aggregates for a column

The Data Grid component applies multiple aggregate types to a single column to display various summary values, such as sum, minimum, and maximum. Each aggregate is defined using an AggregateColumn with the same field name and a distinct aggregate type value to define the calculation.

Custom aggregates

The Data Grid component supports custom aggregates when built-in types like sum, count, or average do not meet specific calculation needs. To define a custom aggregate, set the type property to Custom and define a custom aggregate function to the customAggregate property within the AggregateColumn. This feature supports defining custom aggregate logic, including conditional averages, totals, and calculations derived from multiple fields.

Format aggregate values

The Data Grid component applies formatting to aggregate values using the format property in AggregateColumn. Format strings such as C2 for currency, N0 for whole numbers, and yMd for date formats can be used to customize the display.

Styling aggregates dynamically

The cellClass property enables dynamic styling of aggregate cells based on their values. This property accesses both aggregated column details and row data to customize the appearance.

column: The column definition object, containing metadata such as field name and configuration.
data: The full data object for the row, allowing contextual evaluation of the cell value.
rowIndex: The index of the current row, useful for applying alternating styles.

In this example, the "Freight Charges" cell displays a different style when the total exceeds the budget of "3000" and another when it falls below.

When the cellClass property is defined as a function, it runs every time an aggregate cell is rendered or updated. In grid with frequent changes to aggregate cells, this repeated execution increases processing load and can slow down performance. To improve efficiency, use the footerTemplate feature for customizing aggregate cells instead of using function-based class assignments.