Skip to content
Advertisement

put two or more buttons in one column in Tabolator Javascript lib

as title i want to make a column like this

enter image description here

if i press editBt, editBt and delBt will change to updateBt and cancelBt in the same column and the row will be editable

if press or updateBt or cancelBt, updateBt and cancelBt will change back to editBt and delBt and the row will be readonly

i’ve been told by some way to do it like:

JavaScript

but then i cant use functions lib provided (editable row)

is there any way to do this or alternative one?

Advertisement

Answer

To start with i am going to assume that the editRow, delRow, updateRow and cancelRow functions outlined in your example are external functions that you have already coded as they are not part of Tabulator.

Rather than returning static HTML from the formatter, it would be better to create the button elements using document.createElement() and then binding event listeners to them, you can then pass the Cell Component or Row Component into your other functions, which will give you full control over the row, passing this into your functions would pass the whole table object, which would not help you in knowing which row was being edited.

JavaScript

Inside the addEventListener function for each of the buttons you could then add logic to add and remove other buttons as needed. For example to make clicking the edit but show the update and cancel buttons:

JavaScript
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement