Pivot Column Groups

This AdapTable Help Page is a work in progress and will be completed in the next couple of days

Pivot Column Groups are created dynamically by AG Grid when in pivot mode.

One Column Group is created for each distinct value in the Pivot Column.

Note

In the demo below 3 Pivot Columns Groups are created dynamically by AG Grid
e.g. one Pivot Column Group for each of the 3 values in the Language Column: HTML, JavaScript, TypeScript

If there is more than one Pivot Column, Pivot Column Groups are created at each level of nesting.

Note

The demo below has a Pivot Column Group for each nested level (e.g. HTML/MIT License, JavaScript/MIT License etc)

Expanding Column Groups

By default AdapTable will display all the columns which are dynamically created by a Pivot Column.

In other words, it will automatically expand, and display, all Pivot Column Groups.

If this is not the desired behaviour, AdapTable offers 2 options to change this:

Setting Expanded / Collapsed Behavour for Pivot Columns Groups
Setting the Pivot Expand Level

Caution

These are mutually exclusive ways of setting Column Groups Expansion
Choose one or the other, but not both

Expanded Collapsed Behaviour

The expanded / collapsed behaviour for Pivot Column Groups can be configured in exactly the same way as for "normal" Column Groups; in other words they can be set in one of 4 ways:

to always open expanded
to always open collapsed
to open expanded by default (but with exceptions)
to open collapsed by default (but with exceptions)

Note

Pivot Column Groups can only be Expanded or Collapsed if the Group is more than one level deep
In othere words, at least 2 Pivot Columns must be set

Find Out More

See Column Groups: Expanded / Collapsed Behaviour for more information

Pivot Column Groups: Expanded Collapsed

Fork Fork

This example contains 4 Layouts each of which show different options for Expanded / Collapsed Pivot Column Groups:
- Always Expanded - all Pivot Column Groups are expanded (because ColumnGroupDefaultBehavior is set to always-expanded)
- Always Collapsed - all Pivot Column Groups are collapsed (because ColumnGroupDefaultBehavior is set to always-collapsed)
- Collapsed Exceptions - all Pivot Column Groups are collapsed with exception of pivotGroup_language-license_HTML (first group)
- Expanded Exceptions - all Pivot Column Groups are expanded with exception of pivotGroup_language-license_HTML (first group)
Note: We have set 2 Pivot Columns (Language and License) which is why the Pivot Column Groups can be expanded or collapsed

Try It Out

In one of the 2 Exceptions Layouts, expand / collapse Pivot Column Groups, switch Layouts and then switch back
Note: the Exceptions have been saved, and are re-applied when the Layout loads

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Pivot Column Groups: Expanded / Collapsed',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Always Expanded',
      Layouts: [
        {
          Name: 'Always Expanded',
          PivotColumns: ['language', 'license'],
          PivotGroupedColumns: ['has_wiki'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
          ],
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'always-expanded',
          },
        },
        {
          Name: 'Always Collapsed',
          PivotColumns: ['language', 'license'],
          PivotGroupedColumns: ['has_wiki'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
          ],
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'always-collapsed',
          },
        },
        {
          Name: 'Expanded Exceptions',
          PivotColumns: ['language', 'license'],
          PivotGroupedColumns: ['has_wiki'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
          ],
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'expanded',
            ExceptionGroupKeys: ['pivotGroup_language-license_HTML'],
          },
        },

        {
          Name: 'Collapsed Exceptions',
          PivotColumns: ['language', 'license'],
          PivotGroupedColumns: ['has_wiki'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
          ],
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'collapsed',
            ExceptionGroupKeys: ['pivotGroup_language-license_HTML'],
          },
        },
      ],
    },
  },
};

Pivot Expand Level

An alternative to setting the expanded / collapsed behaviour described above is to set the Expand Level.

This is done via the PivotExpandLevel property in the Layout Definition, which can be used to configure these columns as follows:

-1 to expand all (the default behaviour)
0 for no expanded Column Groups
1 expand just the 1st level (and so on...)

Expanding Pivot Columns

Fork Fork

This example contains 2 Pivot Layout with default PivotExpandLevel settings:
- Pivot Layout Collapsed - set to 0 and so we don't see the Language Column Groups
- Pivot Layout Expanded - set to 1 and therefore we do see the Language Column Groups

PreviousPivot Result Columns NextPivot Layouts Wizard