Row Grouping - Grouped Rows

Summary

Grouped Rows are the rows created by each Row Grouped Column value
AdapTable extends Formatting and Styled Columns to Grouped Rows (with per-type defaults)
Layouts can use Full Width Group Rows (RowGroupDisplayType: groupRows) — a separate display mode from multi-column groups

Grouped Rows are the Rows created by AG Grid when Row Grouping.

There is one Grouped Row for each value in the Row Grouped Column.

Full Width Group Rows

AG Grid provides an option to render each grouped row as a single full-width row.

Caution

Full width rows take UI precedence over Aggs defined in TableAggregationColumns which are not displayed
The aggregations are still calculated by AG Grid but you cannot see them in the Grouped Row

AdapTable Layouts also offers this functionality by setting the RowGroupDisplayType property to groupRows.

Note

The two other potential values for this property are single and multi
They allow you to choose single or multiple Row Grouped Columns and both will display aggregations

The AdapTable Layout is the single source of truth for full width rows and overrides what is set in AG Grid.

Hint

Setting RowGroupDisplayType at Layout level allows you to specify different behaviours for different Layouts

Full Width Grouped Rows

Fork Fork

In this demo we create a Full Width Group Rows Layout with RowGroupDisplayType: groupRows
Accordingly, the Grouped Row takes the whole of the Row - and hides the aggregations we applied on 3 columns
The other Layout - Single Grouped Rows - has RowGroupDisplayType: single which allows the aggregations to be displayed

Try It Out

Switch Layouts in the Layout toolbar and compare how Grouped Rows look
Note that aggregations are configured on both Layouts but only visible on the multi layout

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Full Width Grouped Rows',
  initialState: {
    Dashboard: {
      PinnedToolbars: ['Layout'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Full Width Grouped Rows',
      Layouts: [
        {
          Name: 'Single Grouped Rows',
          RowGroupedColumns: ['language'],
          RowGroupDisplayType: 'groupRows',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          TableAggregationColumns: [
            {ColumnId: 'github_stars', AggFunc: 'sum'},
            {ColumnId: 'open_issues_count', AggFunc: 'sum'},
            {ColumnId: 'closed_issues_count', AggFunc: 'sum'},
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'open_issues_count',
            'closed_issues_count',
            'github_stars',
            'github_watchers',
            'open_pr_count',
            'closed_pr_count',
          ],
          ColumnSorts: [{ColumnId: 'language', SortOrder: 'Asc'}],
          AutoSizeColumns: true,
        },
        {
          Name: 'Full Width Grouped Rows',
          RowGroupedColumns: ['language'],
          RowGroupDisplayType: 'groupRows',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          TableAggregationColumns: [
            {ColumnId: 'github_stars', AggFunc: 'sum'},
            {ColumnId: 'open_issues_count', AggFunc: 'sum'},
            {ColumnId: 'closed_issues_count', AggFunc: 'sum'},
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'open_issues_count',
            'closed_issues_count',
            'github_stars',
            'github_watchers',
            'open_pr_count',
            'closed_pr_count',
          ],
          ColumnSorts: [{ColumnId: 'language', SortOrder: 'Asc'}],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Displaying Content

Three Modules support Row Grouping by rendering their content in Grouped Rows:

Module	Only Columns with Aggregation
Format Column	✅
Styled Column	✅
Action Columns	❌

Excluding Group Rows

By default, Format Columns and Action Columns render in Grouped Rows (and in Pivot Layouts).

Styled Columns can also render in Grouped Rows (depending on the Style - see below for full details).

To hide any module's content from group rows, set ExcludeGroupRows to true on that object's RowScope.

Hint

The RowScope object also has ExcludeDataRows, ExcludeSummaryRows, and ExcludeTotalRows
These properties allow you to define a Format Column or Styled Column that appears only in Grouped Rows

Format Columns

Format Columns will be automatically rendered in any Grouped Row cell that contains an Aggregation.

Hint

If this is not desired then set ExcludeGroupRows to true in the Format Column's RowScope property

Grouped Rows: Format Columns

Fork Fork

This example demonstrates adding Format Columns to Grouped Rows in AdapTable
We row-group on Language Column, set many Columns to have a sum Aggregation
We provide 3 sets of Format Columns each with different exclusion rules:
- Open PRsand Closed PRs have a Fore Color of blue and no exclusions (so is rendered in whole column)
- Open Issues and Closed Issues have a Fore Color of yellow excludes regular rows (so is only rendered in Grouped Rows)
- Github Stars and Github Watchers have a Fore Color of red and excludes Grouped Rows (so is only rendered in leaf / data Rows)

Try It Out

Remove an Aggregation for a Column and note how nothing will appear in that Column's Grouped Rows

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Grouped Rows - Format Columns',
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'open_issues_count',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'closed_issues_count',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'open_pr_count',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'closed_pr_count',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'open_pr_count',
            'closed_pr_count',
            'open_issues_count',
            'closed_issues_count',
            'github_stars',
            'github_watchers',
            'week_issue_change',
            'updated_at',
            'created_at',
          ],
          ColumnSorts: [
            {
              ColumnId: 'language',
              SortOrder: 'Asc',
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars', 'github_watchers'],
          },
          Style: {
            ForeColor: 'Red',
          },
          RowScope: {
            ExcludeGroupRows: true,
          },
        },
        {
          Name: 'formatColumn-open_issues_count',
          Scope: {
            ColumnIds: ['open_issues_count', 'closed_issues_count'],
          },
          Style: {
            ForeColor: 'yellow',
            FontWeight: 'Bold',
          },
          RowScope: {
            ExcludeDataRows: true,
          },
        },
        {
          Name: 'formatColumn-open_pr_count',
          Scope: {
            ColumnIds: ['open_pr_count', 'closed_pr_count'],
          },
          Style: {ForeColor: 'LightBlue'},
        },
      ],
    },
  },
};

