Add rows to a table dynamically with msg.payload

@IoTPlay

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

https://www.w3schools.com/tags/att_col_width.asp

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 ?

Take a look at 'ET Display Home' a flow to help manage your ESPeasy and Sonoff/Tasmota flashed devices it only changes the color of certain column in a row but it should get you going

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

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.

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

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.

[{"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":[[]]}]

Let me try and will report back ,thanks

Dis you come right?

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

1 Like

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?

@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.

1 Like