AdapTable Version:

Framework:

Row Grouping

Summary

AdapTable fully supports AG Grid Row Grouping and additionally provides a few related features
Row Groups can be defined in Layouts and currently expanded Row Groups can be persisted

AG Grid makes it very easy for you to group your data through Row Grouping.

AdapTable adds a number helpful features and options to improve the Row Grouping experience.

Row Groups in AdapTable are defined (and saved) in Layouts (both Table and Pivot)

Hint

For Table Layouts use the RowGroupedColumns property
For Pivot Layouts use the PivotGroupedColumns property

Row Grouping: Basics

Fork Fork

This Demo creates a Layout with Row Grouping (entitled Grouped Layout) which it sets as the Current Layout. It has the following features:
- 2 Row Grouping Columns: language and license
- 2 (SUM) Aggregations: AG Grid calculates & displays each Column value for Github Watchers & Github Stars in the Grouped Row
We use the AG Grid api to open the 'Columns' Tool Panel so its easier to see what has been set

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Grouping: Basic',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language', 'license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'license',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'github_stars',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Single Grouping Layout',
          RowGroupedColumns: ['language', 'license'],
          RowGroupDisplayType: 'single',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'github_stars',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Multi Grouping Layout',
          RowGroupedColumns: ['language', 'license'],
          RowGroupDisplayType: 'multi',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Defining Row Groups

Row Groups can be defined in both Table Layouts and Pivot Layouts

Developer Guide

Defining a Table Layout with Row Grouping

// Define a Grouping and Aggregation Layout called "Grouping Layout" as follows:
// AG Grid Row Grouping on 2 Columns: 'license' and 'language'
// RowGroupDisplayType is multi (so each Row Group has own column)
// Row Groups to be collapsed when Layout loads (with 4 exceptions listed)
const initialState: InitialState = {
  Layout: {
    CurrentLayout: 'Grouping Layout',
    Layouts: [
    {
      Name: 'Grouping Layout',
      TableColumns: ['github_stars', 'open_pr_count', 'github_watchers', 'examResult', 'attendance'],
      RowGroupedColumns: ['license', 'language'],
      RowGroupDisplayType: 'multi',
      RowGroupValues: {
          RowGroupDefaultBehavior: 'collapsed',
          GroupKeys: [
          {
            RowGroupedColumns: ['language', 'license'],
            ExceptionGroupKeys: [
              ['TypeScript'],
              ['TypeScript', 'MIT License'],
              ['JavaScript'],
              ['JavaScript', 'Other'],
            ],
          },
          ],
      },
    }],
  },
}

Define any Row-Grouped Columns

The RowGroupedColumns property is an array of (string) ColumnId

This defines the order in which Columns will be row-grouped.

The Rows in the Group will be sorted using the Column's default sort order (including Custom Sorts if they have been provided).

Hint

By default Row Grouped Columns are always placed at the left of the Grid but the Layout definition can position them anywhere

Set Display Type for Row Grouped Columns

By default all Row Grouped Columns appear in one Column (named "Group").

Use RowGroupDisplayType property to change this to 'multi' (default is 'single')

Define Row Grouping Expanded / Collapsed Behaviour (with exceptions)

The Layout can be configured so that all, none or a defined list of Row Groups are expanded / collapsed when it opens.

Find Out More

See Row Groups Expanded / Collapsed Behaviour for full details

Developer Guide

Defining a Pivot Layout with Row Grouping

// Define a Pivot Layout called "Grouping Layout" as follows:
// AG Grid Row Grouping on 2 Columns: 'country' and 'counterparty'
// RowGroupDisplayType is multi (so each Row Group has own column)
// Row Groups to be expanded when Layout loads
const initialState: InitialState = {
  Layout: {
    CurrentLayout: 'Grouping Layout',
    Layouts: [
    {
      Name: 'Grouping Layout',
      PivotColumns: ['currency'],
      PivotGroupedColumns: ['country', 'counterparty'],
      RowGroupDisplayType: 'multi',
      RowGroupValues: {
          RowGroupDefaultBehavior: 'always-expanded',
      },
    }],
  },
}

Define any Row-Grouped Columns

The PivotGroupedColumns property is an array of (string) ColumnId

This defines the order in which Columns will be row-grouped.

The Rows in the Group will be sorted using the Column's default sort order (including Custom Sorts if they have been provided).

Hint

By default Row Grouped Columns are always placed at the left of the Grid but the Layout definition can position them anywhere

Set Display Type for Pivot Row Grouped Columns

By default all Row Grouped Columns appear in one Column (named "Group").

Use RowGroupDisplayType property to change this to 'multi' (default is 'single')

Define Row Grouping Expanded / Collapsed Behaviour (with exceptions)

The Layout can be configured so that all, none or a defined list of Row Groups are expanded / collapsed when it opens.

Find Out More

See Row Groups Expanded / Collapsed Behaviour for full details

Multiple Row Group Columns

AG Grid can been configured to show each Row Group in a separate column.

This is supported by AdapTable by the RowGroupDisplayType property in each Layout.

Caution

AdapTable ignores AG Grid's groupDisplayType property if the RowGroupDisplayType property is set
i.e. if RowGroupDisplayType is multi, multiple row goup cols are displayed, even if AG Grid is set to 'singleColumn'

When this property is set to multi, AdapTable will:

display each Row Group in its own Column
use the Column's Friendly Name as the Header (instead of "Group")

Hint

See below for instructions on positioning and pinning Row Group Columns when RowGroupDisplayType is multi

Row Grouping: Multiple Columns

Fork Fork

