Action Column Command Buttons

Summary

Action Column Buttons can display dedicated Commands to handle the most frequent use cases
Most of these leverage the Row Form when clicked

Action Column Buttons can be provided with a Command as an alternative to wiring up onClick.

Note

These are designed to cater for the most common use cases, to reduce development overhead

AdapTable provides 4 Action Column Commands:

Command	Action when Clicked
`create`	Opens a `Create` Row Form
`clone`	Opens a `Clone` Row Form
`edit`	Opens an `Edit` Row Form
`delete`	Deletes the row using row deletion function in GridApi

Action Column Commands

Fork Fork

This demo includes an Action Column (named Actions) which contains 3 buttons that are configured with Action Column Commands:
- Clone
- Edit
- Delete

Pinning Command Buttons

Action Columns, like all columns in AdapTable, can leverage standard Column Pinning.

This will ensure that the Column containing the Command is always visible.

Action Column Commands Pinned

Fork Fork

This demo provides 2 Action Columns which contain an Edit and Delete Action Command respectively
The Edit Column is pinned to the left and the Delete Column is pinned to the right
Because they are "normal" buttons we were able to add a label (of "Edit") to the first button

Configuring Command Buttons

Action Column Command Buttons can be configured in exactly the same way as 'normal' buttons.

They can be given a label, tone, variant or custom icon, and can be disabled or hidden.

Note

The only difference is that if no icon is provided, AdapTable will use a default one

Configuring Action Column Commands

Fork Fork

This demo contains 3 Action Column Commands with some custom configuration:
- The clone button is hidden when the Language is 'JavaScript' (and has a custom icon)
- The edit button is disabled when the Language is 'HTML'
- The delete button tone is different when the Language is 'TypeScript'

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Commands',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        friendlyName: 'Actions',
        actionColumnButton: [
          {
            command: 'clone',
            icon: {
              // if this not provided then nothing shows in first row!!!
              name: 'pie-chart',
            },
            hidden: (
              button: AdaptableButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              return context.rowNode.data?.language == 'TypeScript';
            },
          },
          {
            command: 'edit',
            disabled: (
              button: AdaptableButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              return context.rowNode.data?.language == 'HTML';
            },
          },
          {
            command: 'delete',
            buttonStyle: (
              button: AdaptableButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              return {
                variant: 'text',
                tone:
                  context.rowNode.data?.language == 'JavaScript'
                    ? 'info'
                    : 'error',
              };
            },
          },
        ],
      },
    ],
  },
  rowFormOptions: {
    autoHandle: true,
    disableInlineEditing: true,
    setPrimaryKeyValue: context => {
      return {
        ...context.rowData,
        id: context.adaptableApi.gridApi.getRowCount() + 1,
      };
    },
  },

  initialState: {
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'action',
            'name',
            'github_stars',
            'update_stars',
            'week_issue_change',
            'update_issues',
            'github_watchers',
            'license',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousAction Columns NextConfiguring Action Columns