AdapTable Version:

Framework:

Configuring Column Header

Summary

AdapTable users are able to change the Header / Caption of a Column in AG Grid in 2 ways:
- Changes configured in a particular Layout
- Changes set through Column Options

By default, AdapTable will show as the header (or caption) of the Column (ie. the text that appears in the Header Bar) the default value provided in AG Grid's ColumnDefs.

However this can be changed in AdapTable in 2 ways (using this order of evaluation):

on a per-Layout basis using the ColumnHeaders property
via the columnHeader function in Column Options

Per Layout

The highest level of priority are changes made to a given Layout using the ColumnHeaders property.

Note

This enables the same Column to have different Headers / Captions in 2 Layouts
It also allows the Column's Header to be set at run-time via the AdapTable UI

A custom Column Header can be set in a Layout (using the ColumnHeaders property) in many ways:

In Layout Initial State (i.e. by developers at design-time)
Using the Change Caption menu option in each Column Menu
In the Columns section of the Layout Wizard (via the dropdown which opens an expanded section)
Programatically using the setColumnCaption function in Layout API

Hint

AG Grid makes it easy to wrap Column Headers - useful when the header text is wider than the cell text
The wrapHeaderText & autoHeaderHeight props in Column Defs, when set to true, creates the necessary effect

Custom Column Headers Layout

Fork Fork

This demo shows how to change the Column Header on a per-Layout basis
In the Initial State for the Standard Layout we change 'Name' to JavaScript Framework and 'Gihub Stars' to Fans
Note: we set wrapHeaderText and autoHeaderHeight to true in Column Def's to create a better visual effect
We provide a Dashboard button to allow the Header for "Updated" to be set via the Layout API

Try It Out

Switch between Layouts and note that the Grouped Layout contains the original Column Headers
Change a Column Header using the Change Header Menu Item in the Column Menu
Change another Column's Header by using the Layout Editor's Wizard

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'tradeId',
  userName: 'Demo User',
  adaptableId: 'Column Headers Layout',
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Change "Updated" Column Header',
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.layoutApi.setColumnCaption(
            'updated_at',
            'Most Recently Changed'
          );
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'updated_at',
            'has_wiki',
            'created_at',
            'pushed_at',
            'github_watchers',
          ],
          ColumnHeaders: {
            github_stars: 'Fans',
            name: 'JavaScript Framework',
          },
          ColumnSizing: {
            name: {Width: 120},
          },
        },
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
          ],
        },
      ],
    },
  },
};

Using a Function

The columnHeader function in Column Options provides a more configurable way to change Column Headers.

Caution

Changes made to Column Headers in a Layout (either in Layout Initial State or in the UI) will take precedence

The function allows headers to be programatically set for each Column (or type of Column).

The function's context supports many different categories of column, including dynamically created ones.

columnHeader

string

Provide Custom Column Headers

This function allows developers to provide custom Headers for any Column in AG Grid.

It receives a ColumnHeaderContext object and returns a string.

The actual Context object provided by the function changes based on the type of the Column.

There are 9 different types of Column supported.

Base Context

All context objects derive from BaseColumnHeaderContext which is defined as follows:

Property	Description
currentLayout	Current Layout
currentLayoutName	Name of Current Layout
currentLayoutType	Type (table/pivot) of Current Layout
defaultHeaderName	Default header name for Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Table Columns

Standard Table Layout Columns use TableColumnHeaderContext:

Property	Description
aggregation	Aggregation function of Column (optional)
columnId	Id of the Column
columnType	Table Column (created in Table Layouts)
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Table Group Columns

Table Layout Columns which are in a Column Group use TableColumnGroupHeaderContext:

Property	Description
childrenColumnIds	Ids of Column Group's children
columnType	Table Column Group (used when Column Grouping in Table Layouts)
groupId	Id of Column Group
state	Expanded / Collapsed state of Column Group
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Auto Group Columns

Auto Group Columns (created by AG Grid when Row Grouping is active) use AutoGroupColumnHeaderContext:

Property	Description
columnId	Id of the Column
columnType	Auto-generated Row Group Column (when RowGroupDisplayType is `single`)
groupedColumnIds	Ids of all Row Grouped Columns
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Row Group Columns

Row Grouped Columns (created by AG Grid when Row Grouping is active) use RowGroupColumnHeaderContext:

Property	Description
columnId	Id of the Column
columnType	A Row Grouped Column (created in both Table and Pivot Layout)
groupColumnId	Id of Row Grouped Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Pivot Group Columns

