JavaScript Data GridAggregation - Configure Columns

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

Enabling Aggregation Copy Link

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 gridOptions = {
    columnDefs: [
        { 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
    ],

    // other grid options ...
}

Configuring via the UI Copy Link

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 gridOptions = {
    columnDefs: [
        { field: 'bronze', enableValue: true },
        { field: 'silver', enableValue: true },
        { field: 'gold', enableValue: true },
        { field: 'total', enableValue: true },
        // ... other column definitions
    ],
    sideBar: 'columns',

    // other grid options ...
}

Allowed Functions Copy Link

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 gridOptions = {
    columnDefs: [
        { field: 'total', enableValue: true, allowedAggFuncs: ['first', 'last'] },
        // ... other column definitions
    ],

    // other grid options ...
}

Default Function Copy Link

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 gridOptions = {
    columnDefs: [
        { field: 'total', enableValue: true, defaultAggFunc: 'avg' },
        // ... other column definitions
    ],

    // other grid options ...
}

Editing Aggregated Columns Copy Link

Aggregated columns can be made editable at the group row level, allowing users to edit a group total and distribute the change to descendant rows. Set groupRowEditable on the column and configure a groupRowValueSetter to control how the edited value is distributed. The built-in distribution automatically handles all standard aggregation functions.

See Editing Group Rows for full details.

Omit Function Name in Header Copy Link

To omit the aggregation function name from the column header, set the suppressAggFuncInHeader grid option to true.

The example above demonstrates the following configuration:

const gridOptions = {
    suppressAggFuncInHeader: true,

    // other grid options ...
}