AdapTable Version:

Framework:

Configuring Action Columns

Summary

Action Columns are defined at Design Time
Each Action Column Button can be configured to meet precise requirements

Defining Action Columns

Action Columns are provided in the actionColumns property of Action Column Options.

actionColumns

ActionColumn[]

Columns which contain an AdapTable Button - used for performing Actions

ActionColumn[]

This property is used for setting Action Columns in AdapTable.

The full definition of the ActionColumn object is as follows:

Property	Description
actionColumnButton	Button (or list of buttons) to display in the Column
actionColumnSettings	Optional properties to configure the Column (e.g. filterable, resizable)
columnId	Mandatory 'Id'; if no value set for `FriendlyName`, this will also be Column name
friendlyName	How Column appears in Column Header, Menus; if no value set, `ColumnId` is used
rowScope	Which types of Rows should contain buttons (i.e. data, grouped, summary)

Developers define 3 main sets of information when providing an Action Column Definition:

Identifiers

Each Action Column has 2 forms of identification:

Id - used internally when referencing the Column in other Objects like Layouts
FriendlyName - used in the UI, e.g. in Wizards

Button

The button(s) is at the heart of the Action Column.

It is an Adaptable Button which means that it can be styled and configured to user requirements.

Deep Dive

The Action Column Button

The actionColumnButton gives developers complete control over button visibility, rendering and behaviour.

Many of these properties are JavaScript functions which receive a Context property.

For Action Buttons this takes the form of an ActionColumnContext which is defined as follows:

Property	Description
actionColumn	Action Column in question
data	The current row's data
primaryKeyValue	Primary Key Value in current row
rowNode	Current AG Grid Row Node
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Settings

The behaviour of each Action Column can be configured also. e.g. width, movable, resizable etc.

Deep Dive

Action Column Settings

The actionColumnSettings property is of type ActionColumnSettings which has these properties:

Property	Description	Default
resizable	Whether Column can be resized (by dragging column header edges)	true
suppressMenu	Whether no menu should be shown for this Column header.	false
suppressMovable	Whether if this Column should be movable via dragging	false
width	Preferred width (in pixels) for Column; if unset, calculated dynamically by AG Grid

Putting it Together

Developer Guide

Defining an Action Column

There are a number of stages to defining an Action Column.

This example is taken from the Update Stars Action Column - in the demo on the previous page.

The Action Column displays a button that will either Add or Remove a Star based on various parameters.

Note

In this example the Action Column contains one button - but there is no limit on the number that can be displayed

// Provide an Update Stars Action Button
// For rows where the language is JavaScript it will:
// Add Star to Stars Column (and display a different style)
// otherwise it will Remove a Star
// We also provide rules whether Button is Visible or Enabled
{
  columnId: 'update_issues',
  friendlyName: 'Update Stars',
  actionColumnSettings:{
    suppressMenu: true,
    suppressMovable: true,
    resizable: false
  },
  actionColumnButton: {
    label: (
      button: ActionColumnButton<ActionColumnContext>,
      context: ActionColumnContext
    ) => {
     let rowData: any = context.rowNode?.data;
     return rowData.language === 'JavaScript'
        ? 'Add Star'
        : 'Remove Star';
    },
    buttonStyle: (
      button: ActionColumnButton<ActionColumnContext>,
      context: ActionColumnContext
    ) => {
      let rowData: any = context.rowNode?.data;
      return rowData.language === 'JavaScript'
        ? {
            variant: 'raised',
            tone: 'accent',
          }
        : {
            variant: 'raised',
            tone: 'success',
          };
    },
    onClick: (
      button: ActionColumnButton<ActionColumnContext>,
      context: ActionColumnContext
    ) => {
      let rowData: any = context.rowNode?.data;
      let increment =
        rowData.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
    ) => {
      let rowData: any = context.rowNode?.data;
      return (
        rowData.name === 'stencil' ||
        rowData.name === 'polymer'
      );
    },
    disabled: (
      button: ActionColumnButton<ActionColumnContext>,
      context: ActionColumnContext
    ) => {
      let rowData: any = context.rowNode?.data;
      return rowData.github_watchers < 200;
    },
  },
},

Provide Identifier Information

Supply 2 string properties:

columnId - how the Column is referred to in Code
friendlyName - the caption for the Column (if not provided the columnId value is used)

Add Column Settings

Use the ActionColumnSettings property to set key Column properties including:

Column Width
Resizable
Movable
Column Menu visibility

In this example we don't show the Column Menu and prevent the column from being moved or resized.

Provide a Label for the Button

The label for the Action Button is a string value that can be:

a hard-coded value
returned from a function (which receives Context)

In this example we provide a function which returns either 'Add Star' or 'Remove Star' depending on other row values

Provide a Button Style

