# Add rows to a table dynamically with msg.payload

**URL:** https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939
**Category:** Dashboard
**Created:** [16 November 2018 22:28 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939 "2018-11-16T22:28:27Z")
**Posts on this page:** 14
**Page:** 2

<div class="post-metadata">

### Author: ![Georg25](https://avatars.discourse-cdn.com/v4/letter/g/ed8c4c/32.png) [@Georg25](https://discourse.nodered.org/u/Georg25)
#### Post date: [15 January 2019 16:31 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/21 "2019-01-15T16:31:04Z")

</div>

@IoTPlay

Is there a way to fix the width of the columns or set to a minimum width?

---

<div class="post-metadata">

### Author: ![IoTPlay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iotplay/32/40_2.png) [@IoTPlay](https://discourse.nodered.org/u/IoTPlay)
#### Post date: [15 January 2019 20:34 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/22 "2019-01-15T20:34:06Z")

</div>

[https://www.w3schools.com/tags/att\_col\_width.asp](https://www.w3schools.com/tags/att_col_width.asp)

---

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [6 March 2019 17:32 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/23 "2019-03-06T17:32:14Z")

</div>

Thank you for all the great samples posted here,  
Can somebody post a sample of a dynamic table where the row colour takes different values depending on the value of a column in that row ?

---

<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: [6 March 2019 18:47 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/24 "2019-03-06T18:47:37Z")

</div>

Take a look at ['ET Display Home' a flow to help manage your ESPeasy and Sonoff/Tasmota flashed devices](https://discourse.nodered.org/t/et-display-home-a-flow-to-help-manage-your-espeasy-and-sonoff-tasmota-flashed-devices/1893/23) it only changes the color of certain column in a row but it should get you going

---

<div class="post-metadata">

### Author: ![NRblinks](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@NRblinks](https://discourse.nodered.org/u/NRblinks)
#### Post date: [10 September 2019 00:24 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/25 "2019-09-10T00:24:15Z")

</div>

First ,Thanks to everybody for all the help in this forum , im really new using NodeRed and was looking for a solution as the example provided by "IoTPlay". I already has been able to add the msg.payload thru mqtt to this example, but I has been trying to remove(delete) from the HTML Table if the same msg is injected again, example: I inject "Message one,two,3,4..." and if I re-inject any of those again ,lets say "Message one" it will be Removed(delete) from the HTML Table, i tried every code i found searching for a solution online(I think), i read about Angular Js ,etc ... I asked "IoTPlay" thru Linkin but no answer yet , if someone can help or point me to the right direction , is really appreciated, note: English is not my primary language please apologize me for any typo or miss spelling thank you very much in advance

---

<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: [10 September 2019 12:28 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/26 "2019-09-10T12:28:22Z")

</div>

Can you possibly explain better what is the behavior you want ? Apparently you want to avoid duplicate entries for the message, right ? Lets say you have already one entry for message seven. Some time later you receive message seven again (with a different timestamp). Which one you want to keep in the table ? The old timestamp or the new timestamp ? The way you explained may lead us to understand that you want to delete both entries, which would be somehow odd.

---

<div class="post-metadata">

### Author: ![NRblinks](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@NRblinks](https://discourse.nodered.org/u/NRblinks)
#### Post date: [10 September 2019 12:40 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/27 "2019-09-10T12:40:17Z")

</div>

Thanks for your reply, you are right in that case i want delete both entry.

---

<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: [10 September 2019 13:40 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/28 "2019-09-10T13:40:53Z")

</div>

In such case I could suggest using JavaScript array methods .indexOf() and .splice() to locate and remove existing entries. Flow below shows how those two methods could be used.

```auto
[{"id":"6c21c63f.45b098","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"cc13338b.ba10d","type":"function","z":"6c21c63f.45b098","name":"Update Array","func":"let pay = msg.payload ;\nvar arr = flow.get(\"elements\") || [];\n\n// Position is the index of element in the array\n// If element is not in the table it will be add to the end \nlet pos = arr.indexOf(pay);\nif (pos == -1) { arr.push(pay)} else {arr.splice(pos, 1);}\nflow.set(\"elements\",arr);\nmsg.payload = [...arr];\nreturn msg;\n","outputs":1,"noerr":0,"x":430,"y":300,"wires":[["cd124bf7.2e0238"]]},{"id":"cd124bf7.2e0238","type":"debug","z":"6c21c63f.45b098","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":610,"y":300,"wires":[]},{"id":"7f568e1d.58c21","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"One","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":220,"wires":[["cc13338b.ba10d"]]},{"id":"7145ffa.f20ff","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"Two","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":260,"wires":[["cc13338b.ba10d"]]},{"id":"f038b7d6.8279f8","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"Three","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":300,"wires":[["cc13338b.ba10d"]]},{"id":"48446f7f.89b58","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"Four","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":340,"wires":[["cc13338b.ba10d"]]},{"id":"41b04df4.57e294","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"Five","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":380,"wires":[["cc13338b.ba10d"]]},{"id":"c5854399.1d46b","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"Six","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":420,"wires":[["cc13338b.ba10d"]]},{"id":"f97e5bae.602af8","type":"inject","z":"6c21c63f.45b098","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":140,"wires":[["90ad31e5.3a953"]]},{"id":"90ad31e5.3a953","type":"change","z":"6c21c63f.45b098","name":"Empty array","rules":[{"t":"set","p":"elements","pt":"flow","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":140,"wires":[[]]}]

```

---

<div class="post-metadata">

### Author: ![NRblinks](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@NRblinks](https://discourse.nodered.org/u/NRblinks)
#### Post date: [10 September 2019 13:51 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/29 "2019-09-10T13:51:00Z")

</div>

Let me try and will report back ,thanks

---

<div class="post-metadata">

### Author: ![IoTPlay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iotplay/32/40_2.png) [@IoTPlay](https://discourse.nodered.org/u/IoTPlay)
#### Post date: [10 September 2019 16:21 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/30 "2019-09-10T16:21:09Z")

</div>

Dis you come right?

---

<div class="post-metadata">

### Author: ![NRblinks](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@NRblinks](https://discourse.nodered.org/u/NRblinks)
#### Post date: [10 September 2019 16:34 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/31 "2019-09-10T16:34:42Z")

</div>

the Flow shared by " **Andrei"** is was i was looking for , i will now try to implement it at " **IoTPlay"** example, thanks

---

<div class="post-metadata">

### Author: ![DemalCal96](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@DemalCal96](https://discourse.nodered.org/u/DemalCal96)
#### Post date: [14 February 2022 18:22 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/32 "2022-02-14T18:22:44Z")

</div>

Hello, I'm new in Node-Red and this forum. I need something similar to your code. I receive MQTT messages, each one with a different topic. I want to generate each topic in one column of the table. Also there are some topics that I want to ignore. Could you help me with an idea?

---

<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: [14 February 2022 23:40 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/33 "2022-02-14T23:40:01Z")

</div>

@DemalCal96 Welcome to the forum. Seeing that this thread is over two years old, it would be a good idea to open a new thread and explain your problem with some details.

I will close this thread now.

---

<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: [14 February 2022 23:40 UTC](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939/34 "2022-02-14T23:40:07Z")

</div>



[Previous page](https://discourse.nodered.org/t/add-rows-to-a-table-dynamically-with-msg-payload/4939.md?page=1)
