Action Columns Demo

AdapTable provides an Action Column which wraps the Adaptable Button object in helpful ways.

Each AdapTable Button can be individually styled, and contains 3 JavaScript functions (povided at design-time) which AdapTable will invoke when required:

  • onClick (mandatory): What should happen when the Button is clicked
  • hidden: Whether or not the Button is visible
  • disabled: Whether or not the Button is enabled
A button also contains 2 properties that can either be supplied either as a value or via a provided JavaScript function:
  • label: what the button will show
  • buttonStyle: how the button appears

In this example we created 4 Action Columns:

  • Plus and Minus: the clicked function will update the Item Count column (though we do also have a Plus/Minus Module).
  • Action: which renders a Delete Row and does exactly that.
  • Multiply: updates the value of the Item Cost column using a number of functions:
    • label: either 'Double' or 'Treble' depending on the Employee
    • buttonStyle: either green or blue depending on the Employee (using same logic as Label)
    • onClick: doubles or trebles the cell value depending on the Employee (using the same logic as Label)
    • hidden: hides the button if the 'Employee' is 'Margaret Peacock'
    • disabled: disabled the button if the 'ItemCost' is less than 10

Note: the delete row and all the cell updates are performed by using various functions available in the gridApi section of AdaptableApi.

AdapTable Help Resources:

Generating dummy data, please wait ...