Action Columns Demo

AdapTable provides an Action Column function that allows you to specify (and optionally render) a button to be placed in a column.

When the button is clicked an On('ActionColumnClicked') event fires, providing details of which column was clicked and the current data in its row.

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

There are 2 optional functions you can provide for an Action Column (both of which you reference in Predefined Config , but provide the actual implementation in UserFunctions) :

  • ShouldRenderPredicate - this will return true or false to determine whether the button will be displayed.
  • RenderFunction - this allows you to create a button that matches your style and requirements - and allows you to provide differently styled buttons depending on the data in each row.

Here we created Plus and Minus Action Columns; in the onActionColumnClicked event handler we update the Item Count column (though we do also have a Plus/Minus Function).

We also created a Multiply Action Column which updates the Item Cost column. We supplied a ShouldRenderPredicate to say the button shouldn't appear if Employee is 'Margaret Peacock', and a RenderFunction to say that we double if the Employee is 'Robert King' or 'Janet Leverling' and treble it otherwise.

Lastly we created an Action column with the text Delete Row and does exactly that.

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

AdapTable Help Resources:

Generating dummy data, please wait ...