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

**URL:** <https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [8 January 2024 11:19 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387 "2024-01-08T11:19:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisofCCL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrisofccl/32/42442_2.png) [@chrisofCCL](https://discourse.nodered.org/u/chrisofCCL)\
**Post date:** [8 January 2024 11:19 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387/1 "2024-01-08T11:19:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [8 January 2024 13:04 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387/2 "2024-01-08T13:04:31Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![chrisofCCL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrisofccl/32/42442_2.png) [@chrisofCCL](https://discourse.nodered.org/u/chrisofCCL)\
**Post date:** [9 January 2024 09:22 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387/3 "2024-01-09T09:22:14Z")

</div>

Thanks E1cid. Looking at it now.

Cheers

---

<div class="post-metadata">

**Author:** ![chrisofCCL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrisofccl/32/42442_2.png) [@chrisofCCL](https://discourse.nodered.org/u/chrisofCCL)\
**Post date:** [11 January 2024 09:54 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387/4 "2024-01-11T09:54:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chrisofCCL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrisofccl/32/42442_2.png) [@chrisofCCL](https://discourse.nodered.org/u/chrisofCCL)\
**Post date:** [11 January 2024 13:30 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387/5 "2024-01-11T13:30:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 February 2024 13:30 UTC](https://discourse.nodered.org/t/node-red-node-ui-table-node-cell-formatting/84387/6 "2024-02-10T13:30:59Z")

</div>

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