'Tabulator: What callback(s) occur after cellEdited?

I am implementing logic to filter rows based on a rowState property in row.data {unchanged, changed, new, deleted}. When a cell is edited, If the row is not a new row, it's rowState is changed to 3 (indicating a changed row). showChanged is set to false, so the row should disappear as soon as rowState changes to 3.

At the end of cellEdited, I am making a call to updateFilters(). My issue is that the filter is not applying to the row containing the edited cell. I think that this is because the changes to rowState don't actually go into effect until the cellEdited callback is finished. Is there a callback that occurs after cellEdited so that I can effectively apply filtering at the time of edits?

  public showOriginal: boolean = true;
  public showChanged: boolean = false;
  public showNew: boolean = false;
  public showDeleted: boolean = false;
  public showNewDeleted: boolean = false;

private drawTable(): void {
    this.table = new Tabulator(this.tab, {
      rowFormatter: this.rowStateFormatter,
      cellClick:function(e, cell){
        if(!cell.valueAtLoad){
          cell.valueAtLoad = cell._cell.value;
        }
        console.log(cell);
      },
      cellEdited:function(cell){
        
        var row = cell._cell.row;
        var columnName = cell.getColumn()._column.field;
        
        //new Value is different from original value;
        if(cell._cell.value != cell.valueAtLoad){   
          if(!row.changedCells){
            row.changedCells = [];
          }
          row.changedCells.push(columnName);
        }
        //new Value is same as original value;
        else {
          if(row.changedCells){
            if(row.changedCells.find(f => f == columnName)){
              row.changedCells.pop(columnName);
            }
          }
          console.log(row);
        }

        //Set rowState + background Color
        if(row.changedCells.length >= 1){ //If row has changes
          if(!row.data["isNewRow"]) { //if row has changes and is original row
            row.data["rowState"] = 3;
            row.getElement().style.backgroundColor = "#A6A6DF";
          }
        }
        else{
          row.getElement().style.backgroundColor = "";
        }
        this.updateFilters();
      },
      layout: "fitDataStretch",
      movableColumns: true,
      height: "100%",
      pagination: "local",
      paginationSize: 25,
      paginationSizeSelector: [25, 50, 100],
      selectable: true,
      selectableRangeMode: "click",
      data: this.tabRows,
      columns: this.tabHeaders
    });
    document.getElementById(`${this.tableInfo.id}`).appendChild(this.tab);
  }

private updateFilters(){
    var rowStateFilter = [];
    if(this.showOriginal) {rowStateFilter.push(0); rowStateFilter.push(1)}
    if(this.showNew) {rowStateFilter.push(2)}
    if(this.showChanged) {rowStateFilter.push(3)}
    if(this.showDeleted) {rowStateFilter.push(4)}
    if(this.showNewDeleted) {rowStateFilter.push(5)}
    this.table.setFilter("rowState", "in", rowStateFilter);
  }

Solution 1:^[1]

From the tabulator.js, it looks like :

cell.cellEdited ,table.cellEdited, table.dataChanged

not sure what table.cellEdited is, it looks like a default empty function(). There might be more in the grouping code as well if the cell editing changes that grouping...

if (this.column.cellEvents.cellEdited) {
   this.column.cellEvents.cellEdited.call(this.table, component);
}
if (this.table.options.groupUpdateOnCellEdit && this.table.options.groupBy && this.table.modExists("groupRows")) {
   this.table.modules.groupRows.reassignRowToGroup(this.row);
}
this.cellRendered();
this.table.options.cellEdited.call(this.table, component);
if (this.table.options.dataChanged) {
   this.table.options.dataChanged.call(this.table,this.table.rowManager.getData());
}

Solution 2:^[2]

Which callbacks are fired depends on which modules you have installed on your table (eg the validation module adds events after edit) Luckily, Tabulator comes with debug tools that let you snoop on the events in the console to see which are fired in what order.

Enabling the debugEventsExternal option will cause a console log of all external events, so you can see what event is fired when

var table = new Tabulator("#example-table", {
    debugEventsExternal:true, //console log external events
});

Checkout the Debug Tools Documentation for full details on all the available tools

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Michael O'Keefe
Solution 2	Oli Folkerd

'Tabulator: What callback(s) occur after cellEdited?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]