Skip to content

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

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

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();
},
...
  1. 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();
    },
},
...
  1. 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;
    }
});
  1. 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