JavaScript 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 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

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

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

When right clicked in the Column Tool Panel or dragged into the aggregation panel, the "sum" aggregation 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 ...
}

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

    // other grid options ...
}

Next Up

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