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
- Alternatively a dropdown can be rendered which contains multiple buttons in a menu

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.

As an alternative to a Button a Dropdown can be displayed with multiple menu-like items.

Hint

Buttons (and / or dropdowns) can be provided with Action Column Commands
These are designed for very common use cases, 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,
        },
      ],
    },
  },
};

Read-only

Loading demo…

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,
        },
      ],
    },
  },
};

Read-only

Loading demo…

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) => { /* ... */ },
}

Action Columns can also contain a dropdown (instead of a button).

This is useful when several actions would crowd the row; all buttons appear in a single menu.

Hint

Dropdown mode is activated by setting displayMode to 'dropdown'

actionColumnSettings: {
  displayMode: 'dropdown',
  dropdownLabel: 'Manage',
},
actionColumnButton: [
  //add buttons here as normal and they will appear in a menu
],

The rules which AdapTable sets for which properties are applied in dropdown mode are as follows:

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 — only uses `outlined` / `neutral`	No
`iconPosition`	No — chevron always after trigger label	No — menu is always icon then label

Note

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

This example contains 2 Action Columns that render in Dropdown Mode:
- Update Change opens a menu with increment and decrement actions (that work on the Issue Change column)
- Manage opens a menu with edit, and delete action column commands

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: 'update_change',
        friendlyName: 'Update Change',
        actionColumnSettings: {
          displayMode: 'dropdown',
          dropdownLabel: 'Change',
          autoWidth: true,
          minWidth: 110,
        },
        actionColumnButton: [
          {
            label: 'Increment',
            icon: {name: 'plus'},
            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',
            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);
            },
          },
        ],
      },
      {
        columnId: 'row_actions',
        friendlyName: 'Actions',
        actionColumnSettings: {
          displayMode: 'dropdown',
          dropdownLabel: 'Manage',
          autoWidth: true,
          minWidth: 110,
        },
        actionColumnButton: [
          {
            command: 'edit',
          },
          {
            command: 'delete',
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'week_issue_change',
            'update_change',
            'language',
            'license',
            'row_actions',
          ],
          ColumnPinning: {row_actions: 'right'},
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Read-only

Loading demo…

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