Pivot Group Columns are created by AG Grid for each distinct value in a Pivot Column, and use PivotColumnGroupHeaderContext:

Property	Description
columnType	Pivot Column Group (created for each distinct value in a PivotColumn)
groupId	Id of generated Column Group
pivotKeys	Pivot Keys for Column Group
state	Expanded / Collapsed state of Column Group
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Pivot Result Columns

Pivot Result Columns are dynamically created by AG Grid for each combination of Pivot Column value and Pivot Aggregation, and use PivotResultColumnHeaderContext:

Property	Description
aggregatedColumnId	Id of Pivot Aggregated Column
aggregation	Aggregation function of Column
columnId	Id of generated Column
columnType	Pivot Result Column (unique intersection of PivotAggregationColumn and PivotColumn)
pivotKeys	Current Pivot Keys
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Pivot Grand Total Columns

Pivot Grand Total Columns (used for Pivot Totalling) use PivotGrandTotalHeaderContext:

Property	Description
aggregatedColumnId	Id of Pivot Aggregated Column
aggregation	Aggregation function of Column
columnType	Pivot Grand Total Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Pivot Column Total Columns

Pivot Column Total Columns (also used for Pivot Totalling) use PivotColumnTotalHeaderContext:

Property	Description
aggregation	Aggregation function of Column
columnType	Pivot Column Total
pivotColumnId	Id of Pivot Column
pivotKey	Key (i.e. column value) of Pivot Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Pivot Aggregation Total Columns

Pivot Aggregation Total Columns (again also used for Pivot Totalling) use PivotAggregationTotalHeaderContext:

Property	Description
aggregatedColumnId	Id of Aggregated Column
aggregation	Aggregation function of Column
columnType	Pivot Aggregation Total Column
pivotColumnId	Id of Pivot Column
pivotKey	Key (i.e. column value) of Pivot Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Custom Column Headers Function

Fork Fork

This demo shows how to change the Column Header programatically. We change the Header for various types of columns (visible via different Layouts):
- For tableColumn we change 'Name' to JS Framework (see Table Layout)
- For autoGroupColumn we change the header to "My Row Group" (see Row Grouped Layout)
- For tableColumnGroup we change the header to "My Column Group" (see Column Group Layout)
- For pivotResultColumn we add prefix of "Agg" to header (see Pivot Layout)
- For pivotColumnGroup we add prefix of "PC" to header (also see Pivot Layout)

Try It Out

Switch between Layouts and see the different Headers
Change the Language / JavasScript Framework Column Header by using the Layout Editor's Wizard and not it takes precedence

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'tradeId',
  userName: 'Demo User',
  adaptableId: 'Column Headers Function',
  columnOptions: {
    columnHeader: (context: ColumnHeaderContext) => {
      const {columnType, defaultHeaderName} = context;
      if (columnType == 'tableColumn') {
        if (context.columnId == 'name') {
          return 'JS Framework';
        }
      } else if (
        columnType == 'autoGroupColumn' &&
        context.currentLayoutType == 'table'
      ) {
        return 'My Row Group';
      } else if (columnType == 'pivotResultColumn') {
        return `Agg: ${defaultHeaderName}`;
      } else if (
        columnType == 'tableColumnGroup' &&
        context.currentLayoutType == 'table'
      ) {
        return 'My Column Group';
      } else if (columnType == 'pivotColumnGroup') {
        return `PC: ${defaultHeaderName}`;
      }
      return defaultHeaderName;
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Table Layout',
      Layouts: [
        {
          Name: 'Table Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'updated_at',
            'has_wiki',
            'created_at',
            'pushed_at',
            'github_watchers',
          ],
          ColumnSizing: {
            name: {Width: 150},
          },
        },
        {
          Name: 'Row Grouped Layout',
          RowGroupedColumns: ['license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
          ],
        },
        {
          Name: 'Column Group Layout',
          TableColumns: [
            'name',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'github_stars',
            'license',
            'updated_at',
            'has_wiki',
            'created_at',
            'pushed_at',
            'github_watchers',
          ],
        },
        {
          Name: 'Pivot Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {ColumnId: 'github_watchers', AggFunc: 'sum'},
            {ColumnId: 'github_stars', AggFunc: 'sum'},
          ],
          SuppressAggFuncInHeader: true,
        },
      ],
    },
  },
};

PreviousManaging Columns NextHiding Columns

Framework: