# Formatting my Table
**URL:** https://discourse.nodered.org/t/formatting-my-table/26755
**Category:** Dashboard
**Created:** [16 May 2020 13:50 UTC](https://discourse.nodered.org/t/formatting-my-table/26755 "2020-05-16T13:50:33Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@alcor007](https://discourse.nodered.org/u/alcor007)
#### Post date: [16 May 2020 13:50 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/1 "2020-05-16T13:50:33Z")
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**
```auto
[{"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 = '![](\"http://192.168.1.75/mqtt/temperature.png\")
';\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 ![](\"http://192.168.1.75/mqtt/humidity2.png\") | \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}]
```
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [16 May 2020 14:43 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/2 "2020-05-16T14:43:14Z")
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
---
### Author:  [@alcor007](https://discourse.nodered.org/u/alcor007)
#### Post date: [16 May 2020 15:40 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/3 "2020-05-16T15:40:03Z")
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**
```auto
[{"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}]
```
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [16 May 2020 19:42 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/4 "2020-05-16T19:42:25Z")
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.
> **[Tabulator - Interactive JavaScript Tables](http://tabulator.info/docs/4.5/columns#header-visibility)**
>
> 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.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [16 May 2020 19:57 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/5 "2020-05-16T19:57:56Z")
> [@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.
```auto
[{"id":"28fcfab7.d56c8e","type":"ui_template","z":"c7ef0795.c699a8","group":"5af961eb.2cb0e","name":"CSS for table","order":0,"width":0,"height":0,"format":"","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 🙂.
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [16 May 2020 22:52 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/6 "2020-05-16T22:52:53Z")
Found my old post about hiding headers
> [@Callback as json argument](https://discourse.nodered.org/t/callback-as-json-argument/24529/11):
>
> I took the ui-table example and modified it with "headerVisible": false [image] and I get this: 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…
---
### Author:  [@alcor007](https://discourse.nodered.org/u/alcor007)
#### Post date: [17 May 2020 13:16 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/7 "2020-05-17T13:16:03Z")
Thank you @Christian-Me and @zenofmud ! I am going to try your suggestions and report back!
---
### Author:  [@alcor007](https://discourse.nodered.org/u/alcor007)
#### Post date: [19 May 2020 14:30 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/8 "2020-05-19T14:30:00Z")
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!
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 June 2020 14:30 UTC](https://discourse.nodered.org/t/formatting-my-table/26755/9 "2020-06-18T14:30:07Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.