# UI-Table: how to use commands to add / update table content dynamically

**URL:** <https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240>\
**Category:** Dashboard\
**Created:** [17 March 2020 18:03 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240 "2020-03-17T18:03:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 18:03 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/1 "2020-03-17T18:03:25Z")

</div>

Good afternoon guys.  
I have a question and I'm going to the forum for sure someone will know the answer.  
I'll try to explain.  
I'm using for learning and ready example of the ui table node( node-red-node-ui-table). In the example it is possible to add, remove, update. Node red version V1.0.3.  
Doing a test I moved the button in example(add one row @ end) to another flow.  
And with a button in another flow it is not possible to add even one row in the table.  
Only if it is in the same flow it is possible to add.  
Sorry for my lack of experience, if anyone can take this doubt I thank you very much.

---

<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:** [17 March 2020 18:47 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/2 "2020-03-17T18:47:05Z")

</div>

Hi,

> [@Battassini](#):
>
> Doing a test I moved the button in example(add one row @ end) to another flow.

Are you using the in/out nodes? Place a debug node (full msg object) at the in node and see if you get the same results as when you place a debug node on the button of the example flow.

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 19:21 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/3 "2020-03-17T19:21:31Z")

</div>

Hi, first thank you very much for your help.  
First test with button in the same flow as the table. I used the button (addRow @ end)  
Debug in output function addRow @ end:  
These were the lines

{"command":"addRow","arguments":[[{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}],true],"returnPromise":true}

{"topic":"success","ui\_control":{"callback":"addRow"},"return":{"command":"addRow","arguments":[[{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}],true],"returnPromise":true},"socketid":"EUomhZLgmGfXXFjMAAAD","\_msgid":"ff6c7e4f.b4783"}

["findIndex",{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}]

The second test with button in another flow:  
Only this line appears:

{"command":"addRow","arguments":[[{"id":26,"timestamp":1584472835732,"text":"addRow @ end (#26)"}],true],"returnPromise":true}

Thanks

---

<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:** [17 March 2020 19:32 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/4 "2020-03-17T19:32:09Z")

</div>

Hi, please use the "code" function to paste code / json or flows  
2. please switch the debug node to complete msg.object

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

```auto
{"command":"addRow","arguments":[[{"id":25,"timestamp":1584472307272,"text":"addRow @ end (#25)"}],true],"returnPromise":true}

```

When you say

> [@Battassini](#):
>
> And with a button in another flow it is not possible to add even one row in the table.

Do you perhaps actually mean that you place the button to another dashboard tab?

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 19:50 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/5 "2020-03-17T19:50:15Z")

</div>

Hi, the debug node is in complete msg.object:

```auto
{"payload":{"command":"addRow","arguments":[[{"id":1,"timestamp":1584474451025,"text":"addRow @ end (#1)"}],true],"returnPromise":true},"socketid":"aH--JAU5LuhBGJVEAAAE","_msgid":"4038a904.967818"}

```

```auto
{"topic":"success","ui_control":{"callback":"addRow"},"return":{"command":"addRow","arguments":[[{"id":1,"timestamp":1584474451025,"text":"addRow @ end (#1)"}],true],"returnPromise":true},"socketid":"aH--JAU5LuhBGJVEAAAE","_msgid":"3cc62244.8b237e"}

```

```auto
["findIndex",{"id":1,"timestamp":1584474451025,"text":"addRow @ end (#1)"}]

```

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 19:50 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/6 "2020-03-17T19:50:54Z")

</div>

The first test button in same flow at ui table

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 19:52 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/7 "2020-03-17T19:52:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 19:56 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/8 "2020-03-17T19:56:29Z")

</div>

The second test button another flow:

```auto
{"payload":{"command":"addRow","arguments":[[{"id":2,"timestamp":1584474798251,"text":"addRow @ end (#2)"}],true],"returnPromise":true},"socketid":"aH--JAU5LuhBGJVEAAAE","_msgid":"ab4bcfe6.e1023"}

```

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

Before the second test I clear the table and pressed the button on the other flow but didn't add it to the table

---

<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:** [17 March 2020 20:09 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/9 "2020-03-17T20:09:35Z")

</div>

Again the question. You mean the button is on another TAB not flow?

like here?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/7/277a3cc8b48f9e7048776d1a7e5bdc92ab0ca597.png)

So I assume you press the button on the other tab, switch the tab with the "burger" menu on the upper left corner and then the table is empty.

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [17 March 2020 20:26 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/10 "2020-03-17T20:26:34Z")

</div>

Yes you are correct sorry for my mistake - Is TAB not Flow.

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

Pressing the same button(addRow @ end) on another TAB does not add a row to the table. I can't understand why the same logic just moved.  
I'm using default example I didn't change anything.  
Thanks

---

<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:** [18 March 2020 23:53 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/11 "2020-03-18T23:53:09Z")

</div>

So you basically took the original example and moved the button from to another dashboard tab.  
That’s something I can work with. Give me some time to figure it out.

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [19 March 2020 10:21 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/12 "2020-03-19T10:21:41Z")

</div>

Dear. Yes I used the example and moved the button from to another dashboard tab.  
Thanks for your help.

---

<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:** [19 March 2020 16:44 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/13 "2020-03-19T16:44:44Z")

</div>

OK I looked into it. This problem is more general for more complex widgets (witches which not only display a single value as text or gauge)

If a widget is not on the actual tab the dashboard stores the last message to replay it as soon the widget gets visible again. because the widget does not exists on the client side when you are on a different tab and click on the button this fails.

But this "simple" general purpose approach is not working for more complex widgets like ui-table with commands. They will simply never reach the table.

