Action Column Menus

View as Markdown

Summary

A menu Control puts a whole set of row actions behind one compact button in a cell
Run-time users get every action they need, right on the row, without a cluttered Grid
Menus can contain any Action Column Control (Buttons, Commands, Forms, even other Menus)
Choose a Dropdown (one button that opens a list) or a Split Button (a main action plus a list of extras)

Rows often need more actions than a cell has room for: edit, clone, delete, approve, reprice, escalate...

Showing each as its own button quickly makes the Grid cramped and noisy.

The Action Column menu Control solves this by grouping those actions behind a single button in the cell.

Run-time users click it to see every available action for that row, and pick the one they want.

Why use an Action Column Menu in AdapTable?

Keeps the Grid clean: one small button per row instead of a row of icons
Scales with your workflow: add new actions to the menu without widening the Column
Actions stay in context: users act on row they're looking at, with no need to select it first or look elsewhere in UI
Mix and match: one menu can combine custom Buttons, built-in Commands (edit, clone, delete) and Forms
Organise complex actions: nest menus inside menus to group related actions (e.g. an "Export" sub-menu)

The items in the menu are provided in the controls array.

This can include any ActionColumnControl, including nested menus.

AdapTable offers 2 styles of Menu, set via the variant property.

The choice depends on whether one action is used much more often than the others:

Style	`variant`	What the user sees	Best when
Dropdown	`dropdown` (default)	A single button; clicking it opens the list of actions	All the actions are roughly equally important
Split Button	`split`	A button that runs the main action straight away, plus a small arrow for the rest	One action is used most of the time (e.g. Edit)

Hint

A Split Button saves users a click on the action they use most, while still keeping the less common actions close by

A Dropdown is a single labelled button in the cell. Clicking it opens a list of all the actions in controls and the user picks one.

It is the default style, and the natural choice when no one action stands out from the others.

Developer Guide

Defining a Dropdown Menu

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'update_change',
      friendlyName: 'Change',
      controls: [
        {
          type: 'menu',
          label: 'Change',
          variant: 'dropdown',
          controls: [
            {
              type: 'button',
              label: 'Increment',
              icon: {name: 'plus'},
              onClick: (context) => bumpIssueChange(context, 1),
            },
            {
              type: 'button',
              label: 'Decrement',
              icon: {name: 'minus'},
              onClick: (context) => bumpIssueChange(context, -1),
            },
          ],
        },
      ],
    },
  ],
},

Add Action Column Options

Put the Column in actionColumnOptions.actionColumns.

Identify the Column

Supply columnId and an optional friendlyName.

Set the Control type

Set type to 'menu' and give the trigger a label.

Choose the variant

dropdown (the default) shows a single button that opens the list. Use split instead when one action should run with a single click.

Add the menu items

controls is the menu body. Here two Buttons increment or decrement a cell.

Provide the onClick function

This configures what happens when the menu item is clicked.

In our example we increment or decrement a cell.

Change is a dropdown with increment / decrement Buttons
Manage is a dropdown with edit and delete Commands

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 Column Menu',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'update_change',
        friendlyName: 'Change',
        settings: {autoWidth: true, minWidth: 110},
        controls: [
          {
            type: 'menu',
            label: 'Change',
            variant: 'dropdown',
            controls: [
              {
                type: 'button',
                label: 'Increment',
                icon: {name: 'plus'},
                onClick: context => bumpIssueChange(context, 1),
              },
              {
                type: 'button',
                label: 'Decrement',
                icon: {name: 'minus'},
                onClick: context => bumpIssueChange(context, -1),
              },
            ],
          },
        ],
      },
      {
        columnId: 'row_actions',
        friendlyName: 'Manage',
        settings: {autoWidth: true, minWidth: 110},
        controls: [
          {
            type: 'menu',
            label: 'Manage',
            variant: 'dropdown',
            controls: [
              {type: 'command', command: 'edit', label: 'Edit'},
              {
                type: 'command',
                command: 'delete',
                label: 'Delete',
                confirm: {
                  title: 'Delete row?',
                  tone: 'danger',
                },
              },
            ],
          },
        ],
      },
    ],
  },
  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_change',
            'language',
            'license',
            'row_actions',
          ],
          ColumnPinning: {row_actions: 'right'},
          AutoSizeColumns: true,
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flash-issue-change',
          Scope: {
            DataTypes: ['number'],
          },
          Rule: 'ANY_CHANGE()',
        },
      ],
    },
  },
};

Read-only

Loading demo…

Split button

A Split Button is a button in 2 parts, familiar from applications like Outlook and Excel:

The main part runs the most common action immediately, in one click
A small arrow (chevron) beside it opens a list of the other, less frequent actions

This gives users the fastest possible route to what they do most, without hiding everything else.

To create one, set variant to 'split', provide the main action in primary, and put the extra actions in controls.

Developer Guide

Defining a Split Menu

{
  type: 'menu',
  variant: 'split',
  primary: {
    type: 'command',
    command: 'edit',
    label: 'Edit',
  },
  controls: [
    {type: 'command', command: 'clone', label: 'Clone'},
    {
      type: 'command',
      command: 'delete',
      label: 'Delete',
      confirm: {title: 'Delete row?', tone: 'danger'},
    },
  ],
}

Set type and variant

type is 'menu' and variant is 'split'.

Provide the primary Control

primary is the directly-clickable action — here an edit Command.

Add the chevron items

controls are the extra actions opened by the chevron.

Action Columns: Split Menu

Fork Fork

The main part of the Control runs edit
The chevron opens clone and delete

Loading demo…

AdapTable Resources

PreviousCommands NextForms

Action Column Menus

Summary

Why use an Action Column Menu in AdapTable?

Menu Styles

Hint

Dropdown

Developer Guide

Defining a Dropdown Menu

Split button

Developer Guide

Defining a Split Menu

AdapTable Resources