Formatting Column Groups

Summary

Columns in Column Groups can be formatted depending on whether the Group is Expanded or Collapsed

By default all Columns placed inside Column Groups will be styled and formatted normally, and irrespective of whether the Column Group is expanded or collapsed.

However it is possible to stipulate that a Column is only formatted if the Column Group in which it is situated is expanded (or collapsed).

Hint

This is particularly useful when using Pivot Column Groups and Pivot Total Columns

This is done using the ColumnGroupScope property in the Format Column object which can take 3 values:

Both (the default)
Expanded
Collapsed

Caution

Both will not be applied to top-level columns which don't have a parent group

Column Groups: Expanded and Collapsed

Fork Fork

In this example we have created Format Column Styles on 3 Columns inside Column Groups - each with a different behaviour (set via the ColumnGroupScope property):
- The Issue Change column is set to Both - which is why the Style is visible when the Issues & PRs Column Group is both expanded and collapsed
- The Github Stars column is set to Collapsed - which is why the Style is visible when the Details Column Group is collapsed (but not expanded)
- The Github Watchers column is set to Expanded - which is why the Style is visible when the Details Column Group is expanded (but not collapses)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Grouping Formatting',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'All Expanded',
      Layouts: [
        {
          TableColumns: [
            'name',
            'week_issue_change',
            'open_issues_count',
            'open_pr_count',
            'closed_issues_count',
            'closed_pr_count',
            'github_stars',
            'github_watchers',
            'created_at',
            'updated_at',
            'pushed_at',
            'language',
            'license',
            'description',
          ],
          Name: 'All Expanded',
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'always-expanded',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'week_issue_change',
            'open_issues_count',
            'open_pr_count',
            'closed_issues_count',
            'closed_pr_count',
            'github_stars',
            'github_watchers',
            'created_at',
            'updated_at',
            'pushed_at',
            'language',
            'license',
            'description',
          ],
          Name: 'All Collapsed',
          ColumnGroupValues: {
            ColumnGroupDefaultBehavior: 'always-collapsed',
          },
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-week_issue_change',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            BackColor: 'Blue',
            ForeColor: 'White',
            FontWeight: 'Bold',
            Alignment: 'Right',
          },
          ColumnGroupScope: 'Both',
        },
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Style: {
            BackColor: 'Green',
            ForeColor: 'White',
            FontWeight: 'Bold',
            Alignment: 'Right',
          },
          ColumnGroupScope: 'Collapsed',
        },
        {
          Name: 'formatColumn-github_watchers',
          Scope: {
            ColumnIds: ['github_watchers'],
          },
          Style: {
            BackColor: 'Red',
            ForeColor: 'White',
            FontWeight: 'Bold',
            Alignment: 'Right',
          },
          ColumnGroupScope: 'Expanded',
        },
      ],
    },
  },
};

PreviousExpand / Collapse Behaviour NextMaster Detail

Framework: