Passing the cell variable into the onclick method of a custom icon event Tabulator

Question

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

Answer 1

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.