[Dashboard] How to create a table?

Questions and Answers

Moderator: IoTStudio Support

Post Reply
IoTStudio Support
Posts: 39
Joined: Wed Nov 23, 2022 9:26 am

[Dashboard] How to create a table?

Post by IoTStudio Support »

This flow use inject node to gen fake data then send to table node and show on webpage.
dashboard table
dashboard table
dasbboard-table.PNG (4.62 KiB) Viewed 6654 times
Flow:

Code: Select all

[{"id":"1e3c086d.16d789","type":"tab","label":"Table Example","disabled":false,"info":""},{"id":"70a92533.59f7dc","type":"inject","z":"1e3c086d.16d789","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Alice\",\"age\":20,\"gender\":\"Female\"},{\"name\":\"Bob\",\"age\":25,\"gender\":\"Male\"},{\"name\":\"Charlie\",\"age\":30,\"gender\":\"Male\"}]","payloadType":"json","x":210,"y":80,"wires":[["f62faabc.35bf8"]]},{"id":"f62faabc.35bf8","type":"ui_table","z":"1e3c086d.16d789","group":"d61a3545.5b5f5","name":"","order":0,"width":"6","height":"4","columns":[{"field":"name","title":"Name","width":"","align":"left","formatter":"plaintext","sortable":true,"filterable":true},{"field":"age","title":"Age","width":"","align":"left","formatter":"plaintext","sortable":true,"filterable":true},{"field":"gender","title":"Gender","width":"","align":"left","formatter":"plaintext","sortable":true,"filterable":true}],"outputs":0,"cts":false,"x":330,"y":80,"wires":[]},{"id":"d61a3545.5b5f5","type":"ui_group","name":"Group 1","tab":"d5de062c.7cc1c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"d5de062c.7cc1c8","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]
ps: this flow need install node-red-node-ui-table plugin node then can use ui table node。
Best Regards,
IoT Studio Support Team
Post Reply