# Ui\_table not refreshing. Wanted to know if someone else is able to reproduce the issue

**URL:** https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170
**Category:** General
**Created:** [29 June 2020 14:07 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170 "2020-06-29T14:07:30Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 14:07 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/1 "2020-06-29T14:07:30Z")

</div>

I found a strange behaviour when using the ui\_table node. I can fix the code in two different ways. The first workaround will fix it in definitive but I don´t know why it works. The second way will fix it in a surprising way but when I roll back the solution is not possible to observe the issue again (surprisingly too).

Before I explain the fixes can someone be kind enough to try to confirm the issue. I want to make sure it is not specific to my environment in the the first place.

This is the minimum flow I could write to try to reproduce the issue.

 ![a-1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f3ae07fe5e773388f819caf51d92fe07a936a3f.png)

The first inject node initializes an array of objects and pass it to the ui\_table.  
I added three more inject nodes to be able to modify data dynamically.

At the initialization the table will be populated as below.

 ![a-2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc0ec8eccbc0832119a40416f460d65739c92b80.png)

Now, try to clik on the other inject buttons, one at a time. Do you see any update in the column "Power" in the dashboard while after pressing the last three inject nodes ?

Testing flow:

```auto
[{"id":"23737d07.4f1e22","type":"tab","label":"Flow 8","disabled":false,"info":""},{"id":"cb321e5a.ad2e5","type":"ui_table","z":"23737d07.4f1e22","group":"e18d18ee.a6f4f8","name":"Grid","order":2,"width":"16","height":"6","columns":[],"outputs":0,"cts":false,"x":1230,"y":340,"wires":[]},{"id":"20a7e1d9.0d10de","type":"function","z":"23737d07.4f1e22","name":"Change object","func":"// grid is an array of objects\nlet grid = flow.get(\"gridmem\") || [];\n\n\n// Find index of Sensor\nlet sRow = grid.findIndex(\n (ele,index) => ele.Sensor == msg.payload.Sensor\n);\n\n\n// Add a dynamic prperty to the array element\ngrid[sRow][\"Power\"] = \"voltage * current\";\n\n// store modified array to the context\nflow.set(\"gridmem\", grid);\n\nnode.warn(grid);\n\nmsg.payload = grid; //BAD ?\n\n//msg.payload = [...grid]; // Always OK\n\nreturn msg;","outputs":1,"noerr":0,"x":560,"y":340,"wires":[["db2bbd3.7b40f4","e63ac256.0764f","6e8362f0.ccc5fc","8a75d2a5.2752f"]]},{"id":"ec6b8a10.0f9508","type":"inject","z":"23737d07.4f1e22","name":"Change sensor S1","topic":"","payload":"{\"City\":\"Albany\",\"Sensor\":\"S1\",\"Voltage\":220,\"Current\":10}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":280,"wires":[["20a7e1d9.0d10de"]]},{"id":"e63ac256.0764f","type":"debug","z":"23737d07.4f1e22","name":"","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload[0].Power","targetType":"msg","x":840,"y":400,"wires":[]},{"id":"25908860.5df998","type":"inject","z":"23737d07.4f1e22","name":"Initialize sensors S1, S2, S3","topic":"","payload":"[{\"City\":\"A\",\"Sensor\":\"S1\",\"Voltage\":0,\"Current\":0,\"Power\":0},{\"City\":\"A\",\"Sensor\":\"S2\",\"Voltage\":0,\"Current\":0,\"Power\":0},{\"City\":\"A\",\"Sensor\":\"S3\",\"Voltage\":0,\"Current\":0,\"Power\":0}]","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":360,"y":220,"wires":[["b6b4592.77713a8"]]},{"id":"b6b4592.77713a8","type":"change","z":"23737d07.4f1e22","name":"","rules":[{"t":"set","p":"gridmem","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":220,"wires":[["db2bbd3.7b40f4"]]},{"id":"a030f51d.f62e58","type":"inject","z":"23737d07.4f1e22","name":"Change sensor S2","topic":"","payload":"{\"City\":\"Albany\",\"Sensor\":\"S2\",\"Voltage\":220,\"Current\":20}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":340,"wires":[["20a7e1d9.0d10de"]]},{"id":"b6ae383c.350c28","type":"inject","z":"23737d07.4f1e22","name":"Change sensor S3","topic":"","payload":"{\"City\":\"Albany\",\"Sensor\":\"S3\",\"Voltage\":220,\"Current\":30}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":400,"wires":[["20a7e1d9.0d10de"]]},{"id":"6e8362f0.ccc5fc","type":"debug","z":"23737d07.4f1e22","name":"","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload[1].Power","targetType":"msg","x":840,"y":460,"wires":[]},{"id":"8a75d2a5.2752f","type":"debug","z":"23737d07.4f1e22","name":"","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload[2].Power","targetType":"msg","x":840,"y":520,"wires":[]},{"id":"db2bbd3.7b40f4","type":"change","z":"23737d07.4f1e22","name":"ui_control","rules":[{"t":"set","p":"ui_control.tabulator.columns","pt":"msg","to":"[{\"title\":\"City\",\"field\":\"City\"},{\"title\":\"Sensor\",\"field\":\"Sensor\"},{\"title\":\"Voltage\",\"field\":\"Voltage\"},{\"title\":\"Current\",\"field\":\"Current\"},{\"title\":\"Power\",\"field\":\"Power\"}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":1060,"y":340,"wires":[["cb321e5a.ad2e5"]]},{"id":"e18d18ee.a6f4f8","type":"ui_group","z":"","name":"G2","tab":"783458b.f2fefa8","order":1,"disp":false,"width":"28","collapse":false},{"id":"783458b.f2fefa8","type":"ui_tab","z":"","name":"GRID","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [29 June 2020 14:40 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/2 "2020-06-29T14:40:19Z")

</div>

The function node is not properly updating the flow variable. add this  
`node.warn("grid="+JSON.stringify(grid)) `  
just before you `flow.set` gridmem

I don't see any updates to the table. (macOS - nr 1.0.6 node.js v12.13.0)

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [29 June 2020 14:53 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/3 "2020-06-29T14:53:36Z")

</div>

@Andrei I've been using the `template` node to set up my tables. Try this coming from your `function` nde to the `ui_table`

```auto
[{"id":"fca2f528.50ba9","type":"template","z":"713674da.4fe26c","name":"","field":"ui_control","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n {\n \"title\": \"City\",\n \"field\": \"City\"\n },\n {\n \"title\": \"Sensor\",\n \"field\": \"Sensor\"\n },\n {\n \"title\": \"Voltage\",\n \"field\": \"Voltage\"\n },\n {\n \"title\": \"Current\",\n \"field\": \"Current\"\n },\n {\n \"title\": \"Power\",\n \"field\": \"Power\"\n }\n]\n{\n \"tabulator\": {\n \"layout\": \"fitDataFill\",\n \"columns\": [\n {\n \"title\": \"City\",\n \"field\": \"City\"\n },\n {\n \"title\": \"Sensor\",\n \"field\": \"Sensor\"\n },\n {\n \"title\": \"Voltage\",\n \"field\": \"Voltage\"\n },\n {\n \"title\": \"Current\",\n \"field\": \"Current\"\n },\n {\n \"title\": \"Power\",\n \"field\": \"Power\"\n }\n]\n }\n}","output":"str","x":1060,"y":240,"wires":[["cb9e2edd.ea089"]]}]

```

it also lets me do some interesting things ;ile this function node for setting colors of cells

```auto
var arr = msg.payload

// set the colors to use
var awake_color = "LightGreen"
var offline_color = "LightPink"
var sleep_color = "aqua"
var no_color = "none"

// framework for the html statement
var row_start = "<div style='background-color: "
var row_mid = "'>"
var row_end = "</div>"

var status_html = ''

// loop thru the array and set the cell's background color based on "node_status"
var arr_len = arr.length
for (var i = 0; i < arr_len; i++) {
    switch (arr[i].node_status) {
        case 'online':
        case 'awake':
            row_color = awake_color  
            break;
        case 'offline':
            row_color = offline_color  
            break;
        case 'sleep':
            row_color = sleep_color  
            break;
        default:
            row_color = no_color  
            break;
    }
    // now build the html for the cell
    html_status = row_start+row_color+row_mid+arr[i].node_status+row_end
    arr[i].node_status = html_status
}
msg.payload = arr
return msg;

```

oh, here is my `template` node that goes with that `function` node

```auto
{
    "tabulator": {
        "layout": "fitDataFill",
        "columns": [
            {
                "title": "Node",
                "field": "node_id"
            },
            {
                "title": "Location",
                "field": "location"
            },
            {
                "formatter": "html",
                "title": "Status",
                "field": "node_status"
            },
            {
                "formatter": "datetime",
                "formatterParams": {
                    "inputFormat": "x",
                    "outputFormat": "hh:mm:ss",
                    "invalidPlaceholder": ""
                },
                "title": "Sleep Till",
                "field": "sleep_till"
            },
            {
                "formatter": "datetime",
                "formatterParams": {
                    "inputFormat": "x",
                    "outputFormat": "MM/DD/YY hh:mm:ss",
                    "invalidPlaceholder": ""
                },
                "title": "Last Seen",
                "field": "last_seen"
            },
            {
                "title": "MQTT",
                "field": "mqtt_mode"
            },
            {
                "title": "Temp",
                "field": "temperature",
                "align": "center",
                "formatter": "html"
            }
        ]
    }
}

```

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 17:16 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/4 "2020-06-29T17:16:02Z")

</div>

> [@zenofmud](#):
>
> The function node is not properly updating the flow variable. add this  
> `node.warn("grid="+JSON.stringify(grid)) `  
> just before you `flow.set` gridmem
> 
> I don't see any updates to the table. (macOS - nr 1.0.6 node.js v12.13.0)

@zenofmud, Hi Paul. Thanks a lot for your feedback as well as for the examples from your second post. I have an item in my todo list to add a background color to the cell depending on the power consumption of the device . It seems to me that one of your examples does exactly that. I will try it this afternoon.

I tested the `node.warn` you proposed and found out that the message is being updated as I expect. The funcion node is adding the string `voltage*current` as it should. But again, the table is not updated, even if it is receiving an updated message.

Now the first way to fix this is to replace below line in the funcion node:

```auto
msg.payload = grid; //BAD ?
//msg.payload = [...grid]; // Always OK

```

Comment the first one and uncomment the second one and all will be fixed. I still have to understand why copying the object this way fix the issue. The default context storage in this computer is the file system. The other way to fix is unbelievable weird. I need to understand better before even disclosing what I did.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [29 June 2020 18:11 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/5 "2020-06-29T18:11:47Z")

</div>

Does the grid object get modified by anything downstream? If so is it modifying the one in context too? The copy would stop that.

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 18:19 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/6 "2020-06-29T18:19:06Z")

</div>

Hi @Colin, no. There is no modifications between the function node and the ui\_table node. There is only a change node in between that defines the columns and only that).

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [29 June 2020 18:25 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/7 "2020-06-29T18:25:42Z")

</div>

Are you expecting Power to be current \* voltage? Beasue in the function you are asigning Power to the string "current \* power"

I guess I confused about what you are trying to do.

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 18:28 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/8 "2020-06-29T18:28:47Z")

</div>

Yes, Paul. I am just adding a string in this minimum flow as the purpose is to understand the table refresh issue only. It is not my intention to multiple voltage and current to get the power.

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [29 June 2020 18:42 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/9 "2020-06-29T18:42:34Z")

</div>

I just noticed something. If I delete the flow variable to start fresh. I then click the 'Initilize' button, the table comes up with all zeros.  
If I now press one of the three switches, nothing changes on the table

BUT if I do window refresh it does show the string in the table..

So an auto refresh is not happening.

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 18:47 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/10 "2020-06-29T18:47:53Z")

</div>

> [@zenofmud](#):
>
> BUT if I do window refresh it does show the string in the table..

It does, I agree. I just wanted to find how to auto refresh. I could use an ui\_control to node to force a refresh (already tested ok) but that would be a last resort.

PS: thanks again for the coloring function. Working fine.

 ![a-3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/e/de13b35ac190cf8e4bf9e47b169844b6c988a603.png)

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [29 June 2020 18:52 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/11 "2020-06-29T18:52:37Z")

</div>

did you try using the template node I posted? With that the change shows as soon as you press the inject button

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 18:55 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/12 "2020-06-29T18:55:06Z")

</div>

> [@zenofmud](#):
>
> With that the change shows as soon as you press the inject button

No I didn´t. I will give it a try. If it works then this will give me some clue on the refresh behaviour.

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [29 June 2020 18:56 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/13 "2020-06-29T18:56:09Z")

</div>

set it up like this since the ui\_control is defining the table.

 ![Screen Shot 2020-06-29 at 2.55.27 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/432bfe2649b4af500d00d7134933eeb795e1fb87.png)

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [29 June 2020 19:02 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/14 "2020-06-29T19:02:07Z")

</div>

Hi Paul, indeed. You nailed it. It is working.

I configured th output of the template node as below:

![a-4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e1fb6caa8b6efdaf2279bf394b80814f455efc8.png)

I will play a little bit more with this config. I am inclined to start using template nodes as it seems they are also good when we need to write callbacks for the ui\_table.

Huge thanks !!!

---

<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: [13 July 2020 19:02 UTC](https://discourse.nodered.org/t/ui-table-not-refreshing-wanted-to-know-if-someone-else-is-able-to-reproduce-the-issue/29170/15 "2020-07-13T19:02:11Z")

</div>

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