Tabulator.js: cellClick callback is not fired when clicking a checkbox

Question

I need to recalculate the table by calling recal after a row was selected by check box. If it is selected by clicking the row calling recal works. I copied the below code from plugin site

  {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
    console.log("table ",table);
     // cell.getRow().toggleSelect();
    console.log("table ",table);        
    table.recalc();
  }},

but nothing gets executed. The checkbox gets checked and the row highlighted. You can try my jsFiddle.

UPDATE 1 so it works if I click off the checkbox but I want the function to be triggered when the checkbox is clicked.

Answer 1

As the name suggest cellClick which should be called on cell element click there is another element which is considered cell and checkbox is contained inside cell that's why cellClick is not trigger when you click checkbox and triggered when click outside of checkbox

1. Issue
   As Suggested by @EugeneOlisevich instead of listening to cellClick , Listening to rowSelectionChanged would be better option.

   Instead of using table to call recalc as table reference is not created until first load completes.

   Another way you can access recalc function is through this

...
rowSelectionChanged: function(e, row) {
    this.recalc();
},
...

2. Issue
   When you click editable column if row is selected then it will deselect the row
   which can be solve by preventing event bubbling to parent through cellClick function.

...
{
    title: "mn",
    field: "mn",
    editor: "number",
    cellEdited: function(cell) {
        aktualizuj_m(cell);
    },
    cellClick: function(e, cell) {
        e.preventDefault();
        e.stopPropagation();
    },
},
...

3. Issue
   As table reference is not created on first load here i added condition to not run loop until table reference is undefined / null

table && values.forEach(function(value, index) {
    var row = table.getRow(index + 1);
    if (row.isSelected() && value) {
      calc = calc + value;
    }
});

4. Issue
   If you change mn column input to 0 then sum is not updated which can be solved by updating condition.

...
if (typeof mnozstvi == "number") {
    cell.getRow().update({
      cena_m: cena * mnozstvi
    });
}
...

Note: Negative range can be input in mn column

Here working example

Answer 2

You can try to use another event handler instead of listening to direct cell click or row selection (or it depends on behaviour you want)

Here is the link to fiddle to check the solution: https://jsfiddle.net/02phqxz8/

...,
rowSelectionChanged:function(data, rows) {
    if(table) {
    table.recalc();
  }
},
...

What was changed: Instead you can handle rowSelectionChanged event. Every time it is called, by clicking row, or clicking checkbox you can call recalculate for table. Just be sure to check teh table object by default, because the event is fired prior the constuctor return tha table itself. Or as an option to avoid this additoinal check every time, you can subscribe to this event right after table is created.

Answer 3

You can use rowSelectionChanged

rowSelectionChanged:function(data, rows) {
    if (updatedDataLength != data.length) {
       updatedDataLength = data.length;
       table.recalc();
    }
},

var updatedDataLength = 0;

You need to add a local variable that could check data changed because the first time the table rendered, it will also call table.recalc() that will cause a problem of rendering the initial table. So I suggest using to check updated data length to keep it simple rather than comparing whole data.

---

Or you can just add a flag var tableRendered = false; .

rowSelectionChanged: function(data, rows) {
      if (!tableRendered) {
         tableRendered = true;
      } else {
         table.recalc();
      }
    },