Examples for node-red-node-ui-table

I am there, finally :slight_smile:

  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 :slight_smile:
  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 :wink:) in the title field of ui-table node

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

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

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

7 Likes