Displaying Column Aggregations

Summary

Aggregations are supported via Layouts
AdapTable provides a special Aggregation for Weighted Averages

AG Grid's Aggregation functionality displays aggregations of column values.

Note

Aggregations are displayed by AG Grid in used when Grouped Rows
By default, Aggregations display sum of values, but many different aggregation types are available

AdapTable Layouts provide full support in for AG Grid Aggregations, including:

Ability to define ָAggregations in Initial Adaptable State - for both Table Layouts and Pivot Layouts
Automatic Persistence of Aggregations created at run-time into Layout section of Adaptable State, and then be dynamically re-applied when the Layout next loads
Two custom Aggregations for Weighted Averages and Only
Support for Grand Total Rows which display the totals for all cells in the Grid (and not a single Group)

Hint

AdapTable additionally provides a very useful and powerful Row Summary feature
This allows users to see aggregation information even when there is no Row Grouping

Aggregations in Column Header

By default AG Grid prefixes the type of the aggregation function (aka aggFunc) to the Column's header.

For instance adding sum to a Price column will result in a Column header of "(sum) Price".

AdapTable allows this to be overridden through the SuppressAggFuncInHeader property in each Layout.

Note

This override is per Layout in AdapTable and not applied globally

Caution

There is an AG Grid GridOptions property called suppressAggFuncInHeader which does the same thing
The Layout's SuppressAggFuncInHeader property replaces this and is only place where this functionality can be set

Aggregations: Column Headers

Fork Fork

This example includes 2 Layouts - one Table (with Row Grouping) and one Pivot - each with 2 sum Aggregations - on Github Watchers & Github Stars Columns
We have set SuppressAggFuncInHeader to true so that in both Layouts you see just "Github Stars" instead of "(sum) Github Stars".

Try It Out

Click the Custom Toolbar to show / hide AggFuncs in the Column Header (the buttons invoke the updateCurrentLayout function in Layout API)

import {
  AdaptableButton,
  AdaptableOptions,
  ApplicationDataEntry,
  CustomToolbarButtonContext,
  DashboardButtonContext,
  Layout,
} from '@adaptabletools/adaptable';
import {tr} from 'date-fns/locale';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Suppressing Agg Funcs in Header',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'custombuttons',
        toolbarButtons: [
          {
            label: 'Show Agg Funcs',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.layoutApi.updateCurrentLayout(
                (layout: Layout) => {
                  layout.SuppressAggFuncInHeader = false;
                  return layout;
                }
              );
            },
          },
          {
            label: 'Hide Agg Funcs',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.layoutApi.updateCurrentLayout(
                (layout: Layout) => {
                  layout.SuppressAggFuncInHeader = true;
                  return layout;
                }
              );
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      PinnedToolbars: ['custombuttons', 'Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Table Layout',
      Layouts: [
        {
          Name: 'Grouped Table Layout',
          RowGroupedColumns: ['language'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'license',
            'created_at',
          ],
        },
        {
          Name: 'Pivot Layout',
          PivotColumns: ['language'],
          PivotGroupedColumns: ['license'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
        },
      ],
    },
  },
};

Formatting & Styling Aggregations

AdapTable allows users to format and style AggFuncs in a grouped row, in exactly the same way as a data row.

Find Out More

See Formatting and Styling Aggregations for more information and demos

Defining Aggregations

Developer Guide

Defining a Layout with Aggregations

// Define a Layout with 3 Aggregations:
// open_pr_count (avg), github_watchers (sum) & github_stars (default aggFunc for col)
// Weighted Aggregation for examResult (using attendance as Weighted Column)
// Provide a GrandTotalRow at top of Grid
// Set Aggregation Columns to display without name of the aggFunc
const initialState: InitialState = {
  Layout: {
    CurrentLayout: 'Grouping Layout',
    Layouts: [
    {
      Name: 'Grouping Layout',
      TableColumns: ['github_stars', 'open_pr_count', 'github_watchers', 'examResult', 'attendance'],
      RowGroupedColumns: ['license', 'language'],
      TableAggregationColumns: [
      {
        ColumnId: 'open_pr_count',
        AggFunc: 'avg'
      },
      {
        ColumnId: 'github_watchers',
        AggFunc: 'sum'
      },
      {
        ColumnId: 'github_stars',
        AggFunc: true
      },
      {
        ColumnId: 'examResult',
        AggFunc: {
          type: 'weightedAverage',
          weightedColumnId: 'attendance',
        },
      }],
      GrandTotalRow: 'top',
      SuppressAggFuncInHeader: true,
     }],
  },
}

List any Column Aggregations

A Table Layout can define which Aggregations are available in Grouped Rows, using the TableAggregationColumns property.

The TableAggregationColumns object contains 2 items:

a ColumnId (string)
either an aggFunc (e.g. sum) or true (uses default aggFunc)

Define Weighted Aggregations (optional)

You can supply Weighted Average Aggregations if needed.

In this case 2 properties must be provided to the definition:

type - always set to 'weightedAverage'
weightedColumnId - column which provides the Weight

Provide a Grand Total Row (optional)

Set GrandTotalRow prop to display a Row providing Totals of all aggregations.

Options for the property are:

top - shows it at top of grid
bottom - shows it at bottom of grid
true - equivalent to top
false - doesn't display it

Set Layout not to display the aggFunc in the Column Header (optional)

Setting SuppressAggFuncInHeader to true hides the name of the aggFunc in the Column Header, e.g. it will show 'Open PRs' instead of 'sum(Open PRs)'

PreviousGrouped Rows NextGrand Total Rows

Framework: