This only works if you update your ui-table by commands!
I researched a while to get my tables show dynamic updates of cells visually:
In the end the solution is quite simple.
A template node to define your css animation: keyframes and class (added to head section)
<style>
@keyframes highlightUpdate {
from {background-color: #ff0000ff;}
to {background-color: #ff000000;}
}
.run-highlightUpdate {
animation: highlightUpdate 2s ease;
}
</style>
you can be very creative here .... this one is very simple background fade
The animation can be triggered globally by a rowUpdated callback function defined by msg.ui_control.tabulator.rowUpdated
function(row) {
row.getCells().forEach(cell => {
let oldValue = cell.getOldValue();
if (oldValue!== null && cell.getValue()!=oldValue){
let element = cell.getElement();
element.classList.remove("run-highlightUpdate");
void element.offsetWidth;
element.classList.add("run-highlightUpdate");
}
});
}
There is no cellUpdated callback available so it has to loop through all cells in a row and looks if one of them is updated
or you can use a custom formatter if you like to limit the highlight animation only to certain columns or run different animations to individual columns.
function(cell, formatterParams, onRendered) {
var html = cell.getValue();
if (html!==cell.getOldValue()) {
var element = cell.getElement();
element.classList.remove("run-highlightUpdate");
void element.offsetWidth;
element.classList.add("run-highlightUpdate");
}
// do your formating of the html variable here
return html;
}
For me the challenge was to "restart" the animation on every update ... after a lot of searching and try and error removing the class and forcing a "kind of" reflow with element.offsetWidth; finally does the trick.
Open and grateful for better solutions!
