Formatting my Table

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:

  1. I cannot get rid of the gray headers in the table
  2. 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

Dashboard

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 = '<img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\">';\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":"<TABLE ID =\"Temperatuur\" border=\"0\" style=\"width:100%\">\n<TR>\n    <TD style=\"width:40%\" align=\"left\">Studeerkamer</TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.studeertemp}}</TD>\n    <TD style=\"width:10%\" align=\"right\"></TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"16\" height=\"16\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.studeerhum}}</TD>\n</TR>\n<TR>\n    <TD style=\"width:40%\" align=\"left\">Slaapkamer</TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.slaaptemp}}</TD>\n    <TD style=\"width:10%\" align=\"right\"></TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"16\" height=\"16\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.slaaphum}}</TD>\n</TR>\n<TR>\n    <TD style=\"width:40%\" align=\"left\">Paul</TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.room3temp}}</TD>\n    <TD style=\"width:10%\" align=\"right\"></TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"16\" height=\"16\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.room3hum}}</TD>\n</TR>\n</TABLE>","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 = '<img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"18\" height=\"18\">';\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

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":"<TABLE ID =\"Temperatuur\" border=\"0\" style=\"width:100%\">\n<TR>\n    <TD style=\"width:40%\" align=\"left\">Studeerkamer</TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.studeertemp}}</TD>\n    <TD style=\"width:10%\" align=\"right\"></TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"16\" height=\"16\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.studeerhum}}</TD>\n</TR>\n<TR>\n    <TD style=\"width:40%\" align=\"left\">Slaapkamer</TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.slaaptemp}}</TD>\n    <TD style=\"width:10%\" align=\"right\"></TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"16\" height=\"16\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.slaaphum}}</TD>\n</TR>\n<TR>\n    <TD style=\"width:40%\" align=\"left\">Room 3</TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/temperature.png\" width=\"18\" height=\"18\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.room3temp}}</TD>\n    <TD style=\"width:10%\" align=\"right\"></TD>\n    <TD style=\"width:10%\" align=\"right\"><img src=\"http://192.168.1.75/mqtt/humidity2.png\" width=\"16\" height=\"16\"></TD>\n    <TD style=\"width:10%\" align=\"right\">{{msg.payload.room3hum}}</TD>\n</TR>\n</TABLE>","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.

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.

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":"<style>\n    .tabulator-header {\n        display: none;\n    }\n</style>","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

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!

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