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

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

Action Columns

(Recorded with AdapTable v15.0)

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

Framework: