Column Grouping

Summary

Column Groups are fully supported in AdapTable
The Layout Wizard provides details of Column Groups and respects any Column Grouping rules

AdapTable fully supports AG Grid Column Grouping (sometimes known as column banding).

This is where multiple columns are placed in one group and given an additional, common Header.

Column Groups

Fork Fork

3 Column Groups have been defined in colDefs in Grid Options:
Issues & PRs
- contains Open PRs, Closed PRs, Open Issues and Closed Issues Columns
- has marryChildren set to true - so columns cannot be out of the Group
- Open Issues and Closed Issues Columns set with columnGroupShow as 'closed'
Dates
- contains 3 Date Columns: Updated, Pushed, Created
- has marryChildren set to false - so columns can be out of the Group
Details
- contains Description, License, Has Wiki, Has Projects & Has Pages Columns
- has marryChildren set to true - so columns cannot be out of the Group
- the Description column has columnGroupShow set to 'closed'

Layouts

Column Groups are not specified in Layouts - as the GridOptions definition is sufficient.

But they are respected in Layouts.

For instance, in the Column list the Layout Editor displays the name of any Column Group a column belongs to.

It also prevents users moving columns out of Column Groups, where this is not allowed in the AG Grid definition.

Column Names

By default AdapTable will not change the FriendlyName of a Column when it is in a Column Group.

Note

The Friendly Name is how AdapTable refers to the Column e.g. in Wizards or Expression Editor

However sometimes the same Friendly Name can appear in multiple Column Groups (e.g. 3 columns groups each have a Bid and Ask column).

When this is the case, there are 2 ways to make the FriendlyName unique:

Adding Column Group Name

The simplest way to ensure uniqueness of FriendlyName for Columns in Column Groups is via the addColumnGroupToColumnFriendlyName property in Column Options.

This will append the name of the Column Group to the Friendly Name (e.g. "Bid [Bbg]", "Bid[Markit]").

Using a property

Use the columnFriendlyName property also in Column Options.

Find Out More

See the Developer Tutorial on Configuring Column Headers for more details

Special Columns

AdapTable provides 3 "Special Columns" which are created dynamically.

These can also be included in Column Groups, by providing these 2 steps:

Add them explicitly in AG Grid Columns Defs (this is not normally required for Special Columns)
Provide them with a Column Type of calculatedColumn, freeTextColumn or actionColumn

Column Groups with Special Columns

Fork Fork

This example contains a Column Group (called 'Special Columns') which includes 3 Special Columns:
- Big Stars - a Calculated Column
- Add Issue - an Action Column
- Comments - a FreeText Column
All 3 columns were defined in Column Defs (as well as Adaptable Options / Initial Adaptable State)
And all 3 columns were given a matching Column Type to wire it all up together

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Grouping with Special Columns',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'add_issue',
        friendlyName: 'Add Issue',
        actionColumnButton: [
          {
            label: 'Add',
            buttonStyle: {
              variant: 'outlined',
              tone: 'info',
            },
            onClick: (
              button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              let rowData: any = context.rowNode?.data;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'week_issue_change',
                newValue: rowData.week_issue_change + 1,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['CalculatedColumn', 'FormatColumn', 'SettingsPanel'],
    },

    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'bigStars',
            'add_issue',
            'comments',
            'week_issue_change',
            'github_watchers',
            'language',
            'license',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'bigStars',
          Query: {
            ScalarExpression: '[github_stars] * 10 ',
          },
          FriendlyName: 'Big Stars',
          CalculatedColumnSettings: {DataType: 'number'},
        },
      ],
    },

    FreeTextColumn: {
      FreeTextColumns: [
        {
          ColumnId: 'comments',
          FriendlyName: 'Comments',

          FreeTextStoredValues: [
            {PrimaryKey: 24195339, FreeText: 'Used by the US team'},
            {PrimaryKey: 224663696, FreeText: 'My personal favourite'},
            {PrimaryKey: 82095231, FreeText: 'Required by Support Team'},
          ],
          FreeTextColumnSettings: {
            Aggregatable: false,
            DataType: 'text',
          },
        },
      ],
    },
  },
};

PreviousFormatting Aggregations NextExpand / Collapse Behaviour