This demo shows the options for Multi Row Grouping. We have via x Layouts (that both group by Language and License):
- MultiCol Grouped - each Row Group has its own Column
- SingleCol Grouped - both Row Groups are in the same Column

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Grouping: Multiple Columns',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Multi Col Table',
      Layouts: [
        {
          Name: 'Multi Col Table',
          RowGroupDisplayType: 'multi',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          RowGroupedColumns: ['language', 'license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'Single Col Table',
          RowGroupDisplayType: 'single', //the default
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          RowGroupedColumns: ['language', 'license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'Multi Col Pivot',
          RowGroupDisplayType: 'multi',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          PivotGroupedColumns: ['language', 'license'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          PivotColumns: ['has_wiki'],
          AutoSizeColumns: true,
        },
        {
          Name: 'Single Col Pivot',
          RowGroupDisplayType: 'single', //the default
          RowGroupValues: {
            RowGroupDefaultBehavior: 'always-expanded',
          },
          PivotGroupedColumns: ['language', 'license'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          PivotColumns: ['has_wiki'],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Expanded / Collapsed Row Groups

Developers can configure, when a Layout loads, what is the collapsed or expanded behaviour for Row Groups.

They can also provide exceptions, and save the currently expanded (or collapsed) Row Groups to State.

Find Out More

See Row Groups Expanded and Collapsed Behaviour for full details and accompanying demos

Managing Row Groups

Row Grouped Columns can be managed in similary ways to other columns, i.e. they can be:

Positioning Row Groups

Row Grouped Columns are most typically placed in the first column of the Grid to the left of all over Columns.

However AG Grid allows Row Grouped columns to be positioned anywhere in the Grid.

This is fully supported by AdapTable and it will store the columns' positions accurately in the Layout.

Caution

Currently it is not possible to re-position Row Groups in the Layout Wizard - but that behaviour is coming soon

Additionally, it is possible to define a Layout in Initial State where the Row Group is not the first Column.

Deep Dive

Configuring Row Group Position in Layout Definitions

If you want the Row Groups to be positioned at the left of the Grid - the default behaviour - then nothing additional is required to what is described in Defining Row Groups in Layouts.

However, in order to position a Row Grouped Column not at the left of the Grid, you need to add "ag-Grid-AutoColumn" into the TableColumns (array) property in the Layout Definition at the required position.

For instance to place the Row Group Column as the second Column, the Layout should look like this:

Layouts: [
{
  Name: 'Grouped Layout',
  RowGroupedColumns: ['language', 'license'],
  TableColumns: [
    'name',
    'ag-Grid-AutoColumn',
    'github_stars',
    'github_watchers',
    'updated_at',
    'pushed_at',
    'description',
    'created_at',
  ],
}],

Row Grouping: Positioning Single

Fork Fork

In this example we have configured Row Grouping on 2 columns:Language and License Columns
However, we have defined the Row Group Column to be the second Column
We have also added pinning to the first 2 columns (Name and the Row-Grouped Column)

Positioning Multi Row Groups

As noted above, AdapTable supports displaying each Row Group in a separate column.

This includes positioning the multiple Row Group Columns so they are not displayed at the start of the Grid.

Deep Dive

Configuring Multiple Row Group Positions in Layout Definitions

When AG Grid is showing multiple Row Group Columns (i.e. RowGroupDisplayType has been set to 'multi' in the Layout), you need to list each Row Group separately.

This is achieved by adding ag-Grid-AutoColumn- followed by the Column Id.

For instance to group on the language and license columns you will set:

Layouts: [
{
  Name: 'Grouped Layout',
  RowGroupedColumns: ['language', 'license'],
  TableColumns: [
    'name',
    'ag-Grid-AutoColumn-language',
    'ag-Grid-AutoColumn-license',
    'github_stars',
    'github_watchers',
    'updated_at',
    'pushed_at',
    'description',
    'created_at',
  ],
}],

Note: this allows you to put the Row Grouped Columns wherever you want and in any order, e.g.:

Layouts: [
{
  Name: 'Grouped Layout',
  RowGroupedColumns: ['language', 'license'],
  TableColumns: [
    'name',
    'ag-Grid-AutoColumn-license',
    'github_stars',
    'github_watchers',
    'updated_at',
    'ag-Grid-AutoColumn-language',
    'pushed_at',
    'description',
    'created_at',
  ],
}],

Row Grouping: Positioning Multiple

Fork Fork

Here we Row Group on Language and License Columns (as in demo above), but AG Grid has been set to show Multiple Row Group columns
Accordingly we have defined AdapTable to display 2 Row Group Columns (as second and third Columns - but they can be positioned anywhere)

Pinning Row Groups

Row Grouped Columns can be pinned.

This is done by adding 'ag-Grid-AutoColumn' to the ColumnPinning property in the Layout definition.

Row Grouping: Pinning Single Row Group

Fork Fork

This example we are grouping on the Language Column and we pinned it to the left

Pinning Multi Row Groups

When AG Grid is showing multiple Row Group Columns (i.e. RowGroupDisplayType has been set to 'multi' in the Layout), you need to list each Row Group separately.

This is achieved by adding ag-Grid-AutoColumn- followed by the Column Id.

Note

The same thing is required whenever you set RowGroupDisplayType to 'multi' - see Positioning Multi Groups above

Row Grouping: Pinning Multiple Row Groups

Fork Fork

This example we are grouping on the Language Column and we pinned it to the left

Sizing Row Groups

Row Grouped Columns can be given custom widths.

This is done by adding 'ag-Grid-AutoColumn' to the ColumnSizing property in the Layout definition.

Row Grouping: Sizing Row Group Column

Fork Fork

This example we are grouping on the License Column and we gave it a width of 350px

PreviousTechnical Reference NextExpand / Collapse Behaviour

Framework: