Action Column

An Action Column is an Adaptable Column which wraps an Adaptable Button.

They are provided in the User Interface Options section of Adaptable Options.


Action Columns defined at design-time only: AdapTable will create them when the application starts up

The full definition of the object is as follows:

actionColumnButtonButton to display in the Column
actionColumnSettingsAdditional optional properties for Column (e.g. filterable, resizable)
columnIdMandatory 'Id'; if no value set for FriendlyName, this will also be Column name
friendlyNameHow Column appears in Column Header, Menus; if no value set, ColumnId is used
includeGroupedRowsShows Action Column also in grouped rows

Action Column Buttons

As with all Adaptable Buttons, the button in the Action Column can be styled to user requirements and contains a number of properties to give complete control over visibility, rendering and behaviour of the button:

buttonStyleStyle for Button - can be object or function thats provides a Style object
disabledFunction that disables / enables the button based on its evaluation result
hiddenFunction which sets whether Button is hidden
iconIcon to display, requires string for URL, other props are optional
labelLabel for Button - can be string or function that provides string
onClickFunction to invoke when button is clicked
tooltipTooltip for Button - can be string or function that provides string

Many of these properties can supply functions which receive as Button Context an ActionColumnButtonContext object that is defined as follows:

actionColumnAction Column in question
primaryKeyValuePrimary Key Value in current row
rowNodeCurrent Row Node

Action Column Example

// This example shows a An Action Column
// When the Button is clicked, it will treble the 'Notional' cell value
// The Button won't appear in rows where currency is Dollar
// And will be disabled in rows where the country is France
const adaptableOptions: AdaptableOptions = {
userInterfaceOptions: {
actionColumns: [
columnId: 'Action',
includeGroupedRows: true,
actionColumnButton: {
label: 'Triple',
onClick: (button: AdaptableButton<ActionColumnButtonContext>,
context: ActionColumnButtonContext) => {
const notional =['notional'];
const newNotional = notional * 3
const pkValue = adaptableApi.gridApi.getPrimaryKeyValueForRowNode(context.rowNode);
adaptableApi.gridApi.setCellValue('notional', newNotional, pkValue, true);
hidden: (button: AdaptableButton<ActionColumnButtonContext>,
context: ActionColumnButtonContext) => {
return != 'USD';
disabled: (button: AdaptableButton<ActionColumnButtonContext>,
context: ActionColumnButtonContext) => {
return != 'France';
buttonStyle: {
variant: 'raised',
tone: 'accent',