# UI-Table vanishes on browser reload

**URL:** <https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809>\
**Category:** Dashboard\
**Created:** [12 November 2020 13:26 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809 "2020-11-12T13:26:32Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [12 November 2020 13:26 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/1 "2020-11-12T13:26:32Z")

</div>

Hello guys,

I've got a reloading issue with my UI-Table that is directly filled from an array.

1. In an injection node I have an SELECT query that MySQL-DB responds with a proper result set.
2. The data array is forwarded to a function node which adds options and column definitions to the payload
3. The "etable" node (from node-red-contrib-ui-etable) presents a nice looking table - but ONLY after I have clicked the "deploy" in the node-red flow!
4. On a browser reload of the UI the table is no more filled and not even showing up. In that case the debug channel does not show any payload coming from the DB query. ❗

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44b08c7dbacfd8e38c2f1f3512685478a3aa5d6e.png)

Here's the code in my function node:

```auto
msg = { 
    payload: msg.payload,
    config: {
        options: {
                    "movableColumns": true,
                    "resizableColumns": true,
                    "selectable": 1,
                    "responsiveLayout": "collapse",
                    "autoResize": true,
                    "layout": "fitColumns",
                    "pagination": "local",
                    "height": "800px",
                    "groupBy": "system",
                    "groupStartOpen": true
        },
        columns: [
                    { title:"Id", field:"SIGNAL_ID", align:"center", editor:"select", width:60 },
                    { title:"Symbol", field:"SYMBOL", align:"center", width:120 },
                    { title:"Signal", field:"SIGNAL_TYPE", align:"center", width:100 },
                    { title:"Direction", field:"POS_TYPE", align:"center", width:60 },
                    { title:"Entry", field:"ENTRY_PRICE", align:"center", width:100 },
                    { title:"Date", field:"TIME", align:"center", width:180 },
                    { title:"SL", field:"SL", align:"center", width:100 },
                    { title:"TP", field:"TP", align:"center", width:100 },
                    { title:"Vol.", field:"INITIAL_VOL", align:"center", width:80 }
                ]
    },
    //ui_control: {'callback':'rowSelectionChanged','rowSelection':'Name' }
}

return msg;

```

Does anyone have an idea why the reload leads to a blank table?

As you can see, I have tried with a delay node (in German: Verzögerung), in order to kind of drop the data with a delay, hoping that would help..

Btw. should I rather go with the ui-table from node-red-node-ui-table?

Cheers,  
Marcel

---

<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:** [12 November 2020 15:52 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/2 "2020-11-12T15:52:49Z")

</div>

> [@CreativeWarlock](#):
>
> node-red-contrib-ui-etable)

Hi Marcel, thanks for pointing out the existence of the node-red-contrib-ui-etable. I was not aware of it. I will give it a try (when time allows).

I find that node-red-node-ui-table is awesome. I simply could not develop some applications without it. However there are a couple of annoyances with this node. First one being that the auto reload is not predictable. I don't know if this is due to the complexity linked to the virtual DOM on tabulator.js or something I am not handling correctly. Perhaps the issue is similar to the one you are facing with node-red-contrib-ui-etable. The work around I put in place is using an array destructuring in the function node that is in front of the ui\_table node. Somehow doing a shallow array copy seems to fix the issue.

Lets say that the array you pass to the ui\_table is on the variable `arr` the you could try using this command in the function node: `msg.payload = [...arr];`

The second annoyance is that some kind of changes in the ui\_table configuration require a stop-start in Node-RED, otherwise the changes will not take effect. This is the reason I will be willing to try node-red-contrib-ui-etable.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 November 2020 16:08 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/3 "2020-11-12T16:08:10Z")

</div>

fixes and enhancement Pull requests to ui-table most welcome !

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [12 November 2020 17:37 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/4 "2020-11-12T17:37:13Z")

</div>

Hi Andrej,

thanks for your reply!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d01f6aee287a679764481e571b7ce8951ce5024e.png)

As you can see, I have changed the flow so that the output from the database is interrupted. When I redeploy, the dashboard still shows a filled table nonetheless. It seems that this etable is caching data, but this is just a guess.

I tried to save the array from that DB-node into an intermediate variable like so

```auto
var arr = msg.payload;
msg = { 
    payload: arr,
    config: {
        options: {
                    ...
        },
        columns: ...
    },
}

return msg;

```

However this doesn't change that weird behavior neither.

I did not understand what you mean with that 2nd annoyance. Could you elaborate this on an example? Particularly, what do you mean with 'stop-start'?

Cheers,  
Marcel

P.S.: If you are looking into the etable node here's an example with static data from the author:

