Vue Data GridAggregation - Custom Functions

Enterprise

This section covers how custom aggregation functions can be supplied and used in the grid.

Directly Supplied Functions

Custom aggregation functions can be supplied directly to colDef.aggFunc as shown below:

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

this.columnDefs = [
    {
        field: 'total',
        aggFunc: params => {
            let total = 0;
            params.values.forEach(value => total += value);
            return total;
        }
    }
];

As shown above, a custom agg function is supplied directly to the aggFunc property. The custom function uses the provided values to perform the custom aggregation. See Aggregation API Reference to learn more about the supplied params.

This is the simplest way to supply custom functions, however it has limitations compared with Registering Custom Functions.

Direct Functions will not appear in the Columns Tool Panel or work when Saving and Applying Column State.

The example below uses the direct aggFunc approach shown in the above snippet. Note the following:

  • Rows are grouped by the Country and Year columns by enabling the rowGroup column definition property.
  • func(Total) is displayed in the column header by default as it's a direct function.
  • agg(Total) appears in the Columns Tool Panel, but it's omitted from the drop-down list as it's not registered with the grid.

Registering Custom Functions

Custom functions that are registered with the grid can be referenced by name in column definitions and will appear in the Columns Tool Panel just like any Built-In Function, and is done using the aggFuncs grid option:

The following snippet shows how to register custom functions using the aggFuncs grid option:

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

this.columnDefs = [
    { field: 'sales', aggFunc: 'mySum' },
];
this.aggFuncs = {
    'mySum': params => {
        let sum = 0;
        params.values.forEach(value => sum += value);
        return sum;
    }
};

As shown above, a custom function is registered with in the grid with the name 'mySum' and is referenced by name in the column definition using the aggFunc property.

Note that custom aggregation functions can also be registered using gridApi.addAggFuncs({ mySum: mySumFunc }).

The example below uses the aggFuncs approach shown in the snippet above. Note the following:

  • Rows are grouped by the Country and Year columns by enabling the rowGroup column definition property.
  • mySum(Total) is displayed in the column header by default as it uses the registered function name.
  • mySum(Total) appears in the Columns Tool Panel and appears in the drop-down list just like a built-in function.

Custom Aggregation Functions

It is possible to add your own custom aggregation to the grid. Custom aggregation functions can be applied directly to the column or registered to the grid and reference by name (similar to grid provided functions).