Rendering Cells after updating values

[denzelchung]

I have a table in my dashboard and the values are updated in JS. For example, if row 1 has the value "DOWN", then row 5 might be affected and it should be updated to "PARTIALLY DOWN".

After the values have been updated, I want to highlight the rows based on their values. "DOWN" should be in red, "PARTIALLY DOWN" in orange, etc.

However, I'm having a problem trying to only render the cells after the values have been updated.
I have tried the following where I added a timeout so that the cells will only be rendered after the values in the table have been updated but it highlights based on the old value.

setTimeout(function() {
    // Register custom cell renderer, the table will re-render automatically
    tableView.addCellRenderer(new CustomRangeRenderer());
    tableView.render();
}, 1000);

[denzelchung · Accepted solution]

Fixed it.

Instead of using a cell renderer, I did the updating in the tableView.on('rendered') function.
In there, after updating affected table values to "PARTIALLY DOWN", I added a class to the tag.

// update css - classToAdd is a variable defined elsewhere with a value set
valueTd.addClass(classToAdd).addClass("icon-inline");
// update text
valueTd.html(_.template(' <i></i>', {
    icon: icon,
    text: dict[key]
}));

[denzelchung]

Ok, I removed the cell renderer and moved the updating into the tableView.on('rendered') function and it works.

[niketnilay]

@denzelchung please post the updated code as answer and accept the same to assist others facing same issue.