The Action Button style is of type ButtonStyle that can be:

a hard-coded value
returned from a function (which receives Context)

In this example we provide a function which returns 2 different styles depending on other row values

Provide an onClick event

onClick is the function that is invoked when the Action Button is clicked.

In this example it increments or decrements a cell based on the arguments supplied.

Set Button Visibility and Enabled status

Use the 2 boolean hidden and disabled properties to specify whether button is visible and enabled.

Each property can return:

a hard-coded value
returned from a function (which receives Context)

In this example we hide and disable the Button in some rows based on the function evaluation.

AG Grid Column Definitions

In most cases Action Columns are not provided in the ColDefs property in AG Grid GridOptions.

Instead the Action Columns provided in Action Column Options suffice for AdapTable to be able to create the associated AG Grid column automatically.

However sometimes a developer might want to add an AG Grid element to the Action Column.

For instance a tooltip might be needed, or there might be a requirement to put the Action Column inside a Column Group (which is an AG Grid feature).

This is possible: a column can be provided in AG Grid ColDefs but by specifying a Column Type of actionColumn, AdapTable will automatically wire it up with an associated Action Column definition.

Hint

Set the Column Type to be actionColumn
Make sure ColId in the AG Grid ColDef and ColumnId in the Action Column definition are the same value

Find Out More

See Adding Special Column Types for more details and a demo

Action Columns: Defining in AG Grid

Fork Fork

This demo contains an AG Grid Column Group - Actions
The group contains 2 Action Columns for adding and deleting issues
Both the Column Group and the 2 containing Columns were defined in AG Grid Column Defs
The 2 columns in the Group were given AG Grid Header and Cell ToolTips
They were also given a type of actionColumn which is what allowed AdapTable to wire everything together

Expand to see the AG Grid ColDef

The column group and containing columns are defined in AG Grid:

{
  headerName: 'Actions',
  children: [
    {
      colId: 'add_issue',
      cellDataType: 'number'
      type: ['actionColumn'],
      headerTooltip: 'Add an issue',
      tooltipValueGetter: (params: ITooltipParams) => {
        return 'Add 1 to ' + params.data.week_issue_change;
      },
    },
    {
      colId: 'delete_issue',
      type: ['actionColumn'],
      headerTooltip: 'Delete an Issue',
      tooltipValueGetter: (params: ITooltipParams) => {
        return 'Delete 1 from ' + params.data.week_issue_change;
      },
    },
  ],
},

and referenced in Action Column Options:

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'add_issue',
      friendlyName: 'Add Issue',
      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
            );
          },
        },
      ],
    },
    {
      columnId: 'delete_issue',
      friendlyName: 'Delete Issue',
      actionColumnButton: [
        {
          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);
          },
        },
      ],
    },
  ],
},

Try It Out

Hover over a Button in an Action Column and see the Tooltip which AG Grid provides

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Defining Action Columns in AG Grid',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'add_issue',
        friendlyName: 'Add Issue',
        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);
            },
          },
        ],
      },
      {
        columnId: 'delete_issue',
        friendlyName: 'Delete Issue',
        actionColumnButton: [
          {
            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);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'language',
            'week_issue_change',
            'add_issue',
            'delete_issue',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Grouped & Summary Rows

By default Action Columns will appear in every row in AG Grid.

If this behaviour is unwanted, the rowScope property can be used to 3 types of Rows (all visible by default):

Grouped Rows
Summary Rows
Data Rows

Hint

The Action Column contains a Button object, which has a hidden property
This enables a much more granular approach, i.e. to hide an Action Column button on a row-by-row basis

Action Columns: Grouped Rows

Fork Fork

In this example we define an Action Column with the rowScope property set to exclude Grouped Rows and Summary Rows
Accordingly we only see the Add Star Action Column in actual Data Rows

Expand to see the Action Column Definition

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Columns Grouping',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'add_star',
        friendlyName: 'Add Star',
        actionColumnSettings: {
          suppressMenu: true,
          resizable: false,
        },
        rowScope: {
          ExcludeGroupRows: true,
          ExcludeSummaryRows: true,
        },
        actionColumnButton: {
          label: 'Add Star',
          buttonStyle: {
            variant: 'raised',
            tone: 'accent',
          },
          onClick: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            let rowData: any = context.rowNode?.data;

            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: rowData.github_stars + 1,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
        },
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'add_star',
            'week_issue_change',
            'github_watchers',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
          ],
          RowGroupedColumns: ['language'],
          AutoSizeColumns: true,
          RowSummaries: [
            {
              Position: 'Top',
              ColumnsMap: {
                github_stars: 'SUM',
              },
            },
          ],
        },
      ],
    },
  },
};

PreviousAction Column Commands NextTechnical Reference

Framework: