I'm using Tabulator to create tables. I have a delete icon (custom trash icon) for every row. But triggering onclick event on the custom icon isn't working.
Here is my code:
{formatter: deleteBtn, title:"Action"}
let deleteCallback = function(e, cell) {
cell.getRow().delete();
};
let deleteBtn = function(cell, formatterParams, onRendered) {
return `<span onclick="deleteCallback('${cell}')"><i class="fa fa-trash"></i></span>`;
};
The button is displayed correctly. However, when I click the button, I get an error stating: Uncaught TypeError: Cannot read properties of undefined (reading 'getRow'). Basically cell is undefined.
There is an cellClick event which triggers action however I don't want that. I would like the button inside the cell to be clicked rather than the cell itself.
How do I get this to work?
Thanks
You can define your own deleteButton formatter as.
Tabulator.extendModule(
"format",
"formatters",
(function () {
return {
deleteButton: function (cell) {
const deleteCallback = () => {
cell.getRow().delete();
};
let span = document.createElement("span");
let icon = document.createElement("i");
icon.className = "fa fa-trash-o";
icon.addEventListener("click", deleteCallback);
span.append(icon);
return span;
},
};
})());
Here is a working codepen for you
Still I suggest to use "eventDelegation" for your code.