Tabulator cells don't get formatting when not in view/lose formatting when scrolled out of view

I would like to highlight edited cells in my table. It works for the most part until around the 50 row mark, where no formatting changes seem to be applied. If I leave the window scrolled down to the bottom of the table, and leave it for a while and come back and scroll up, then some of the rows that previously had the highlighted background also lose their formatting. I would like to have the highlighted effect work on all rows in the table, and to persist until the table is reloaded.

My code to do this is:

var cellEditHighlight = function(cell){
    var cellInitialValue = cell.getInitialValue();
    var cellValue = cell.getValue();
    if (!(cellInitialValue == null && cellValue == "") && (cellValue != cellInitialValue)) {
        cell.getElement().style.backgroundColor = "#FFFF00";
    }
};
table.on("cellEdited", cellEditHighlight);

There is also a form used to update multiple rows at once. Its submit function looks like this:

const inputValue = document.getElementById('itemNumberInput').value;
const rows = table.getSelectedRows();
rows.forEach(function(row) {
    if (row.getData().status != "Complete") {
        if (inputValue) { 
            row.update({"itemNumber":inputValue});
            cellEditHighlight(row.getCell("itemNumber")); //row.update does not trigger cellEdited event
        }
    }
}

Solution

This is happening because Tabulator uses a virtual DOM, which means that the rows are created and destroyed as they are scrolled, so your changes will not persist through the UI refresh.

The correct approach would be to use a custom formatter that sets the colour, this will automatically be triggered to run when the cells value is updated.

//define custom formatter
var customFormatter = function(cell){
    var cellValue  = cell.getValue();

    if (!(cellInitialValue == null && cellValue == "") && (cellValue != cellInitialValue)) {
        cell.getElement().style.backgroundColor = "#FFFF00";
    }else{
        //ensure you can remove the background if the value changes back to empty
        cell.getElement().style.backgroundColor = "";
    }
    
    // make sure you return the value of the cell for display
    return cellValue;
}

//use formatter in column definition for editable cell
var table = new Tabulator("#example-table", {
    columns:[
        {title:"Example", field:"example", editor:"input", formatter:customFormatter}
    ]
});