Column Groups Expanded Collapsed Behaviour

Summary

Column Groups in AdapTable can be configured to open as Expanded or Collapsed
Users are able to set exceptions to the default for certain Column Groups

Developers can configure, when a Layout loads, the collapsed / expanded behaviour for Column Groups.

This is done on a per-Layout basis using the ColumnGroupValues property in the Base Layout object.

Note

Something very similar can be done for Row Groups using the (almost identical) RowGroupValues property

Deep Dive

Understanding the ColumnGroupValues object

The ColumnGroupValues object consists of 2 alternative properties (only one of which can be chosen):

ColumnGroupDefaultBehavior - to set default and consistent behaviour
ColumnGroupValuesWithExceptionKeys - (optional) to list any specific exceptions as an array

This allows you either to configure behaviour that never changes or to list exceptions.

Consistent Behaviour

If you want the behaviour of Column Groups to be consistent (i.e. never change and never save exceptions) then use the ColumnGroupDefaultBehavior option in ColumnGroupValues.

The ColumnGroupDefaultBehavior property consists of 2 possible values:

always-expanded
always-collapsed

ColumnGroupValues: {
  ColumnGroupDefaultBehavior: 'always-expanded',
},

List Exceptions

If you wish to provide a default behaviour, but also set or save exceptions, use ColumnGroupValuesWithExceptionKeys property in ColumnGroupValues.

The ColumnGroupValuesWithExceptionKeys object contains 2 properties:

ColumnGroupDefaultBehavior - contains 2 possible values used to set default behaviour: expanded and collapsed
ExceptionGroupKeys - lists the Ids of Column Groups which are exceptions to default behaviour, provided as an array:

Caution

Make sure to set the groupId property for the Column Group, if you wish to use it in Exceptions
e.g in Example below we will have set the groupId property for the Column Groups of Prices and Details

// Set all Column Groups to be expanded except for Prices and Details
ColumnGroupValues: {
  ColumnGroupDefaultBehavior: 'collapsed',
  ExceptionGroupKeys: ['Prices', 'Details'],
},

There are 4 posible use cases:

Use Case	Default Behaviour	Provide Exceptions
All Groups are exanded	`always-expanded`	❌
All Groups are collapsed	`always-collapsed`	❌
All Groups are expanded, but exceptions listed	`expanded`	✅
All Groups are collapsed, but exceptions listed	`collapsed`	✅

Column Groups: Expanded and Collapsed

Fork Fork

This example illustrates the different options for Expanding / Collapsing Column Groups. We provide 3 Column Groups:
- Github - which shows Github Starts when expanded and Github Watchers when closed
- Issues & PRs - which shows the 2 Issues columns when expanded and the 2 PRs columns when closed
- Dates - which shows Created when expanded and Updated and Pushed when closed
We also provide 4 Table Layouts which demonstrate the different options:
- Always Expanded - has ColumnGroupDefaultBehavior set to always-expanded
- Always Collapsed - has ColumnGroupDefaultBehavior set to always-collapsed
- Collapsed Exceptions - all Column Groups collapsed with exception of Issues & PRs
- Expanded Exceptions - all Column Groups expanded with exception of Issues & PRs

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Grouping Expand / Collapsed',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Always Expanded',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'github_watchers',
            'open_issues_count',
            'open_pr_count',
            'closed_issues_count',
            'closed_pr_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'language',
            'license',
            'description',
          ],
          Name: 'Always Expanded',
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'always-expanded',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'github_stars',
            'github_watchers',
            'open_issues_count',
            'open_pr_count',
            'closed_issues_count',
            'closed_pr_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'language',
            'license',
            'description',
          ],
          Name: 'Always Collapsed',
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'always-collapsed',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',

            'github_stars',
            'github_watchers',
            'open_issues_count',
            'open_pr_count',
            'closed_issues_count',
            'closed_pr_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'language',
            'license',
            'description',
          ],
          Name: 'Collapsed Exceptions',
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'collapsed',
            ExceptionGroupKeys: ['issues_prs'],
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',

            'github_stars',
            'github_watchers',
            'open_issues_count',
            'open_pr_count',
            'closed_issues_count',
            'closed_pr_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'language',
            'license',
            'description',
          ],
          Name: 'Expanded Exceptions',
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'expanded',
            ExceptionGroupKeys: ['issues_prs'],
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Pivot Layouts

The same behaviour is also available for the Pivot Column Groups which are displayed in Pivot Layouts.

Find Out More

See Pivot Layout: Pivot Column Groups for more detailed information and a demo (similar to the one above)

PreviousColumn Groups NextFormatting

Framework: