# 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:** 58

<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:** [3 January 2020 10:43 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/58 "2020-01-03T10:43:29Z")

</div>

CSS did the trick for me. I am now able to customize most important aspects of the table in order to make it a fit to my overall dashboard theme.

For reference if anybody wants to do something similar (just assign ui-template node to your ui-table's group):

```auto
[{"id":"eca62c1a.40bdf8","type":"ui_template","z":"113a5c80.015354","group":"c4aa95f6.0a88","name":"CSS: ui-table","order":1,"width":0,"height":0,"format":"<style>\n\n .tabulator{padding-left:2px;border:1px solid #000;background-color:#202529;font-size:17px}\n \n .tabulator .tabulator-header{border-bottom:0px solid #000;background-color:#202529}\n .tabulator-col-content{background-color:#202529;height:37px}\n\n .tabulator-row{min-height:31px;background-color:#181c1f}\n .tabulator-row:nth-child(2n){background-color:#202529}\n\n .tabulator-row .tabulator-cell{border-right:0px solid #888}\n .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1290,"y":2970,"wires":[[]]},{"id":"c4aa95f6.0a88","type":"ui_group","z":"","name":"Default","tab":"b06ddd9b.614eb8","order":1,"disp":false,"width":"24","collapse":false},{"id":"b06ddd9b.614eb8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```

Note:

- This one includes only those parameter I wanted to change. A lot more can be found in _./node\_modules/node-red-node-ui-table/lib/css/tabulator??????...?????.css_
- With .tabulator-row{min-height:31px} and .tabulator-col-content{height:37px} one can easily align the overall table-size to the corresponding group size
- **I yet have to find out how to vertically align text in both, header and table cells ... any hint is highly appreciated 😃**

..... example below

 ![Bildschirmfoto 2020-01-03 um 11.38.59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1b673c6a4566ada10b2e00e66fa6ba573a209ae6.jpeg)

---

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