# Ui-table with custom colors
**URL:** https://discourse.nodered.org/t/ui-table-with-custom-colors/45769
**Category:** Dashboard
**Created:** [17 May 2021 08:58 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769 "2021-05-17T08:58:18Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@storock](https://discourse.nodered.org/u/storock)
#### Post date: [17 May 2021 08:58 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/1 "2021-05-17T08:58:19Z")
Hi there, i have an dashbord with some datas from as/400 - works fine. In some cases i will color a cell in red or green, but i have no idea, how this could work. I have search for resolution in forums with no crucial note. The goal is to color the last column.
here is my flow:
```auto
[{"id":"1f5d8903.5cdef7","type":"DB2 for i","z":"1881f69b.592019","mydb":"9a3f5153.5dafc","name":"Local","arraymode":true,"x":610,"y":300,"wires":[["1d2877c4.98b4b8"]]},{"id":"e3af6e19.35e7e","type":"function","z":"1881f69b.592019","name":"Lesen activeJobs","func":"msg.payload = \"SELECT SUBSYSTEM, JOB_NAME, AUTHORIZATION_NAME, FUNCTION_TYPE, FUNCTION, JOB_STATUS FROM TABLE (QSYS2.ACTIVE_JOB_INFO(DETAILED_INFO => 'NONE')) X WHERE JOB_STATUS = 'MSGW'\";\n\nreturn msg;\n","outputs":1,"noerr":0,"x":410,"y":300,"wires":[["1f5d8903.5cdef7"]]},{"id":"1d2877c4.98b4b8","type":"ui_etable","z":"1881f69b.592019","payload":"[{\"title\":\"Subsystem\",\"field\":\"SUBSYSTEM\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Jobname\",\"field\":\"JOB_NAME\",\"width\":\"25%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Benutzer\",\"field\":\"AUTHORIZATION_NAME\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Funktion Typ\",\"field\":\"FUNCTION_TYPE\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Funktion\",\"field\":\"FUNCTION\",\"width\":\"15%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false},{\"title\":\"Status\",\"field\":\"JOB_STATUS\",\"width\":\"13%\",\"editor\":false,\"align\":\"left\",\"headerFilter\":false,\"formatter\":\"function(row){node.warn(row.getData());if(row.getData() == (\\\"MSGW\\\")){ row.getElement().style.backgroundColor = \\\"#ff0000\\\"; }else{row.getElement().style.backgroundColor = \\\"\\\";}; }\"}]","payloadType":"json","options":"{\"movableColumns\":true,\"layout\":\"fitColumns\",\"height\":\"500px\",\"responsiveLayout\":\"collapse\",\"autoResize\":true,\"resizableColumns\":true}","group":"2eaac407.20beec","name":"Jobs in MSGW","order":1,"width":"20","height":"5","columns":[],"outputs":1,"cts":false,"x":840,"y":300,"wires":[["fd4fa4c6.a207f8"]]},{"id":"9e96aac0.850208","type":"inject","z":"1881f69b.592019","name":"","topic":"Jobs in MSGW","payload":"","payloadType":"str","repeat":"30","crontab":"","once":true,"onceDelay":0.1,"x":170,"y":300,"wires":[["e3af6e19.35e7e"]]},{"id":"7c564f7a.644a3","type":"ui_ui_control","z":"1881f69b.592019","name":"ui start","events":"all","x":210,"y":220,"wires":[["e3af6e19.35e7e"]]},{"id":"fd4fa4c6.a207f8","type":"debug","z":"1881f69b.592019","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1090,"y":300,"wires":[]},{"id":"9a3f5153.5dafc","type":"DB2 for i Config","z":"","cnnname":"Local","db":"*LOCAL","keepalive":false},{"id":"2eaac407.20beec","type":"ui_group","z":"","name":"Test","tab":"471ad565.a82f0c","order":7,"disp":true,"width":"20","collapse":false},{"id":"471ad565.a82f0c","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]
```
Admin Edit: wrap flow with three backticks
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 May 2021 09:06 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/2 "2021-05-17T09:06:59Z")
> [@storock](#):
>
> In some cases i will color a cell in red or green, but i have no idea, how this could work
Have you tried the built in demos?
CTRL+I → Examples
---
### Author:  [@storock](https://discourse.nodered.org/u/storock)
#### Post date: [17 May 2021 09:31 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/3 "2021-05-17T09:31:36Z")
Hi steve, thanks for the response. Yes , i have tried all of the examples, but nothing of them matched.
---
### Author:  [@Nathanli](https://discourse.nodered.org/u/Nathanli)
#### Post date: [18 May 2021 03:03 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/4 "2021-05-18T03:03:37Z")
Is there a solution now?
---
### Author:  [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [18 May 2021 06:48 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/5 "2021-05-18T06:48:43Z")
Yes it is possible. The solution depends on how you like to trigger the colour change.
But as far a I know you have to write your own formatter call-back function by passing it in an `msg.ui_control` message. This is described in example 3 and the [readme](https://flows.nodered.org/node/node-red-node-ui-table).
In the example the callback function adds the unit each value:
```auto
function(cell, formatterParams, onRendered){
return cell.getValue()+"°C";
}
```
if you add for example an indicator for temperatures \>=30°C it should look like this:
```auto
function(cell, formatterParams, onRendered){
var temp = cell.getValue();
if(temp >= 30){
cell.getElement().css({"background":"red"});
}
return temp+"°C";
}
```
Node: Not tested. Followed the post [here](https://github.com/olifolkerd/tabulator/issues/685#issuecomment-341579977)
Hope this helps
Chris
---
### Author:  [@storock](https://discourse.nodered.org/u/storock)
#### Post date: [18 May 2021 12:07 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/6 "2021-05-18T12:07:43Z")
it's at least a partial success. The cell contents can be changed, but .css color setting don't work.
---
### Author:  [@storock](https://discourse.nodered.org/u/storock)
#### Post date: [18 May 2021 13:38 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/7 "2021-05-18T13:38:33Z")
So, after some hard hours i have the solution: it's a formatter function, which sets the cell.getElement().style.backgroundColor.
Here is the flow:
```auto
[{"id":"6e8312e0.2cba2c","type":"change","z":"1881f69b.592019","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columns\":[{\"title\":\"Subsystem\",\"field\":\"SUBSYSTEM\",\"width\":100,\"align\":\"left\"},{\"title\":\"Jobname\",\"field\":\"JOB_NAME\",\"width\":200,\"align\":\"left\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Jobstatus\",\"field\":\"JOB_STATUS\",\"width\":100,\"align\":\"left\",\"color\":\"ff0000\",\"formatter\":\"function(cell, formatterParams, onRendered) {var status = cell.getValue(); if(status == 'MSGW') {cell.getElement().style.backgroundColor=\\\"#ff0000\\\";}else{cell.getElement().style.backgroundColor=\\\"#39ff14\\\";} return status;}\"}],\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["fd4fa4c6.a207f8","33d0f556.d2b41a"]]}]
```
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [1 June 2021 13:38 UTC](https://discourse.nodered.org/t/ui-table-with-custom-colors/45769/8 "2021-06-01T13:38:52Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.