Action Column Buttons

Summary

A button Control is a clickable button in an Action Column cell
It is the same Adaptable Button used in the Dashboard, Toolbars, Tool Panel and Forms
onClick receives ActionColumnContext
Optional confirm and async busyLabel cover prompts and pending state

The button Control is the most common Action Column Control.

Note

Up to Version 24 it was the only control available in an Action Column

It is the same Adaptable Button that appears throughout AdapTable — Dashboard buttons, Custom Toolbar buttons, Tool Panel buttons, and Form footer buttons.

The most important property is the onClick function which defines what happens when the button is clicked.

Hint

onClick receives ActionColumnContext
If the function returns a Promise, the button shows a pending state (optional busyLabel) until it resolves

The other properties are identical to a normal button: label, icon, iconPosition etc.

As with the AdapTable Button they can return or a static value or function that returns a value based on the row.

There is also a style property which is the same as the button's buttonStyle property (with tone & variant).

Note

The prop is style because lives on shared BaseControl used by all Action Column Controls, not only buttons
The type is still ButtonStyle; handlers receive only the ActionColumnContext (no separate button argument)

There is an optional confirm which shows a prompt before the handler runs.

Developer Guide

Defining a Button Control

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'update_stars',
      friendlyName: 'Update Stars',
      controls: [
        {
          type: 'button',
          label: (context) =>
            context.data.language === 'JavaScript'
              ? 'Add Star'
              : 'Remove Star',
          style: (context) =>
            context.data.language === 'JavaScript'
              ? {variant: 'raised', tone: 'accent'}
              : {variant: 'raised', tone: 'success'},
          onClick: (context) => {
            const increment =
              context.data.language === 'JavaScript' ? 1 : -1;
            context.adaptableApi.gridApi.setCellValue({
              columnId: 'github_stars',
              newValue: context.data.github_stars + increment,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            });
          },
          hidden: (context) =>
            context.data.name === 'stencil' ||
            context.data.name === 'polymer',
          disabled: (context) =>
            context.data.github_watchers < 200,
        },
      ],
    },
  ],
},

Add Action Column Options

Put the Column in actionColumnOptions.actionColumns.

Identify the Column

Supply columnId and an optional friendlyName (used as the header caption).

Set the Control type

Each item in controls needs a type. For a button this is 'button'.

Configure appearance

label and style can be functions of the row — here they change when Language is JavaScript.

Handle the click

onClick receives the Action Column context and updates the row.

Hide or disable per row

hidden and disabled are also functions of the context.

Action Columns: Button

Fork Fork

Update Stars increments or decrements Github Stars
- label and style change when Language is JavaScript
- hidden when the Name is stencil or polymer
- disabled if fewer than 200 Github Watchers
TS is an icon-only button that opens the TypeScript site, hidden unless Language is TypeScript

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Button',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'update_stars',
        friendlyName: 'Update Stars',
        settings: {
          suppressMenu: true,
          resizable: false,
        },
        controls: [
          {
            type: 'button',
            label: (context: ActionColumnContext<WebFramework>) =>
              context.data?.language === 'JavaScript'
                ? 'Add Star'
                : 'Remove Star',
            style: (context: ActionColumnContext<WebFramework>) =>
              context.data?.language === 'JavaScript'
                ? {variant: 'raised', tone: 'accent'}
                : {variant: 'raised', tone: 'success'},
            onClick: (context: ActionColumnContext<WebFramework>) => {
              const increment =
                context.data?.language === 'JavaScript' ? 1 : -1;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'github_stars',
                newValue: (context.data?.github_stars ?? 0) + increment,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
            hidden: (context: ActionColumnContext<WebFramework>) =>
              context.data?.name === 'stencil' ||
              context.data?.name === 'polymer',
            disabled: (context: ActionColumnContext<WebFramework>) =>
              (context.data?.github_watchers ?? 0) < 200,
          },
        ],
      },
      {
        columnId: 'more_typescript',
        friendlyName: 'TS',
        settings: {
          suppressMenu: true,
          suppressMovable: true,
          resizable: false,
        },
        controls: [
          {
            type: 'button',
            icon: {
              style: {height: 20, width: 20},
              src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg',
            },
            onClick: () => {
              Object.assign(document.createElement('a'), {
                target: '_blank',
                href: 'https://www.typescriptlang.org/',
              }).click();
            },
            hidden: (context: ActionColumnContext<WebFramework>) =>
              context.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…

Multiple Buttons

There is no limit on the number of Buttons (or other Controls) in one Column.

Action Columns: Multiple Buttons

Fork Fork

Update Issues has Up and Down buttons that change Issue Change
Manage Row is pinned right and uses create / delete Commands instead

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

const bumpIssueChange = (
  context: ActionColumnContext<WebFramework>,
  delta: number
) => {
  const cellUpdateRequest: CellUpdateRequest = {
    columnId: 'week_issue_change',
    newValue: (context.data?.week_issue_change ?? 0) + delta,
    primaryKeyValue: context.primaryKeyValue,
    rowNode: context.rowNode,
  };
  context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
};

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Columns Multiple Buttons',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'update_issues',
        friendlyName: 'Update Issues',
        controls: [
          {
            type: 'button',
            label: 'Up',
            style: {variant: 'outlined', tone: 'info'},
            onClick: context => bumpIssueChange(context, 1),
          },
          {
            type: 'button',
            label: 'Down',
            style: {variant: 'outlined', tone: 'warning'},
            onClick: context => bumpIssueChange(context, -1),
          },
        ],
      },
      {
        columnId: 'manage_row',
        friendlyName: 'Manage Row',
        controls: [
          {
            type: 'command',
            command: 'create',
            label: 'Add',
            style: {variant: 'raised', tone: 'neutral'},
          },
          {
            type: 'command',
            command: 'delete',
            label: 'Delete',
            style: {variant: 'outlined', tone: 'neutral'},
          },
        ],
      },
    ],
  },
  rowFormOptions: {
    autoHandle: true,
    disableInlineEditing: true,
    setPrimaryKeyValue: context => ({
      ...context.rowData,
      id: context.adaptableApi.gridApi.getRowCount() + 1,
    }),
  },
  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…

AdapTable Resources

PreviousAction Columns NextToggles