Action Column Toggles

Summary

A toggle Control is bound to a boolean on the row
Use field for automatic read/write (like command shortcuts) or value / onChange for custom behaviour
variant is switch (default), checkbox, or button

A toggle Control is for an immediate on/off action — active / suspended, has wiki, starred, and so on.

The simplest form sets field to the row data property. AdapTable reads the current value and writes changes back for you — the same shortcut idea as command: 'edit'.

Use value and onChange when you need custom logic (async saves, side effects, writing a different property, and so on).

Note

field is the row data property, not the Action Column's columnId. The Action Column is a separate synthetic column (for example wiki_toggle) that displays the control; field: 'has_wiki' is the boolean it reads and writes.

variant is one of:

Variant	Rendering
`switch`	Sliding on/off switch (default)
`checkbox`	Compact checkbox
`button`	Pressed / unpressed toggle button (good with an `icon`)

Developer Guide

Defining a Toggle Control

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'wiki_toggle',
      friendlyName: 'Wiki',
      controls: [
        {
          type: 'toggle',
          field: 'has_wiki',
          variant: 'switch',
          tooltip: 'Toggle Has Wiki',
        },
      ],
    },
  ],
},

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 'toggle'.

Bind to a row field

Set field to the boolean property on the row. AdapTable handles read and write.

Choose a variant

switch is the default. Use checkbox for a compact control, or button with an icon.

Custom handlers

When you need bespoke behaviour, omit field and supply value and onChange instead.

Developer Guide

Defining a Toggle with Custom Handlers

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'pages_toggle',
      friendlyName: 'Pages',
      controls: [
        {
          type: 'toggle',
          variant: 'checkbox',
          label: 'Pages',
          tooltip: 'Toggle Has Pages',
          value: (context) => Boolean(context.data.has_pages),
          onChange: (checked, context) => {
            context.adaptableApi.gridApi.setCellValue({
              columnId: 'has_pages',
              newValue: checked,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            });
          },
        },
      ],
    },
  ],
},

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 'toggle'.

Bind the current value

value reads the boolean from the row.

Handle the change

onChange receives the new checked state. Use gridApi.setCellValue to write it back.

Choose a variant

checkbox suits a labelled control; button works well with an icon.

Action Columns: Toggle

Fork Fork

Wiki — switch with field: 'has_wiki'; the Has Wiki data column is in the layout so you can see both update together
Pages — checkbox with custom value / onChange via gridApi.setCellValue (no Has Pages column shown)
Projects — button variant with a folder icon and custom handlers (no Has Projects column shown)

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

const setBooleanField = (
  context: ActionColumnContext<WebFramework>,
  columnId: 'has_pages' | 'has_projects',
  newValue: boolean
) => {
  context.adaptableApi.gridApi.setCellValue({
    columnId,
    newValue,
    primaryKeyValue: context.primaryKeyValue,
    rowNode: context.rowNode,
  });
};

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Toggle',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'wiki_toggle',
        friendlyName: 'Wiki',
        settings: {width: 80, suppressMenu: true, resizable: false},
        controls: [
          {
            type: 'toggle',
            variant: 'switch',
            field: 'has_wiki',
            tooltip: 'Toggle Has Wiki',
          },
        ],
      },
      {
        columnId: 'pages_toggle',
        friendlyName: 'Pages',
        settings: {width: 100, suppressMenu: true, resizable: false},
        controls: [
          {
            type: 'toggle',
            variant: 'checkbox',
            label: 'Pages',
            tooltip: 'Toggle Has Pages',
            value: context => Boolean(context.data?.has_pages),
            onChange: (checked, context) =>
              setBooleanField(context, 'has_pages', checked),
          },
        ],
      },
      {
        columnId: 'projects_toggle',
        friendlyName: 'Projects',
        settings: {width: 72, suppressMenu: true, resizable: false},
        controls: [
          {
            type: 'toggle',
            variant: 'button',
            icon: {name: 'folder'},
            tooltip: 'Toggle Has Projects',
            value: context => Boolean(context.data?.has_projects),
            onChange: (checked, context) =>
              setBooleanField(context, 'has_projects', checked),
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'has_wiki',
            'wiki_toggle',
            'pages_toggle',
            'projects_toggle',
            'github_stars',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Read-only

Loading demo…

AdapTable Resources

PreviousButtons NextLinks