Action Column Config

The Predefined Configuration for the Action Column function

Action Column State

ActionColumnsArray of Action Columns which Adaptable will dynamically render.

Action Column Object

ButtonTextThe text to display on the button (its caption) when rendered automatically by Adaptable. There is no need to set this property if the Button is being rendered using the RenderFunction
ColumnIdMandatory 'Id' of the Action Column; if no value is set for the FriendlyName property, this will also be the name of the Column (e.g. what appears in the Column Header)
FriendlyNameThe name of the Column, ie. what appears in the Column Header and elswewhere where the Column is referenced in the UI. (If no value is set here then the ColumnId property is used).
RenderFunctionA function that returns a string giving full render contents of the Button that should display in the cell; if not set, a regular button appears.
ShouldRenderPredicateA Predicate function returning a boolean value indicating whether the Action Column should display a button.

User Functions

There are 2 Custom User Functions in the Action Column properties:

  • Render Function - enables the Action Column to be rendered according to Users 'precise requirements
  • ShouldRenderPredicate - provides ability to evaluate for each Row whether Action Column is visible


// Predefined Config
export default {
ActionColumn: {
ActionColumns: [
ColumnId: 'Action',
ButtonText: 'Click',
ShouldRenderPredicate: 'action',
RenderFunction: 'action',
} as PredefinedConfig;
// Adaptable Options
const adaptableOptions: AdaptableOptions = {
userFunctions: [
type: 'ActionColumnRenderFunction',
name: 'action',
handler(params: ActionColumnRenderParams) {
let data: number = params.rowData.notional;
return data > 50
? '<button class="doublebutton">Double</button>'
: '<button class="treblebutton">Treble</button>';
type: 'ActionColumnShouldRenderPredicate',
name: 'action',
handler(params) {
return params.rowData.counterparty != 'BAML';
// we listen to the `ActionColumnClicked` event (via the eventApi in Adaptable Api) and then act accordingly
api.eventApi.on('ActionColumnClicked', (args: ActionColumnClickedEventArgs) => {
// do stuff...

More Information