Examples for node-red-node-ui-table

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):

[{"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 :smiley:

..... example below

4 Likes