Configuring Calculated Columns

Summary

Calculated Columns can be provided by developers through Calculated Column Initial State
The definition includes an Id, the Column's Expression and any associated behaviour

AG Grid Definitions

Calculated columns are typically not provided in the ColDefs property in AG Grid GridOptions.

Instead, the definition provided in Initial State suffices for AdapTable to be able to create the associated AG Grid column automatically.

However sometimes a developer might want to add an AG Grid element to the column.

For instance a tooltip might be needed, or there might be a requirement to put the Calculated Column inside a Column Group (which is an AG Grid feature).

This is possible: a column can be provided in AG Grid ColDefs but by specifying a Column Type of calculatedColumn, AdapTable will automatically wire it up with an associated Calculated Column definition.

Note

Set the Column Type to be calculatedColumn
The ColId in the Column Definition and ColumnId in the Calculated Column definition must be the same value

Calculated Columns: Defining in AG Grid

Fork Fork

This demo contains an AG Grid Column Group - Github Averages
The group contains 2 Calculated Columns Github Avg By Language and Github Avg By Licence
Both the Column Group and the 2 containing Columns were defined in AG Grid Column Defs
The 2 columns in the Group were given AG Grid Header and Cell ToolTips
They were also given a type of calculatedColumn which is what allowed AdapTable to wire everything together

Try It Out

Hover over a cell in the Calculated Column and see the Tooltip which AG Grid provides

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Defining Calculated Columns in AG Grid',
  initialState: {
    Dashboard: {
      ModuleButtons: ['CalculatedColumn', 'FormatColumn', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'CalculatedColumn'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'language',
            'starsAvgByLanguage',
            'starsAvgByLicence',
            'github_watchers',
          ],
          Name: 'Standard Layout',
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'starsAvgByLanguage',
          Query: {
            AggregatedScalarExpression:
              'AVG([github_stars] ,GROUP_BY([language] ) ) ',
          },
          FriendlyName: 'Github Avg By Language',
          CalculatedColumnSettings: {DataType: 'number'},
        },
        {
          ColumnId: 'starsAvgByLicence',
          Query: {
            AggregatedScalarExpression:
              'AVG([github_stars] ,GROUP_BY([license] ) ) ',
          },
          FriendlyName: 'Github Avg By Licence',
          CalculatedColumnSettings: {DataType: 'number'},
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-starsAvgByLanguage',
          Scope: {
            ColumnIds: ['starsAvgByLanguage', 'starsAvgByLicence'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              FractionDigits: 2,
            },
          },
        },
      ],
    },
  },
};

Find Out More

See Adding Column Types for Special Columns for more details and a demo