# Ui-table: highlight updated cells with animations

**URL:** <https://discourse.nodered.org/t/ui-table-highlight-updated-cells-with-animations/49333>\
**Category:** Dashboard\
**Created:** [4 August 2021 16:00 UTC](https://discourse.nodered.org/t/ui-table-highlight-updated-cells-with-animations/49333 "2021-08-04T16:00:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [4 August 2021 16:00 UTC](https://discourse.nodered.org/t/ui-table-highlight-updated-cells-with-animations/49333/1 "2021-08-04T16:00:35Z")

</div>

**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:

![Vau0YjVNiM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/1/01dd2b7dfbaeeae13f684e2c1fa52f614a697a77.gif)

In the end the solution is quite simple.

A template node to define your css animation: keyframes and class (added to head section)

```auto
<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`

```auto
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.

```auto
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!

---

<div class="post-metadata">

**Author:** ![achrafb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/achrafb/32/45607_2.png) [@achrafb](https://discourse.nodered.org/u/achrafb)\
**Post date:** [7 August 2021 22:02 UTC](https://discourse.nodered.org/t/ui-table-highlight-updated-cells-with-animations/49333/2 "2021-08-07T22:02:26Z")

</div>

Thanks @Christian-Me ! just what I was looking for. 🙂

![auto update3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/34030c9be521da94ac111ccc9d7cdefc30fd7f7a.gif)

Achraf B.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [9 August 2021 20:36 UTC](https://discourse.nodered.org/t/ui-table-highlight-updated-cells-with-animations/49333/3 "2021-08-09T20:36:41Z")

</div>

This is indeed a cool addition to ui-table. Thanx for sharing @Christian-Me

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 September 2021 20:37 UTC](https://discourse.nodered.org/t/ui-table-highlight-updated-cells-with-animations/49333/4 "2021-09-08T20:37:42Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.