> **[Node-Red-Contrib-UI-Etable Example1 (flow) - Node-RED](https://flows.nodered.org/flow/0dcb1fe12a68b674b395b8adb3920dc0)**

---

<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:** [12 November 2020 18:27 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/5 "2020-11-12T18:27:04Z")

</div>

> [@CreativeWarlock](#):
>
> Could you elaborate this on an example? Particularly, what do you mean with 'stop-start'?

I mean that some changes on the table definition, via ui\_control, appears to not have effect but they work after reinitialization the runtime with node-red-stop and node-red-start commands. It maybe some cache issue but I could not fully identify the root cause.

Having a look in your code something that catch my attention is that you are redefining the table in every message sent to the ui\_table node. Perhaps it works fine but it just looks strange (not saying it is an issue). Normally I define the table once and any other payload would be used only to populate the table. I illustrate this point below for clarity. The table will receive only one single configuration message from leg number "1" (at the startup of the flow). All other updates comes from leg number 2.

 ![t-1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c5e5ae3f7bed9e44841f5d80ec518b7d4abe05b9.jpeg)

Now, another thing in your code.

```auto
msg = { 
    payload: msg.payload,
    config: {

```

This is the same as msg.payload = msg.payload. I don´t see the purpose.

Question: Did you try to test the behaviour of the uitable using a simple array instead of data retrieved from the database ? I guess the source of the data is not meaningful so you should be able to reproduce the issue in a simpler way (and perhaps share in the forum the simplified flow).

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [12 November 2020 20:18 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/6 "2020-11-12T20:18:08Z")

</div>

Yes, I tried the behavior on static array data. It's from the example1 as linked above. It's a very simple flow I have placed on the same Dashboard element (for that I have disabled all nodes regarding the dynamic data coming from the MySQL DB). The behavior was proper, i.e. reloading the browser tab lead to immediately displaying the array in the table again.

But I have just found out something that confuses me about the injection node. The following flow is from the bespoken example1 from the author of the etable node:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0dbcf6bb3ffb87a6737c91a412d283f70b80f7bf.png)

The disconnection between injection and function is intentional because I was doubting something.. and I was right:  
After I reloaded the UI browser tab no output is shown on the debug channel - despite the injection node places {"a":"wombat","b":"NEW"} on the msg.paylod.

Oh my! And I thought the injection nodes are triggered on every UI reload, too. Looks like this is not the case and I have learned something new again

So do I have to send data periodically to the dashboard? Is that really necessary? 🤔

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [12 November 2020 20:32 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/7 "2020-11-12T20:32:42Z")

</div>

I have noticed that edits to disable save state and disable replay saved state to survive full deployment and a browser refresh retains the saved state.

Node-red has to be restarted in my experience at the moment.

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [12 November 2020 20:41 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/8 "2020-11-12T20:41:42Z")

</div>

@Ozpos What do you mean with "Edits to disable save state" and "disable replay saved state"? Are you referring to context stores as in [https://nodered.org/docs/user-guide/context#context-stores](https://nodered.org/docs/user-guide/context#context-stores)?

@Andrei In this flow I have employed a ui button as you did.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d8b367047fc0e3ae3cd398b087127fb16c6b413.png)

Pressing "Refresh" in my dashboard leads to the array output as indicated in the debug channel - BUT, it's not shown/updated in the table of the dashboard - it just remains empty. Looks like it must be some sort of internal cache thing ... or not? I'm confused. I'll take a break, checking in tomorrow - Good night!

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [12 November 2020 20:44 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/9 "2020-11-12T20:44:15Z")

</div>

Yes I was referring to context store. It seems as though the two could be connected.

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [12 November 2020 23:22 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/10 "2020-11-12T23:22:31Z")

</div>

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

On a browser reload / or initially landing on the dashboard, it seems using a "refresh button" seems to be the only way to properly load the data into the table. Note, that the function node is again between the MySQL and etable nodes.

Looks like that's a workaround for now that I can happily live with. I guess the only other alternative would be to set an interval to fire that injection node every x seconds.

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [14 November 2020 11:06 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/11 "2020-11-14T11:06:45Z")

</div>

I found my errors why the table did not render in the dashboard:

**1. Error:** Regarding that code snippet from above:

```auto
msg = { 
    payload: msg.payload,
    options: { ... },
    columns: [{ /*col1 definitions*/ }, /* ... */ { /*colN definitions*/ }]
}
return msg;

```

With msg = { ... } I tried to rebuild the whole message object (no good, I know 🙂 ). In a moment of a brain fart I had removed "payload: msg. payload" which ofc lead to an empty table. Bah!  
Well, the working code in my function now node looks like this:

```auto
msg.config = {
    options: { ... },
    columns: [{ /*col1 definitions*/ }, /* ... */ { /*colN definitions*/ }]
}
return msg;

```

**2. Error** : Defining a column in this way is wrong:

```auto
                {
                    title: "Id",
                    field: "SIGNAL_ID",
                    align: "center",
                    editor: "select",
                    width: 60
                },

```

Instead this one is correct:

```auto
                {
                    "title": "Id",
                    "field": "SIGNAL_ID",
                    "align": "center",
                    "editor": "select",
                    "width": 60
                },

```

With these errors fixed, the table is now initially properly filled with data and also during a browser reload! (The refresh button is no more required, though nice to have)

At least I hope - with this closing post, to help the next newbie not to make the same mistakes. 😉

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [15 November 2020 19:20 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/12 "2020-11-15T19:20:07Z")

</div>

Hi @CreativeWarlock, thank you for documenting the fix so well.  
Could you please tell me in which node error No. 2 was discovered ?

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [17 November 2020 21:41 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/13 "2020-11-17T21:41:27Z")

</div>

The 2nd error happened in the function node, that one before the etable node.

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [18 November 2020 10:18 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/14 "2020-11-18T10:18:29Z")

</div>

Thank you. Not being a js programmer myself Is it safe to say that one could use {"somekey": ... everywhere ?

---

<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:** [2 December 2020 10:18 UTC](https://discourse.nodered.org/t/ui-table-vanishes-on-browser-reload/35809/15 "2020-12-02T10:18:38Z")

</div>

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