Node-red-node-ui-table node, cell formatting

Dashboard
1

I may be being thick here, but having read the documentation about formatting tables, I still don't get it. I want to use the Format-Color or Format-Traffic options to colour a single cell red or amber. How would I do that based on the standard example (below), for example colouring in the "Favourite Color: red" cell as red?
[
{
"Name": "Kazuhito Yokoi",
"Age": "35",
"Favourite Color": "red",
"Date Of Birth": "12/09/1983"
},
{
"Name": "Oli Bob",
"Age": "12",
"Favourite Color": "cyan",
"Date Of Birth": "12/08/2017"
}
]

Any help greatly appreciated

2

Example check ui-table config settings in Favourite Color format section.

[{"id":"cb53cb76.5fd0d8","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[ { \"Name\": \"Kazuhito Yokoi\", \"Age\": \"35\", \"Favourite Color\": \"red\", \"Date Of Birth\": \"12/09/1983\" }, { \"Name\": \"Oli Bob\", \"Age\": \"12\", \"Favourite Color\": \"cyan\", \"Date Of Birth\": \"12/08/2017\" } ]","payloadType":"json","x":190,"y":2520,"wires":[["7d48e13.90ee22"]]},{"id":"7d48e13.90ee22","type":"ui_table","z":"d1395164b4eec73e","group":"571a38b1.5e3638","name":"People","order":1,"width":"8","height":"3","columns":[{"field":"Name","title":"Name","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Age","title":"Age","width":"40","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Favourite Color","title":"Favourite Color","width":"5%","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"Date Of Birth","title":"D.O.B","width":"80","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":400,"y":2480,"wires":[]},{"id":"571a38b1.5e3638","type":"ui_group","name":"Richer Table","tab":"29ec6908.552b36","order":1,"disp":true,"width":"8","collapse":false},{"id":"29ec6908.552b36","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

There are plenty of examples in
import > examples > ui-table

3

Thanks E1cid. Looking at it now.

Cheers

4

ok, I now have it working properly and I have now configured the table using the msg.ui_control.tabulator object.

However, my next question is how to either delete the whole table dynamically, so a different table or UI device can be put in its place, or overwrite the msg.ui_control.tabulator column definitions. If I send a new msg.ui_control.tabulator object, it simply adds the new columns to the old ones.

5

If anyone is interested, i have found the answer. You set a visible:false property on all of the existing columns and re-send the msg.ui_control object to the table node. You can then switch columns on and off dynamically, or even replace the whole table. To restore them, just re-send the original msg.ui_control but make sure that visible:true is set explicitly on each column you want to restore.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.