Tabulator: reformat cell on 'cellEdited' event

Question

I am new at using Tabulator.js but I am willing to learn and use it deeply. I was indeed looking for a good tableGenerator library for a main project. So far, it seems to be pretty nice. I am currently using a CND link for version 5.0.7.

Now here is my problem: I try to format cell with a background-color depending on the cell value (the cell name is status and the value can be either true or false). It works at the creation of the table. But it doesn't work if I change the cell value afterwards.

I created a method called statusFormatter:

statusFormatter: (cell) => {

        if (cell.getValue() == true) {
            cell.getElement().style.backgroundColor = "#A6A6DF";
        }

        return cell.getValue();
},

I call this method on the cellEdited event:

mainTable.on("cellEdited", function (cell) {
    clientTabulator.statusFormatter(cell);
});

I suppose there is something wrong with the return in the method. But I don't know what to return when it is the style that I need.

Hope someone can help...

Answer 1

Change your statusFormatter function as

statusFormatter: function (cell, formatterParams, onRendered) {
  
  let position = cell.getRow().getPosition();

  // switch row even and  odd color
  let backgroundColor = cell.getValue() ? "#A6A6DF" : position % 2 ? "#efefef" : "#fff";
  cell.getElement().style.backgroundColor = backgroundColor;

  return cell.getValue();

}