Styled Columns

Most Styled Columns can render in Grouped Rows - in cells that contain an Aggregation.

Caution

If the Layout is set to Full With Grouped Rows, no Styled Columns are rendered (as there are no aggregations)

Grouped Row visibility is set via the RowScope property in the StyledColumn object.

Breaking Change

Prior to Version 23.0 the BadgeStyle had its own RowScope property which has now been removed

The actual Grouped Row behaviour varies depending on 2 factors:

the Styled Column Type
whether RowScope is explicitly set

Styled Column type	`RowScope` unset (default)	`RowScope` set
Badge	Renders on Data, Group, Summary, and Total rows	Each `Exclude` flag controls that row kind
Gradient, Percent Bar, Icon, Bullet Chart, Rating, Range Bar	Renders on Data, Summary, and Total rows — not on Group rows	Unset `Exclude` flags mean include; set `ExcludeGroupRows`: `true` to hide on groups
Sparkline	Data (leaf) rows only	Group, Summary, Total always excluded

Caution

This means that if the RowScope property is omitted, only Badge styles will render on group rows by default

Note

Cells which exclude a Styled Column will still show Format Columns (if configured)

Grouped Rows: Styled Columns

Fork Fork

This demo has a Grouped Row with several aggregations and different behaviour for the various Styled Columns provided:
- Badge on closed_issues_count — no RowScope (default): badge on data and group rows
- Badge on open_pr_count — RowScope.ExcludeDataRows: true: badge only on Grouped Rows
- Badge on closed_pr_count — RowScope.ExcludeGroupRows: true: badge only on leaf rows
- Gradient on github_stars — no RowScope: default excludes group rows (aggregated value shown as plain text)
- Percent Bar on open_issues_count — RowScope: {} (explicit include): bar also drawn on Grouped Rows
- Note: the Format Column on open_pr_count and closed_pr_count can be seen in the cells where badges are excluded

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Grouped Rows - Styled Columns',
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          TableAggregationColumns: [
            {ColumnId: 'github_stars', AggFunc: 'sum'},
            {ColumnId: 'open_issues_count', AggFunc: 'sum'},
            {ColumnId: 'closed_issues_count', AggFunc: 'sum'},
            {ColumnId: 'open_pr_count', AggFunc: 'sum'},
            {ColumnId: 'closed_pr_count', AggFunc: 'sum'},
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'github_stars',
            'github_watchers',
            'week_issue_change',
            'updated_at',
            'created_at',
          ],
          ColumnSorts: [{ColumnId: 'language', SortOrder: 'Asc'}],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-open_pr_count',
          Scope: {
            ColumnIds: ['open_pr_count', 'closed_pr_count'],
          },
          Style: {ForeColor: 'LightBlue'},
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'closed_issues_count',
          Name: 'closed_issues_count Badge',
          BadgeStyle: {
            Badges: [
              {
                PillStyle: {
                  BackColor: 'Brown',
                  ForeColor: 'White',
                },
              },
            ],
          },
        },
        {
          ColumnId: 'open_pr_count',
          Name: 'open_pr_count Badge',
          RowScope: {ExcludeDataRows: true},
          BadgeStyle: {
            Badges: [
              {
                PillStyle: {
                  BackColor: 'DarkGray',
                  ForeColor: 'White',
                },
              },
            ],
          },
        },
        {
          ColumnId: 'closed_pr_count',
          Name: 'closed_pr_count Badge',
          RowScope: {ExcludeGroupRows: true},
          BadgeStyle: {
            Badges: [
              {
                PillStyle: {
                  BackColor: 'DarkGray',
                  ForeColor: 'White',
                },
              },
            ],
          },
        },
        {
          ColumnId: 'github_stars',
          Name: 'github_stars Gradient',
          GradientStyle: {
            CellRanges: [
              {
                Min: 'Col-Min',
                Max: 'Col-Max',
                Color: 'DarkOrange',
              },
            ],
          },
        },
        {
          ColumnId: 'open_issues_count',
          Name: 'open_issues_count Percent Bar',
          RowScope: {},
          PercentBarStyle: {
            RangeValueType: 'Number',
            CellRanges: [
              {
                Min: 'Col-Min',
                Max: 'Col-Max',
                Color: 'Green',
              },
            ],
            BackColor: '#404040',
          },
        },
      ],
    },
  },
};

