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
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}]