# Examples for node-red-node-ui-table

**URL:** <https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256>\
**Category:** Dashboard\
**Created:** [12 August 2019 17:52 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256 "2019-08-12T17:52:43Z")\
**Posts on this page:** 1\
**Showing post:** 63

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [8 January 2020 12:27 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/63 "2020-01-08T12:27:25Z")

</div>

I am there, finally 🙂

1. I managed to also vertically align text with the addition of _padding-top_ to my ui-template.
2. I additionally hid the sort arrows in the header column and extended the header cells width with _visibility_ and _padding-right_ to create extra space for titles. Sorting via column click still works 🙂
3. And finally I was able to align text in header cells differently for each cell with f.e. _\>p style="text-align:center;"\>∆°C\</p\<_ .... (just change \>\< at the beginning/end of this argument 😉) in the title field of ui-table node

My final CSS-ui-template (just assign ui-template node to your ui-table's group)::

```auto
[{"id":"eca62c1a.40bdf8","type":"ui_template","z":"113a5c80.015354","group":"f181724f.1e4828","name":"CSS: ui-table","order":1,"width":"0","height":"0","format":"<style>\n\n/* Tabelle selbst formatieren*/\n\n .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#202529;font-size:18px}\n\n/* Header formatieren */\n .tabulator .tabulator-header{border-bottom:1px solid #BBB;background-color:#202529}\n .tabulator-col-content{background-color:#202529;height:37px}\n .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#202529}\n .tabulator-arrow{visibility: collapse;}\n .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}\n\n/* Zellen formatieren*/\n .tabulator-row{min-height:31px;background-color:#181c1f}\n .tabulator-row:nth-child(2n){background-color:#202529}\n .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}\n\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1250,"y":3340,"wires":[[]]},{"id":"f181724f.1e4828","type":"ui_group","z":"","name":"Raumklima","tab":"5a91a4b3.406c04","order":5,"disp":true,"width":"6","collapse":true},{"id":"5a91a4b3.406c04","type":"ui_tab","z":"","name":"Zentral","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

My final table:

 ![Bildschirmfoto 2020-01-08 um 13.22.39](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/22d5b84fd432e7fca3690016657881f20d1ddd22.jpeg)

DISCLAIMER: I am not at all a developer. However, I do like puzzles like this. Hence I was digging and searching until I found a "solution" for me ... at least 😃

---

_[View the full topic](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256)._