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);
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]
}));
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]
}));
Ok, I removed the cell renderer and moved the updating into the tableView.on('rendered') function and it works.
@denzelchung please post the updated code as answer and accept the same to assist others facing same issue.