Vue Data GridAggregationEnterprise

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

Enabling Aggregation

The simplest way to enable aggregations is with the built-in aggregation functions; sum, min, max, count, avg, first, 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.

Example: Enabling Aggregation

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:

Custom Functions - provide custom aggregations to the grid.
Aggregation Filtering - configure and customise how aggregations are filtered.

Suppressing Top Level Aggregations

When aggregations are present, the grid also aggregates all the top level rows into one parent row. This total aggregation is not shown in the grid so a speed increase can be produced by turning this top level aggregation off by setting suppressAggAtRootLevel=true. It is the intention that a future release of the grid will allow exposing the top level aggregation hence why this feature is left in.

API Reference

Aggregations can be configured using the following column property:

`aggFunc`

string | IAggFunc | null

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.

aggFunc: string | IAggFunc<TData> | null;

interface IAggFunc<TData = any, TValue = any> {
    (params: IAggFuncParams<TData, TValue>) : any
}

interface IAggFuncParams<TData = any, TValue = any> {
  // Values to aggregate 
  values: TValue[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef<TData>;
  // Pivot Result Column being produced using this aggregation 
  pivotResultColumn?: Column;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: IRowNode<TData>;
  // data (if any) of the parent RowNode 
  data: TData;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

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.

aggFuncs: { [key: string]: IAggFunc<TData>; };

interface IAggFunc<TData = any, TValue = any> {
    (params: IAggFuncParams<TData, TValue>) : any
}

interface IAggFuncParams<TData = any, TValue = any> {
  // Values to aggregate 
  values: TValue[];
  // Column the aggregation function is working on 
  column: Column;
  // ColDef of the aggregation column 
  colDef: ColDef<TData>;
  // Pivot Result Column being produced using this aggregation 
  pivotResultColumn?: Column;
  // The parent RowNode, where the aggregation result will be shown 
  rowNode: IRowNode<TData>;
  // data (if any) of the parent RowNode 
  data: TData;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Next Up

Continue to the next section to learn about Custom Functions.