Vue Data GridAggregation

Enterprise

When Row Grouping, aggregation functions can be applied to any column to populate the group row with values.

Enabling Aggregation

There are two ways to enable aggregation.

You can set colDef.enableValue=true to enable aggregation via the column menu and dragging in the columns tool panel.

Another way to enable aggregations is with the built-in aggregation functions: sum, min, max, count, avg, first, and last. The following snippet shows how these agg functions can be applied to columns via colDef.aggFunc:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'country', rowGroup: true, hide: true },
    { field: 'year', rowGroup: true, hide: true }, 
    { field: 'gold', aggFunc: 'sum' },
    { field: 'silver', aggFunc: 'max' },
    { field: 'bronze', aggFunc: 'avg' },
];

The example below uses the same built-in aggregation functions shown in the snippet above. Note the following:

  • Rows are grouped by the Country and Year columns by enabling the rowGroup column definition property.

  • The Gold, Silver and Bronze value columns have different agg functions applied via colDef.aggFunc.

The built-in functions will support bigint values if you have them in your data, but the avg function will lose precision as it can only use integer arithmetic if bigint is used.

Customisations

The previous example demonstrated how the built-in agg functions can be used, however extensive Aggregation customisations are also possible as summarised below:

API Reference

Aggregations can be configured using the following column property:

Name of function to use for aggregation. In-built options are: sum, min, max, count, avg, first, last. Also accepts a custom aggregation name or an aggregation function.
allowedAggFuncs
string[]
Aggregation functions allowed on this column e.g. ['sum', 'avg']. If missing, all installed functions are allowed. This will only restrict what the GUI allows a user to select, it does not impact when you set a function via the API.
defaultAggFunc
string
default: 'sum'
The name of the aggregation function to use for this column when it is enabled via the GUI. Note that this does not immediately apply the aggregation function like aggFunc

Aggregation functions can be registered with the grid using the following grid option:

aggFuncs
{ [key: string]: IAggFunc }
A map of 'function name' to 'function' for custom aggregation functions.
suppressAggFuncInHeader
boolean
default: false
When true, column headers won't include the aggFunc name, e.g. 'sum(Bank Balance)' will just be 'Bank Balance'.
suppressAggFilteredOnly
boolean
default: false
Set to true so that aggregations are not impacted by filtering.
groupAggFiltering
boolean | IsRowFilterable
default: false
Set to determine whether filters should be applied on aggregated group values.

Next Up

Continue to the next section to learn about Custom Functions.