Adaptable Buttons

An AdapTable Button is designed to be extremely configurable and styleable.

It contains many optional properties which can be provided as required.

The properties that use a function always receive the same 2 parameters when invoked (and returns an appropriate value):

• the button itself (with a generic ButtonContext)
• an appropriate ButtonContext (matching the one of the Button)

Button Properties

The Adaptable Button has a number of properties and is defined as follows:

onClick

onClick is the function which is called when the Button is clicked and returns void:

onClick?: (button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => void;

label

The text to show as the Button's caption.

The property can return either a string or a function which returns a string:

label?: string |
  (((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => string);

buttonStyle

Provides the Button Style for the Button.

The property can return either a ButtonStyle object or a function which returns a ButtonStyle:

buttonStyle?: ButtonStyle |
  ((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => ButtonStyle);

toolTip

The text to use as the Button's Tooltip.

The property can return either a string or a function which returns a string:

toolTip?: string |
  ((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => string);

hidden

Function that returns whether or not the Button will display.

The function is invoked when the Button is about to be rendered - allowing you to decide whether it should display - and returns a boolean:

hidden?: (button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => boolean;

disabled

Function that disables / enables the button based on its evaluation result:

disabled?: (button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => boolean;

icon

The property can return either an AdaptableIcon or a function which returns an AdaptableIcon:

icon?: AdaptableIcon | ((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => AdaptableIcon);

iconPosition

Where the icon appears relative to the label when the button is rendered inline (Dashboard, Toolbars, Action Columns, Forms):

iconPosition?: 'start' | 'end';

Where buttons appear

All surfaces use the same Adaptable Button type, rendered by a shared internal component so behaviour stays consistent.

You can always override via buttonStyle on the button itself.

Serializable click handlers (Alerts)

For buttons whose logic cannot live in JSON state (because onClick is a function), use named handlers in options — the same pattern as Alert commandHandlers:

alertOptions: {
  commandHandlers: [
    {
      name: 'acknowledge',
      handler: (button, context) => { /* ... */ },
    },
  ],
},

Alert form buttons in state reference the handler by name; AdapTable resolves it at runtime. Action Column command values (edit, delete, clone, create) work the same way for row forms.

Button Style

AdapTable provides a ButtonStyle object which defines how a Button will be visually rendered.

The object has 3 properties:

Button Contexts

All the functions that the Button can receive, include a Context parameter.

Each implementation of the Adaptable Button in AdapTable will be provided with its own, bespoke, context property that contains information relevant to that particular use case.

button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE

There are 8 Context Types - for 8 different use cases where Adaptable Buttons are provided: