React Data GridAggregation - Configure Columns

Columns can be configured to aggregate data for each level of row grouping or tree data.

Enabling Aggregation

An aggregation function can be applied to a column by setting the aggFunc grid option to one of: "sum", "min", "max", "first", "last", "count", or "avg".

The example above demonstrates the following configuration:

const [columnDefs, setColumnDefs] = useState([
    { field: 'total', aggFunc: 'sum' },
    { field: 'total', aggFunc: 'avg' },
    { field: 'total', aggFunc: 'count' },
    { field: 'total', aggFunc: 'min' },
    { field: 'total', aggFunc: 'max' },
    { field: 'total', aggFunc: 'first' },
    { field: 'total', aggFunc: 'last' },
    // ... other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Configuring via the UI

Enable users to configure aggregation functions on a column using the Columns Tool Panel and Column Menu by setting the enableValue column definition property to true.

The example above demonstrates the following configuration:

const [columnDefs, setColumnDefs] = useState([
    { field: 'bronze', enableValue: true },
    { field: 'silver', enableValue: true },
    { field: 'gold', enableValue: true },
    { field: 'total', enableValue: true },
    // ... other column definitions
]);
const sideBar = useMemo(() => { 
	return 'columns';
}, []);

<AgGridReact
    columnDefs={columnDefs}
    sideBar={sideBar}
/>

Allowed Functions

To restrict the aggregation functions that can be applied to a column, set the allowedAggFuncs column definition property to an array of allowed aggregation function names.

The following configuration is an example demonstrating limiting a column to only allow the "first" and "last" aggregation functions:

const [columnDefs, setColumnDefs] = useState([
    { field: 'total', enableValue: true, allowedAggFuncs: ['first', 'last'] },
    // ... other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Default Function

When right clicked in the Column Tool Panel or dragged into the aggregation panel, the "sum" aggregation function is applied to the column. This default can be changed by setting the defaultAggFunc column definition property.

The example above demonstrates the following configuration:

const [columnDefs, setColumnDefs] = useState([
    { field: 'total', enableValue: true, defaultAggFunc: 'avg' },
    // ... other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Omit Function Name in Header

To omit the aggregation function name from the column header, set the suppressAggFuncInHeader option in the column definition.

The example above demonstrates the following configuration:

const [columnDefs, setColumnDefs] = useState([
    { field: 'total', suppressAggFuncInHeader: true },
    // ... other column definitions
]);

<AgGridReact columnDefs={columnDefs} />

Next Up

Continue to the next section to learn about Custom Aggregation Functions.