Hi all, I just started to discover node-red and already learned so much. However, I could use a little help on formatting a table with values from MQTT sensors. In the example below, I hard-coded a table the old-fashioned way. Apart from the width of the columns it is what I envisage to build using the table-node. However, I encounter two issues: I cannot get rid of the gray headers in the table I cannot get rid of the scroll-bar. Can someone please help me solving these two issues? For reference purposes, I include the code and two screenshots of the dashboard & flows. Thanks a lot! Flow [image] Dashboard [image] Code [{"id":"616ad2e3.c1d284","type":"tab","label":"Voorbeeld","disabled":false,"info":""},{"id":"43231a64.64fb7c","type":"mqtt in","z":"616ad2e3.c1d284","name":"Studeerkamer - Luchtvochtigheid","topic":"homie/homey-topic/studeerkamertemperatuur/measure-humidity","qos":"2","datatype":"auto","broker":"98ee804.9de2c8","x":130,"y":1880,"wires":[["428c9e6.5f394e"]]},{"id":"d74eb0c6.06aa18","type":"mqtt in","z":"616ad2e3.c1d284","name":"Slaapkamer - Luchtvochtigheid","topic":"homie/homey-topic/slaapkamer/measure-humidity","qos":"2","datatype":"auto","broker":"98ee804.9de2c8","x":130,"y":2020,"wires":[[]]},{"id":"31b0e10.25dfe2","type":"mqtt in","z":"616ad2e3.c1d284","name":"Kamer 3 - Luchtvochtigheid","topic":"homie/homey-topic/temppaul/measure-humidity","qos":"2","datatype":"auto","broker":"98ee804.9de2c8","x":110,"y":2160,"wires":[[]]},{"id":"428c9e6.5f394e","type":"function","z":"616ad2e3.c1d284","name":"Studeerkamer msg.topic","func":"msg.topic = \"Studeerkamer\"\nreturn msg;","outputs":1,"noerr":0,"x":890,"y":1740,"wires":[[]]},{"id":"1133ca28.d80a66","type":"mqtt in","z":"616ad2e3.c1d284","name":"Slaapkamer - Temperatuur","topic":"homie/homey-topic/slaapkamer/measure-temperature","qos":"2","datatype":"auto","broker":"98ee804.9de2c8","x":110,"y":1840,"wires":[["562914a.070a6ec"]]},{"id":"562914a.070a6ec","type":"function","z":"616ad2e3.c1d284","name":"Studeerkamer msg.topic","func":"msg.topic = \"Studeerkamer\"\nreturn msg;","outputs":1,"noerr":0,"x":830,"y":1840,"wires":[["f419d5d.1d3e9a8"]]},{"id":"4d80cee7.28df38","type":"join","z":"616ad2e3.c1d284","name":"","mode":"auto","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":1210,"y":1920,"wires":[["f4a80e36.c567f8"]]},{"id":"f419d5d.1d3e9a8","type":"split","z":"616ad2e3.c1d284","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":1070,"y":1920,"wires":[["4d80cee7.28df38"]]},{"id":"f4a80e36.c567f8","type":"ui_chart","z":"616ad2e3.c1d284","name":"","group":"2aca5ede.17334a","order":1,"width":"0","height":"0","label":"Temperatuur","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":"6","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":1370,"y":1920,"wires":[[]]},{"id":"a902ef4a.361f08","type":"function","z":"616ad2e3.c1d284","name":"Slaapkamer msg.topic","func":"msg.topic = \"Slaapkamer\"\nreturn msg;","outputs":1,"noerr":0,"x":820,"y":1880,"wires":[["f419d5d.1d3e9a8"]]},{"id":"d922c036.00648","type":"function","z":"616ad2e3.c1d284","name":"Kamer 3 msg.topic","func":"msg.topic = \"Kamer 3\"\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":1920,"wires":[["f419d5d.1d3e9a8"]]},{"id":"118a5c00.712f6c","type":"function","z":"616ad2e3.c1d284","name":"Kamer 4 msg.topic","func":"msg.topic = \"Kamer 4\"\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":1960,"wires":[["f419d5d.1d3e9a8"]]},{"id":"23c9c1bb.7bd546","type":"function","z":"616ad2e3.c1d284","name":"Badkamer msg.topic","func":"msg.topic = \"Badkamer\"\nreturn msg;","outputs":1,"noerr":0,"x":820,"y":2000,"wires":[["f419d5d.1d3e9a8"]]},{"id":"11d80374.7eb5bd","type":"function","z":"616ad2e3.c1d284","name":"Washok msg.topic","func":"msg.topic = \"Washok\"\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":2040,"wires":[["f419d5d.1d3e9a8"]]},{"id":"630c5ecb.b820e8","type":"mqtt in","z":"616ad2e3.c1d284","name":"Slaapkamer - Temperatuur","topic":"homie/homey-topic/slaapkamer/measure-temperature","qos":"2","datatype":"auto","broker":"98ee804.9de2c8","x":110,"y":1980,"wires":[["a902ef4a.361f08"]]},{"id":"1124b9fe.f75c6e","type":"mqtt in","z":"616ad2e3.c1d284","name":"Kamer 3 - Temperatuur","topic":"homie/homey-topic/temppaul/measure-temperature","qos":"2","datatype":"auto","broker":"98ee804.9de2c8","x":90,"y":2120,"wires":[["d922c036.00648"]]},{"id":"af546d9e.92c6","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"","payload":"0","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":50,"y":1800,"wires":[["562914a.070a6ec","428c9e6.5f394e"]]},{"id":"18b1117b.fdbc5f","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"","payload":"0","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.2","x":50,"y":2060,"wires":[["a902ef4a.361f08"]]},{"id":"9913a79b.969168","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"","payload":"0","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.3","x":50,"y":2200,"wires":[["d922c036.00648"]]},{"id":"d17c23a5.e85f9","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"studeertemp","payload":"10","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":60,"wires":[["f2df3e7a.51a87"]]},{"id":"f179939a.3644f","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"studeerhum","payload":"50","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":100,"wires":[["f2df3e7a.51a87"]]},{"id":"7698e0ad.c3e87","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"slaaptemp","payload":"5","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.5","x":110,"y":180,"wires":[["f2df3e7a.51a87"]]},{"id":"533685aa.5c345c","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"slaaphum","payload":"5","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.6","x":110,"y":220,"wires":[["f2df3e7a.51a87"]]},{"id":"9f232375.7b864","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"room3temp","payload":"15","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.5","x":120,"y":300,"wires":[["f2df3e7a.51a87"]]},{"id":"50de393a.471558","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"room3hum","payload":"15","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"0.6","x":120,"y":340,"wires":[["f2df3e7a.51a87"]]},{"id":"f2df3e7a.51a87","type":"join","z":"616ad2e3.c1d284","name":"Build Object with msg payload as key","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"8","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":890,"y":280,"wires":[["a4f0a1d.2a7346","758ca27d.6b862c"]]},{"id":"89975457.a26cf8","type":"change","z":"616ad2e3.c1d284","name":"Set msg.topic to Tempicon","rules":[{"t":"set","p":"topic","pt":"msg","to":"Tempicon","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":500,"wires":[["f2df3e7a.51a87"]]},{"id":"7528161d.4b5b48","type":"function","z":"616ad2e3.c1d284","name":"Insert Tempicon as HTML to payload","func":"msg.payload = ' ';\nreturn msg;\n","outputs":1,"noerr":0,"x":330,"y":500,"wires":[["89975457.a26cf8"]]},{"id":"717d7f1c.1308a","type":"inject","z":"616ad2e3.c1d284","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":500,"wires":[["7528161d.4b5b48","b07deca3.4f23a"]]},{"id":"a4f0a1d.2a7346","type":"function","z":"616ad2e3.c1d284","name":"Build Array for Table","func":"var arr = [\n {\"Ruimte\": \"Studeerkamer\", \"Temperatuur\": msg.payload.studeertemp, \"Luchtvochtigheid\": msg.payload.studeerhum, \"Tempicon\": msg.payload.Tempicon, \"Humicon\": msg.payload.Humicon},\n {\"Ruimte\": \"Slaapkamer\", \"Temperatuur\": msg.payload.slaaptemp, \"Luchtvochtigheid\": msg.payload.slaaphum, \"Tempicon\": msg.payload.Tempicon, \"Humicon\": msg.payload.Humicon},\n {\"Ruimte\": \"Paul\", \"Temperatuur\": msg.payload.paultemp, \"Luchtvochtigheid\": msg.payload.paulhum, \"Tempicon\": msg.payload.Tempicon, \"Humicon\": msg.payload.Humicon}\n];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":1180,"y":360,"wires":[["b98ece2.49b003","df078041.3a98b"]]},{"id":"b98ece2.49b003","type":"ui_table","z":"616ad2e3.c1d284","group":"27034fb8.553f2","name":"Table 2","order":1,"width":0,"height":0,"columns":[{"field":"Ruimte","title":"Ruimte","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Tempicon","title":"Tempicon","width":"","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Temperatuur","title":"Temperatuur","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Humicon","title":"Humicon","width":"","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Luchtvochtigheid","title":"Luchtvochtigheid","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":1360,"y":360,"wires":[]},{"id":"d3912d23.cf6c","type":"comment","z":"616ad2e3.c1d284","name":"Dummy sensors room 1","info":"","x":140,"y":20,"wires":[]},{"id":"34d13d6d.4f7382","type":"comment","z":"616ad2e3.c1d284","name":"Dummy sensors room 2","info":"","x":140,"y":140,"wires":[]},{"id":"cd6af96e.98ba58","type":"comment","z":"616ad2e3.c1d284","name":"Dummy sensors room 3","info":"","x":140,"y":260,"wires":[]},{"id":"99063.2a505f9e","type":"comment","z":"616ad2e3.c1d284","name":"Table 2: must look like Table 1","info":"","x":1420,"y":320,"wires":[]},{"id":"4852294b.cd84f8","type":"comment","z":"616ad2e3.c1d284","name":"Table 1","info":"","x":1350,"y":240,"wires":[]},{"id":"758ca27d.6b862c","type":"ui_template","z":"616ad2e3.c1d284","group":"bc229e7f.6fa24","name":"Table 1","order":1,"width":0,"height":0,"format":" \n \n Studeerkamer \n \n {{msg.payload.studeertemp}} \n \n \n {{msg.payload.studeerhum}} \n \n \n Slaapkamer \n \n {{msg.payload.slaaptemp}} \n \n \n {{msg.payload.slaaphum}} \n \n \n Paul \n \n {{msg.payload.room3temp}} \n \n \n {{msg.payload.room3hum}} \n \n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1360,"y":280,"wires":[[]]},{"id":"b07deca3.4f23a","type":"function","z":"616ad2e3.c1d284","name":"Insert Humicon as HTML to payload","func":"msg.payload = ' ';\nreturn msg;\n","outputs":1,"noerr":0,"x":320,"y":540,"wires":[["b5ee1486.7b2d28"]]},{"id":"b5ee1486.7b2d28","type":"change","z":"616ad2e3.c1d284","name":"Set msg.topic to Humicon","rules":[{"t":"set","p":"topic","pt":"msg","to":"Humicon","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":540,"wires":[["f2df3e7a.51a87"]]},{"id":"df078041.3a98b","type":"debug","z":"616ad2e3.c1d284","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1350,"y":400,"wires":[]},{"id":"66a06c18.805674","type":"comment","z":"616ad2e3.c1d284","name":"Insert icons","info":"","x":90,"y":460,"wires":[]},{"id":"98ee804.9de2c8","type":"mqtt-broker","z":"","name":"Rapsbery Broker","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"2aca5ede.17334a","type":"ui_group","z":"","name":"Temperatuur","tab":"c7244aec.8a9be8","order":1,"disp":true,"width":"12","collapse":false},{"id":"27034fb8.553f2","type":"ui_group","z":"","name":"Table 2","tab":"b9904ad2.11e2f8","order":2,"disp":true,"width":"10","collapse":false},{"id":"bc229e7f.6fa24","type":"ui_group","z":"","name":"Table 1","tab":"b9904ad2.11e2f8","order":1,"disp":true,"width":"10","collapse":false},{"id":"c7244aec.8a9be8","type":"ui_tab","z":"","name":"Voorbeeld","icon":"dashboard","order":11,"disabled":false,"hidden":false},{"id":"b9904ad2.11e2f8","type":"ui_tab","z":"","name":"Tabletest","icon":"dashboard","order":16,"disabled":false,"hidden":false}]

A couple suggestions. make sure you don't add anything to the end of your flow - currently it won't import becasue of extra text at the end. (you might want to edit that out) It is helpful , in a case like this - formating a table - to build an inject node/change node combp that contains the data sent to the table. Then someone can test it. As it is, someone would have to spend time building test data to recreate your issue. Try increasing the height of the ui-table node [ui_table_size]

Dear Zenofmud Thank you for the suggestions! I am a bit confused though. May I ask for some additional input? a. You indicate that I added text at the end of my flow. I guess I accidentally hit the preformatted text button twice. I am very sorry for that. See a second try below. Is that how it should be? b. You mention that it would be helpful to include fake data. I was under the impression that I had included inject nodes for testing with fake data, but in any case I realized that it would be more user friendly not to make 8 inject nodes, but one inject and 7 function nodes creating fake data. I hope this helps testing. Please let me know if I overlooked anything. c. I increased the height of the node, but I simply cannot get it to a perfect height. The width is almost controllable, as long as it is the same as the width of the group (it will show everything in the table, but still contain a horizontal scrollbar). The height is either not enough (showing a gray area) or too little (showing a scroll bar), whatever proportions I try. Is there any other way to format it like table 1? d. Do you have any ideas on how to get rid of the headers in the Table 2 in my example? Again many thanks for your help! Kind regards Code [{"id":"758ca27d.6b862c","type":"ui_template","z":"616ad2e3.c1d284","group":"bc229e7f.6fa24","name":"Table 1","order":1,"width":0,"height":0,"format":" \n \n Studeerkamer \n \n {{msg.payload.studeertemp}} \n \n \n {{msg.payload.studeerhum}} \n \n \n Slaapkamer \n \n {{msg.payload.slaaptemp}} \n \n \n {{msg.payload.slaaphum}} \n \n \n Room 3 \n \n {{msg.payload.room3temp}} \n \n \n {{msg.payload.room3hum}} \n \n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1360,"y":200,"wires":[[]]},{"id":"bc229e7f.6fa24","type":"ui_group","z":"","name":"Table 1","tab":"b9904ad2.11e2f8","order":1,"disp":true,"width":"10","collapse":false},{"id":"b9904ad2.11e2f8","type":"ui_tab","z":"","name":"Tabletest","icon":"dashboard","order":16,"disabled":false,"hidden":false}]

Sorry can‘t import your flow as I have no access to my computer. But you can use msg.ui_control to hide the header. See the documentation and examples. The actual parameter Doc you can Find here. [image] Tabulator - Interactive JavaScript Tables Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library. There was a similar question a some weeks ago here in the forum too. The hight is always a little problematic as the grid size of the dashboard and the line hight of the table isn‘t the same. But you can play with the custom hight parameter via ui_control too.

[image] alcor007: b. You mention that it would be helpful to include fake data. I was under the impression that I had included inject nodes for testing with fake data, but in any case I realized that it would be more user friendly not to make 8 inject nodes, but one inject and 7 function nodes creating fake data. I hope this helps testing. Please let me know if I overlooked anything. Oops, when I looked at them quickly, i thought they were mqtt-in nodes (Coffee hadn't kicked in) I edited your post and fixed the flow so it can be imported Here is some CSS that will remove the header. You can play with a code inpector in a browser to see if tehre is any other CSS you want to add. [{"id":"28fcfab7.d56c8e","type":"ui_template","z":"c7ef0795.c699a8","group":"5af961eb.2cb0e","name":"CSS for table","order":0,"width":0,"height":0,"format":" \n .tabulator-header {\n display: none;\n }\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1060,"y":320,"wires":[["96972ba4.7ae5c8"]]},{"id":"5af961eb.2cb0e","type":"ui_group","z":"","name":"UPS A ","tab":"","order":1,"disp":true,"width":"6","collapse":true}] EDIT: or you can use @Christian-Me solution (jsaw his post after I entered mine :slightly_smiling_face:.

Found my old post about hiding headers [image] Callback as json argument General I took the ui-table example and modified it with "headerVisible": false [image] and I get this: [sWFidy3Lc0] I added your change node with mine (set to true) and I can switch the header on/off with the inject nodes And I updated to the latest version of the dashboard and ui-table (Node-RED 1.0.3) just to be shure. [{"id":"47813b5f.afda84","type":"inject","z":"ab797823.3396a8","name":"","topic":"","payload":"[{\"name\":\"MEQ0451495\",\"room\":\"Bathroom\",\"SET_TEMPERATURE-value\":22,\"AC…

Thank you @Christian-Me and @zenofmud ! I am going to try your suggestions and report back!

Thanks again @zenofmud. I got this to work: headers gone, AND I learned how to apply css in node-red (still a beginner, I am afraid). I really appreciate your efforts and patience to try and teach my node-red stuff!

Node-RED

Node-RED Forum

Formatting my Table

Dashboard

Christian-Me 16 May 2020 22:52 6

Found my old post about hiding headers

Topic		Replies	Views
Examples for node-red-node-ui-table Dashboard	92	48829	3 July 2020
Failure to create my first UI table Dashboard	26	2856	28 May 2021
Ui-table supports ui_control Dashboard	84	25897	12 July 2021
How does it function : node-red-node-ui-table? Dashboard	3	784	12 October 2020
Node-ui-table: Inconsistent load behavior, leading to changing no. of columns on refresh General	26	961	13 November 2023

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Formatting my Table

Related topics