Action Columns

Summary

AdapTable allows developers to define Action Columns which are:
- Special columns that contain customisable buttons for performing bespoke row-based actions
- The button is an Adaptable Button which is very flexible and configurable
- Multiple Buttons can be displayed as required

Action Columns are special columns which display a Button (or Buttons) with a user-defined action.

The Button can be styled and configured in many ways. It is defined by developers at design-time and rendered by AdapTable at run-time.

Hint

Buttons can be provided with Action Column Commands for common use case (e.g. edit, delete, clone)

Action Columns do not exist in the underlying AG Grid data source but are still stored with Adaptable State.

Note

Action Columns - like Calculated Columns and Free Text Columns - are not "normal" data columns
Instead they are created dynamically by AdapTable each time the Application runs
By contrast Styled Columns are "normal" data columns, albeit ones which AdapTable specially renders

Once created, Action Columns can be used and managed like any other Column in AG Grid and AdapTable.

Caution

Action Columns can't be created, edited or deleted in AdapTable UI, but can be moved, hidden, or added to a Layout

Action Columns: Usage

Fork Fork

In this example we define 2 Action Columns:
Update Stars
- renders a single button which increments or decrements Github Stars Column, with logic to change the text, style, visibility and disabled state of the button
- label and buttonStyle both change based on whether the Language is JavaScript
- hidden when the Name is stencil or polymer
- disabled if fewer than 200 Github Watchers
TS
- renders a button which opens the TypeScript documentation
- hidden when the Language is not TypeScript
- contains only an icon (and no visible button style)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Columns Basic',

  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'update_stars',
        friendlyName: 'Update Stars',
        actionColumnSettings: {
          suppressMenu: true,
          resizable: false,
        },
        actionColumnButton: {
          label: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            return context.rowNode?.data?.language === 'JavaScript'
              ? 'Add Star'
              : 'Remove Star';
          },
          buttonStyle: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            return context.rowNode?.data?.language === 'JavaScript'
              ? {
                  variant: 'raised',
                  tone: 'accent',
                }
              : {
                  variant: 'raised',
                  tone: 'success',
                };
          },
          onClick: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            let rowData: any = context.rowNode?.data;
            let increment =
              context.rowNode?.data?.language === 'JavaScript' ? 1 : -1;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: rowData.github_stars + increment,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
          hidden: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            return (
              context.rowNode?.data?.name === 'stencil' ||
              context.rowNode?.data?.name === 'polymer'
            );
          },
          disabled: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            return context.rowNode?.data?.github_watchers < 200;
          },
        },
      },
      {
        columnId: 'more_typescript',
        friendlyName: 'TS',
        actionColumnSettings: {
          suppressMenu: true,
          suppressMovable: true,
          resizable: false,
        },
        actionColumnButton: {
          icon: {
            style: {height: 20, width: 20},
            src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg',
          },
          onClick: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            Object.assign(document.createElement('a'), {
              target: '_blank',
              href: 'https://www.typescriptlang.org/',
            }).click();
          },
          hidden: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            return context.rowNode?.data?.language !== 'TypeScript';
          },
        },
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'update_stars',
            'week_issue_change',
            'github_watchers',
            'language',
            'more_typescript',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

AdapTable Buttons

Action Columns are essentially powerful wrappers around Adaptable Button.

AdapTable Buttons have many properties (most available also as functions) which provide full control over:

the Button's text
how the Button looks
an optional icon
whether or not the Button is visible in a given row
whether or not the Button is disabled in a given row
what happens when the Button is clicked

Deep Dive

How Action Columns Work in AdapTable

Multiple Buttons

An Action Column can contain more than one button if required.

Note

There is no limit on the number of Buttons in an Action Column

Action Columns: Multiple Buttons

Fork Fork

