Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Data GridAggregation - OtherEnterprise

This section covers areas of aggregation that don't fit within the other sections of the documentation.

Default Aggregation Function

When columns are dragged to the Values section of the Columns Tool Panel they are assigned the sum aggregation function by default. The default aggregation function can be overridden on a per-column basis using the defaultAggFunc column property.

const gridOptions = {
    columnDefs: [
        {
            field: 'gold',
            // allows column to be dragged to the 'Values` section of the Columns Tool Panel 
            enableValue: true,
            // use 'avg' as the default agg func instead of 'sum'  
            defaultAggFunc: 'avg',
        },
    ],

    // other grid options ...
}

The following example demonstrates overriding the default agg function. Note the following:

  • The Gold column is configured with defaultAggFunc set to avg.
  • Drag the Gold column to the Values section of the Columns Tool Panel and note that it is assigned the 'avg' function.
  • The Silver column is configured to use a custom aggregation function as its default. Drag the Silver column to the Values section and note that it is assigned the function mySum.
  • Dragging the Bronze column will use sum as the default.

Note that unlike aggFunc you can't pass a custom aggregation function directly to defaultAggFunc, as demonstrated in the previous example, it must be registered first. See Registering Custom Functions for how to do this.

Restricting Aggregation Functions

By default, all functions are available to all value columns. To restrict the aggregation functions available on a value column, use the allowedAggFuncs column property as shown below:

const gridOptions = {
    columnDefs: [
        {
            field: 'gold', 
            aggFunc: 'sum',
            // restricts agg functions to be: `sum`, `min` and `max`
            allowedAggFuncs: ['sum', 'min', 'max'],
        }
    ],

    // other grid options ...
}

The following example demonstrates restricting the aggregation functions. Note the following:

  • The Gold column is configured with allowedAggFuncs set to ['sum', 'min', 'max'] and only displays these functions in the drop-down list in the Values section column to the of the Columns Tool Panel.
  • The Silver column shows all available agg functions as it hasn't been restricted.

Aggregation API

After the grid is initialised aggregations can be applied / retrieved / removed via the columnApi with the following methods:

getValueColumns
Function
Get a list of the existing value columns. 
getValueColumns = () => Column[];
addValueColumn
Function
Add the given column to the set of existing value columns. 
addValueColumn = (
    colKey: (string | Column)
) => void;
addValueColumns
Function
Like addValueColumn but add the given list of columns to the existing set of value columns. 
addValueColumns = (
    colKeys: (string | Column)[]
) => void;
removeValueColumn
Function
Remove the given column from the existing set of value columns. 
removeValueColumn = (
    colKey: (string | Column)
) => void;
removeValueColumns
Function
Like removeValueColumn but remove the given list of columns from the existing set of value columns. 
removeValueColumns = (
    colKeys: (string | Column)[]
) => void;
setValueColumns
Function
Set the value columns to the provided list of columns. 
setValueColumns = (
    colKeys: (string | Column)[]
) => void;
setColumnAggFunc
Function
Sets the agg function for a column. aggFunc can be one of the built-in aggregations or a custom aggregation by name or direct function. 
setColumnAggFunc = (
    key: string | Column,
    aggFunc: string | IAggFunc | null | undefined
) => void;

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;
}

When the grid initialises, any column definitions that have aggFunc set will be automatically added as a value column.

Column Headers

When aggregating, the column headers will include the aggregation function for the column. For example the header 'Bank Balance' will become 'sum(Bank Balance)' if you have the sum aggregation active on the column. To turn this off and display simply 'Bank Balance' then set the grid property suppressAggFuncInHeader.

suppressAggFuncInHeader
boolean
When true, column headers won't include the aggFunc name, e.g. 'sum(Bank Balance)' will just be 'Bank Balance'.
Default: false

Empty Aggregation Calls

When providing either Custom Aggregation Functions or Custom Full Row Aggregation then you will see strange calls to these functions where empty lists are provided.

The empty aggregation calls happen in the following two scenarios:

  1. The grid has no data (usually the case when the gird is initially displayed before the application has set data). Aggregating at the root level will request an aggregation of an empty set.
  2. The grid has groups and a filter, such that groups are empty.

Recomputing Aggregates

If the data changes after the aggregation is done, you can tell the grid to recompute the aggregates through the API method refreshClientSideRowModel('aggregate').

refreshClientSideRowModel
Function
Refresh the Client-Side Row Model, executing the grouping, filtering and sorting again. Optionally provide the step you wish the refresh to apply from. Defaults to everything. 
refreshClientSideRowModel = (
    step?: ClientSideRowModelStep
) => any;

type ClientSideRowModelStep = 
      'everything' 
    | 'group' 
    | 'filter' 
    | 'pivot' 
    | 'aggregate' 
    | 'sort' 
    | 'map'

Next Up

Continue to the next section to learn about Tree Data.