That's why my flow design has always a "helper" node in fornt of the table. Processing all updates and replays the complete table when the tab connects or a new client logs in.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/141f871f79de2acef0499fb47b24b451877121dd.png)  
you see the data comes in from the in node passes through the helper node and then to the table. Se

Example uses a simpler method:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b6d0aaec5be2e13f769719f6cc9aa8a6a11f90a2.png)  
Data goes into the table first and to the recorder node on the output. which then restores the table when ui-control triggers. But when the table widget does not extist nothing is passed and nothing will be recorded.

You can find the ui\_table handler (subflow) here:

> [@\[Announce\] remote device table (and collaboration wanted)](https://discourse.nodered.org/t/announce-remote-device-table-and-collaboration-wanted/22505):
>
> Hello after a lot of work (perhaps too much work) I like to share my first beta version of a flow to display the status of remote devices on the dashboard. It is always good to have an eye on your sensors and actuators especially when they are connected wireless or battery powered. The flow first developed around my homie-convention-node but soon I decided to make it more versatile because I have devices around the house which not support the homie convention. [teaser] Currently supported are…

It is quite universal and I use it for several table with completely different purpose, look and feel.  
It even can handle table edits, layout changes, hiding and revealing columns and in a new version I add row sorting. The documentation of the helper node is a little bit old but covers the basics.

Sorry no easy fix.

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [19 March 2020 18:25 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/14 "2020-03-19T18:25:01Z")

</div>

Dear.  
Thanks a lot for the help.  
Then are if I understood the solution would be use a flow "helper" node in front of the table?  
Sorry for my ignorance or relatively new on node red. How I create the "helper" flow in front the table?

Thanks.

---

<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:** [19 March 2020 20:06 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/15 "2020-03-19T20:06:12Z")

</div>

I call the subflow node ui-table helper. But it is not an easy task for beginners.  
It basically:

- handle ui\_control
- table buffer
- table edit buffer
- table refreshing
- some commands (like hiding columns)

It expect one table data down to cell level. Rows must have a index column with the unique data to identify each row (a row counter for example)

It can handle results from callback functions.

All this is used in the remote-device-table flow.

Yes what you like to do is possible with this subflow.

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [20 March 2020 19:39 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/16 "2020-03-20T19:39:27Z")

</div>

Dear.

Please one more doubt.  
How do I leave the ui-table with fixed size?

Thanks

---

<div class="post-metadata">

**Author:** ![Battassini](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@Battassini](https://discourse.nodered.org/u/Battassini)\
**Post date:** [22 March 2020 13:02 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/17 "2020-03-22T13:02:49Z")

</div>

Dear  
I still have some difficulties I'm trying to learn. Please be able to share the example of the figure:

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

I thank you for your help.

---

<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:** [22 March 2020 15:10 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/18 "2020-03-22T15:10:44Z")

</div>

Is I said, this is part of a bigger flow You can find everything here:

> [@\[Announce\] remote device table (and collaboration wanted)](https://discourse.nodered.org/t/announce-remote-device-table-and-collaboration-wanted/22505):
>
> Hello after a lot of work (perhaps too much work) I like to share my first beta version of a flow to display the status of remote devices on the dashboard. It is always good to have an eye on your sensors and actuators especially when they are connected wireless or battery powered. The flow first developed around my homie-convention-node but soon I decided to make it more versatile because I have devices around the house which not support the homie convention. [teaser] Currently supported are…

the key node (actually it is a subflow) for you is `ui-table handler´ placed in fornt of ui-table:

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

I took the afford to write some docs in the info panlel: More docs on my github repro

- Replace the `in node` with your data source
- the messges must have a topic and a row property in this case ´state´  
example:  
`msg={"topic":1,state={"col1":1,"col2":5,"col3":3.23}`  
where topic is the index (sting or number)
- one column must be a unique index field. This gives you the ability to update rows instead. if a value in the index column is new a new row will be added, is it is existing this row is updated. Define the index field in the tabulator json too.
- define the tabulator json as you need. There are many callbacks defined. It is not convenient to edit them in the json editor. So copy paste them in a function node and past them back. But you can leave them in they should not do any harm. The tabulator json gives a lot of different formatted columns definitions ... you will perhaps find what you need.
- the copy paste example in ui-table gives you a good start how to use callbacks (as there is only one and a function node explaining how to do this)

_As I said before, not suitable for beginners but "willing to learn" triggers "willing to help" @ my side. I always want more than I'm capable but grow with the challange._

---

<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:** [6 April 2020 20:45 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/19 "2020-04-06T20:45:07Z")

</div>

Hi i didn’t recognized your first question:

A) use a decend widget size and not auto  
B) use the customHight property in the tabulator json  
C) use the latest version of ui-table - there is a fix for what might be your problem

And last but Not least a simpler flow as an example showing the use of ui-table helper

> [@A Syslog Server for the Dashboard](https://discourse.nodered.org/t/a-syslog-server-for-the-dashboard/24337):
>
> Hi perhaps somebody is interested. Just finished a syslog server for the node-red dashboard. It makes use of ui-table. I hope somebody finds it useful. It is build around ui-table and a subflow I use for all kinds of tables in my projects. [https://raw.githubusercontent.com/Christian-Me/node-red-contrib-home/master/Node-RED/syslog/screenshots/demo.gif(image larger than 4096KB)](https://raw.githubusercontent.com/Christian-Me/node-red-contrib-home/master/Node-RED/syslog/screenshots/demo.gif) Features can handle quite huge amounts of data only limited by the clients browser. As every line is sent individual…

Even if you don’t have a device or software sending syslog messages you can use the inject node to simulate the data input.

---

<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:** [5 June 2020 20:45 UTC](https://discourse.nodered.org/t/ui-table-how-to-use-commands-to-add-update-table-content-dynamically/23240/20 "2020-06-05T20:45:23Z")

</div>

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