Action Columns

Action Columns are automatically rendered in all Grouped Row cells.

If this is not desired, then the ExcludeGroupRows option in the Action Column's rowScope property, can be used to exclude Grouped Rows from rending the Action Column.

Row Grouping: Action Columns in Grouped Rows

Fork Fork

This example demonstrates adding Action Columns to Grouped Rows in AdapTable; we again row-group on Language Column
We provide 2 Action Columns each with different exclusion rules:
- Change Theme - has no exclusions (so is rendered in whole column)
- Add Star excludes Grouped rows (so is only rendered in leaf / data Rows)

import {
  ActionColumnButton,
  ActionColumnContext,
  AdaptableOptions,
  CellUpdateRequest,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Grouped Rows - Badge Styles',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'add_star',
        friendlyName: 'Add Star',
        rowScope: {
          ExcludeGroupRows: true,
        },
        actionColumnSettings: {
          suppressMenu: true,
          resizable: false,
        },
        actionColumnButton: {
          label: 'Add Star',
          buttonStyle: {
            variant: 'outlined',
            tone: 'neutral',
          },
          onClick: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: context.rowNode?.data.github_stars + 1,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
        },
      },
      {
        columnId: 'change_theme',
        friendlyName: 'Theme',
        actionColumnButton: {
          label: 'Change Theme',
          buttonStyle: {
            variant: 'outlined',
            tone: 'neutral',
          },
          onClick: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            context.adaptableApi.themeApi.getCurrentTheme() == 'light'
              ? context.adaptableApi.themeApi.loadDarkTheme()
              : context.adaptableApi.themeApi.loadLightTheme();
          },
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['SettingsPanel'],
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'open_issues_count',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'closed_issues_count',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'add_star',
            'github_watchers',
            'change_theme',
            'open_issues_count',
            'closed_issues_count',
            'week_issue_change',
            'updated_at',
            'created_at',
          ],
          ColumnSorts: [
            {
              ColumnId: 'language',
              SortOrder: 'Asc',
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'Flashing_Cell_Any_Change',
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          Scope: {
            All: true,
          },
        },
      ],
    },
  },
};

Selecting Grouped Rows

By default, selecting a Grouped Row will select just that row only, and not any of the Group's leaf Rows.

However it is possible to change this behaviour to select all leaf rows or filtered leaf rows.

This is done via the GroupSelectMode property in the RowSelection section of a Layout.

Find Out More

See Configuring Row Selection In Layouts for more information

PreviousSorting NextAggregations