Action Column

The Action Column Function enables the creation of special columns that contain buttons.

Action Columns are created at run-time based on definitions provided by developers at design-time in Predefined Config

How Action Columns work

There are 3 elements to providing an Action Column definition:

  • Clicked Function: What happens when an Action Column button is clicked.
  • Render Function: The contents of the Button that should display in the column.
  • Should Render Predicate: Whether - for any given cell - the Action Column should display its button.

Clicked Function

An implementation for the ActionColumnClicked event which fires when an Action Column button is clicked.

The event provides details of which column was clicked, the current and the data in the row.

tip

you can subscribe to this event and perform any additional logic or functionality that is required.

As with all instances where a JavaScript function needs to be provided, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions

  1. Provide a custom, named UserMenuItemClickedFunction implementation in User Functions section of Adaptable Options.

  2. Reference that function by name in the Action Column section of Predefined Config.

// Predefined Config
export default {
ActionColumn: {
ActionColumns: [
{
ColumnId: 'Action',
ButtonText: 'Click',
},
]
},
} as PredefinedConfig;
// we listen to the `ActionColumnClicked` event (via the eventApi in Adaptable Api) and then act accordingly
api.eventApi.on('ActionColumnClicked', (args: ActionColumnClickedEventArgs) => {
// do stuff...
});

Render Function

This property returns a string giving the full render contents of the Button that should display in the cell.

important

If this property is not set, then a regular button will appear in the column with the caption of the ButtonText property.

As with all instances where a JavaScript function needs to be provided, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions

  1. Provide a custom, named ActionColumnRenderFunction implementation in User Functions section of Adaptable Options.

  2. Reference that function by name in the Action Column section of Predefined Config.

// Predefined Config
export default {
ActionColumn: {
ActionColumns: [
{
ColumnId: 'Action',
ButtonText: 'Click',
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>';
},
},
],

Should Render Predicate

This function returns a boolean value indicating whether - for that cell - the Action Column should display its button.

As with all instances where a JavaScript function needs to be provided, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions

  1. Provide a custom, named ActionColumnShouldRenderPredicate implementation in User Functions section of Adaptable Options.

  2. Reference that function by name in the Action Column section of Predefined Config.

// Predefined Config
export default {
ActionColumn: {
ActionColumns: [
{
ColumnId: 'Action',
ButtonText: 'Click',
ShouldRenderPredicate: 'action',
},
]
},
} as PredefinedConfig;
// Adaptable Options
const adaptableOptions: AdaptableOptions = {
userFunctions: [
{
type: 'ActionColumnShouldRenderPredicate',
name: 'action',
handler(params) {
return params.rowData.counterparty != 'BAML';
},
},
],

UI Elements

None at present - it is provided only at design-time in Adaptable State

Entitlements

Action Column supports these Entitlement Rules:

  • Full: Everything is available to the User

  • Hidden: Everything is hidden from the User

  • ReadOnly: N/A

Action Column Predefined Config

Action Column State is used to defined Action Columns at design-time.

In this example we create a column called 'Delete Trade'.

We provide an implementation for ShouldRenderPredicate to specify that we render only in rows where the Counterparty Column's value is not 'BAML'.

We also provide our own RenderFunction implementation which renders the column differently for rows where the currency is 'USD'.

// 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) {
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...
});

FAQ

Can we choose how to render the button in the Action Column?

Yes. You can provide your own RenderFunction which can return a button that fits your requirements

What happens if I don't want a button in a particular row?

Provide an implementation for optional ShouldRenderPredicate property when you define the Action Column. This will return true / false for each row if the button should be displayed.

How do I know when a button in an Action Column has been clicked?

Each time a button is clicked in an ActionColumn, AdapTable will fire an ActionColumnClicked event. You can listen to this event and respond as appropriate. The args for this event contain the Column, the row and the row node. See the api docs for more information.

Can I delete an Action Column at run time?

No, not at the moment. Action Column is considered to be Design Time State - which means that it is provided by developers as Predefined Config and cannot be overriden and saved by users at Run Time.

Can we create / update / delete Action Columns at Run-Time?

No, they are a Design-Time only Function; they can be accessed at Run-Time but not created or edited.

Why do we need to provide the Function Name and Function Implementation separately?

This is because Predefined Config is stored as (stringified) JSON and so it cannot persist functions.

As a result the convention in AdapTable is for the function name to be provided in Predefined Config but the actual implementation to be supplied in the User Functions section of Adaptable Options.

Further Information