Vue Data Grid

Aggregation - Custom Functions

vue logo
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: