Ui-table supports ui_control

Hello all,
ui-table supports now sending msg.ui_control messages to have more possibilities to style your dashboard table:


or with grouping

Example flow included but many other things should be possible. This Example is "generated" by data collected by my home automation system thermostat giving a compact overview of all values and settings with only one ui-node.

Curious to see what you can do with it. Comments always welcome.
Chris

4 Likes

Looks really great, Christian.

Would I be able to define the general color scheme of the table via msg.ui_control? I would like to customize in particular background colors for the first row/header row as well as the alternating colors for odd/even rows. In line with my dashboard theme.

Happy New Year to all :wink:

Hmm, in principle you should be able to do “everything” you can do with tabulator during initialization, either static or dynamic via callback functions. Perhaps take a look in the real comprehensive docs of tabulator first.
I’m not the css guy but it sounds like a custom css would be the right way to skin the table in general . As I’m happy with the midnight theme I did not focused on that problem but as far as I know there should be several other themes available for tabulator (perhaps not included in the ui-table note but that can be took into consideration).
I’m working currently on a PR to pass commands to an existing tabulator instance to add / delete or change existing data (and do other things) without replacing the data completely.
Happy new year too!

:slight_smile: ... CSS did the trick for me. I now do have a ui-template node, assigned to my ui-tables Group and I can customize the table so that is fits into the overall look and feel.

For reference if anybody wants to do something similar:

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

Check out for more information here: Examples for node-red-node-ui-table

1 Like

Can you post your flow?

It is inside the examples folder.

Goto “menu / import / examples / node-red-node-ui-table”

I took a look myself. It is actually no a callback. It is done by setting the formatter param “color” to an array of colors. At the same place you can set “min” and “max” and other things too: (scroll down to progress bar)

But you can use a callback if you like to implement smoother coloring like red=value*25.5 (for values from 0-100)