In this example we define 2 Action Columns, that each contains 2 buttons:
- Update Issues: contains Up and Down buttons that increment / decrement the Issue Change column respectively
- Manage Row: contains Add and Delete buttons to add / delete Rows (and is pinned to the right in the Layout)
Note: The same functionality could be achieved in the first Action Column by using Plus Minus and for the second by using Action Column Commands

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Columns Multiple Buttons',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'update_issues',
        friendlyName: 'Update Issues',
        actionColumnButton: [
          {
            label: 'Up',
            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);
            },
          },
          {
            label: 'Down',
            buttonStyle: {
              variant: 'outlined',
              tone: 'warning',
            },
            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);
            },
          },
        ],
      },
      {
        columnId: 'manage_row',
        friendlyName: 'Manage Row',
        actionColumnButton: [
          {
            label: 'Add',
            buttonStyle: {
              variant: 'raised',
              tone: 'neutral',
            },
            onClick: (
              button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              context.adaptableApi.rowFormApi.displayCreateRowForm();
            },
          },
          {
            label: 'Delete',
            buttonStyle: {
              variant: 'outlined',
              tone: 'neutral',
            },
            onClick: (
              button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              context.adaptableApi.gridApi.deleteGridData([
                context.rowNode?.data,
              ]);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'week_issue_change',
            'update_issues',
            'github_watchers',
            'license',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'topics',
            'description',
            'manage_row',
          ],
          ColumnPinning: {manage_row: 'right'},
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Column width

Use actionColumnSettings to control how wide the column is:

Property	Purpose
`width`	Fixed width in pixels (overrides `autoWidth` and `minWidth`)
`minWidth`	Minimum width; also used as the column width when `autoWidth` is false
`autoWidth`	Estimates width from button labels/icons (or the dropdown label) at setup time

Note

autoWidth uses static labels and icons only. If label, icon, hidden, or disabled are functions, set width explicitly.
Layout AutoSizeColumns does not replace action-column width calculation — configure the action column directly.

Button layout

Icon position

Set iconPosition on any Adaptable Button inside an action column:

{
  label: 'Forward',
  iconPosition: 'end', // label before icon (default is 'start')
  icon: { name: 'arrow-right' },
  onClick: (button, context) => { /* ... */ },
}

When several actions would crowd the row, set displayMode: 'dropdown'. All buttons appear in a single menu:

actionColumnSettings: {
  displayMode: 'dropdown',
  dropdownLabel: 'Manage',
  autoWidth: true,
},
actionColumnButton: [
  { label: 'Increment', onClick: /* ... */ },
  { command: 'edit' },
  { command: 'delete' },
],

Note

What applies in dropdown mode

Property	Trigger button (`dropdownLabel`)	Menu items (each `actionColumnButton`)
`label`	Yes — trigger text	Yes — row text
`icon`	No	Yes — icon column (left of label)
`tooltip`	No	Used as fallback if `label` is empty
`onClick` / `command`	No	Yes
`hidden` / `disabled`	No	Yes
`buttonStyle`	No — trigger uses fixed `outlined` / `neutral`	No
`iconPosition`	No — chevron is always after the trigger label	No — menu layout is always icon then label

So buttonStyle and iconPosition on individual buttons only take effect when displayMode is 'buttons' (the default). In dropdown mode, styling is deliberately uniform: one trigger plus a standard list.

One Manage trigger opens a menu with increment, decrement, edit, and delete actions
autoWidth sizes the column from the dropdown label

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Columns Dropdown',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'row_actions',
        friendlyName: 'Actions',
        actionColumnSettings: {
          displayMode: 'dropdown',
          dropdownLabel: 'Manage',
          autoWidth: true,
          minWidth: 110,
        },
        actionColumnButton: [
          {
            label: 'Increment change',
            icon: {name: 'add'},
            onClick: (
              _button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              const rowData = context.rowNode?.data as WebFramework;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'week_issue_change',
                newValue: rowData.week_issue_change + 1,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
          },
          {
            label: 'Decrement change',
            icon: {name: 'minus'},
            onClick: (
              _button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              const rowData = context.rowNode?.data as WebFramework;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'week_issue_change',
                newValue: rowData.week_issue_change - 1,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
          },
          {
            command: 'edit',
          },
          {
            command: 'delete',
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'week_issue_change',
            'language',
            'license',
            'row_actions',
          ],
          ColumnPinning: {row_actions: 'right'},
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Leveraging Action Columns

AdapTable automatically creates Action Columns in 2 additional use cases:

when using FDC3 to make it easy to raise Intents and broadcast Contexts
if adding Action Buttons to the Data Change History Monitor

FAQ

Can we edit Action Columns at runtime? No, Action Columns can only be provided and configured at design time.

Can we refer to the Action Column in our AG Grid Column Definitions (e.g. to put it in a Column Group)? Yes, you can do that. This will allow you to add AG Grid properties to the column (e.g. a Tooltip) You must ensure the colId matches the Action Column columnID and to add a Column Type of actionColumn

Can I have more than one button in an Action Column? Yes, there is no limit to the number of buttons an Action Column can contain

AdapTable Resources

Adaptable Button - the button(s) displayed inside an Action Column

PreviousTechnical Reference NextAction Column Commands

Action Columns

Summary

Hint

Note

Caution

AdapTable Buttons

Deep Dive

How Action Columns Work in AdapTable

Note

Multiple Buttons

Note

Column width

Note

Button layout

Icon position

Dropdown mode

Note

Leveraging Action Columns

FAQ

AdapTable Resources