Row Grouping - Formatting and Styling

Summary

Row Grouped Columns can be formatted and styled
This is available for both Single and Multi Row Grouped Column Display Types

AdapTable allows you to easily to format and style Row Grouped Columns - in both Table and Pivot Layouts.

However this needs to be done explicitly - AdapTable will not use a Column's Style when it is Row Grouped.

Caution

A column's Format Column will not be automically applied to the Group Column when you Row Group on that column

Instead set the Column Scope of the Format Column to use AG Grid's automated colId.

Single Display Type

In Single Display Type grouping, AG Grid gives the Row Grouped column a ColId of 'ag-Grid-AutoColumn'.

Row Grouping: Formatting Single

Fork Fork

In this example we add a Format Column for 'ag-Grid-AutoColumn' of Brown Background, White Font and Italicised (and a Predicate of NonBlanks)
This format is automatically applied to the Row Grouped Column in the 2 Layouts provided:
- In Table Grouped Layout the License Column is grouped and styled
- In Pivot Grouped Layout the Language Column is grouped and has the same style

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Formatting Single Row Grouped Columns',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Table Grouped Layout',
      Layouts: [
        {
          Name: 'Table Grouped Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'popularity',
            'open_issues_count',
            'created_at',
            'has_wiki',
          ],
          RowGroupedColumns: ['license'],
          RowGroupValues: {RowGroupDefaultBehavior: 'always-expanded'},
          AutoSizeColumns: true,
        },
        {
          Name: 'Pivot Grouped Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-grouped-column',
          Scope: {
            ColumnIds: ['ag-Grid-AutoColumn'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'NonBlanks',
              },
              {
                PredicateId: 'Contains',
                Inputs: ['c'],
              },
            ],
          },
          Style: {
            BackColor: 'Brown',
            ForeColor: 'White',
            FontStyle: 'Italic',
            Alignment: 'Center',
          },
        },
      ],
    },
  },
};

Multi Display Type

Row Groups can be configured to display in multiple columns (by setting RowGroupDisplayType to 'multi').

When this happens each Row Grouped Column appears in its own, named, Column.

These Columns can also be formatted by setting the Column Scope, but this time it needs to be done explicity.

This is done by appending the Column Id to 'ag-Grid-AutoColumn-' (e.g. 'ag-Grid-AutoColumn-license').

Hint

This has the advantage that you can configure the Format or Style based on specific Column being Row Grouped
But it has the disadvantage that a Style will not be automatically applied to other Columns when Row Grouped

Row Grouping: Formatting Multi

Fork Fork

In this example we Row Group on License and Language Columns using RowGroupDisplayType of 'multi'
We add specific Format Columns to the Row Grouped Columns by using the ColumnIds 'ag-Grid-AutoColumn-license' and 'ag-Grid-AutoColumn-license'

Try It Out

Apply Row Grouping to different columns and note that they are not formatted or styled

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Formatting Multi Row Grouped Columns',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Grouped Layout',
          TableColumns: [
            'name',
            'github_stars',
            'popularity',
            'open_issues_count',
            'created_at',
            'has_wiki',
          ],
          RowGroupedColumns: ['license', 'language'],
          RowGroupDisplayType: 'multi',
          RowGroupValues: {RowGroupDefaultBehavior: 'always-expanded'},
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-license',
          Scope: {
            ColumnIds: ['ag-Grid-AutoColumn-license'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'NonBlanks',
              },
            ],
          },
          Style: {
            BackColor: 'Brown',
            ForeColor: 'White',
            FontStyle: 'Italic',
            Alignment: 'Center',
          },
        },
        {
          Name: 'formatColumn-language',
          Scope: {
            ColumnIds: ['ag-Grid-AutoColumn-language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'NonBlanks',
              },
            ],
          },
          Style: {
            BackColor: 'Purple',
            ForeColor: 'White',
            FontWeight: 'Bold',
            Alignment: 'Center',
          },
        },
      ],
    },
  },
};

Conditional Styles

Format Column on Row Groups can be conditional, ie. have a rule.

Like all Conditional Styles this can be either a Predicate or an Expression and are evaluated normally.

Hint

A common Predicate Condition is to add NonBlanks - to format only cells in the Row Grouped Column that have text

There are a couple of small "gotchas" regarding creating Conditional Styles for Row Groups in the AdapTable UI:

Predicates can only be added in the UI to Layouts which have a RowGroupDisplayType of 'multi'
The Expression Editor allows Expressions to be written, but the Row Group Column itself is not listed (and therefore not available to be dragged into the Editor)

Row Grouping: Conditional Styles

Fork Fork

In this example we create a Conditional Style on the Row Grouped Column of "CONTAINS([ag-Grid-AutoColumn], 'c')"
As a result in both the Table and Pivot Layout, only values in the Row Group column containing the letter "c" are styled

Formatting Whole Row

Like with all Conditional Styles the entire Row (in this case the Grouped Row) can be styled or formatted.

Note

This requires an Expression-based Rule with Scope of Whole Row

Row Grouping: Styling Whole Grouped Row

Fork Fork

This demo contains the same Expression (and Layouts) as the example above
The only difference is that the Scope is Whole Row - which is the entire row is styled (where it meets the condition)

PreviousExpand / Collapse Behaviour NextFiltering

Framework: