# Ui-table row change background color on updateorAddData
**URL:** https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849
**Category:** Dashboard
**Created:** [10 July 2020 12:50 UTC](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849 "2020-07-10T12:50:45Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@coppo23](https://discourse.nodered.org/u/coppo23)
#### Post date: [10 July 2020 12:50 UTC](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849/1 "2020-07-10T12:50:46Z")
I am using node-red-node-ui-table to show all the temperature devices in our house. I send the data from node-red using updateoradddata - works fine.
What I can;t do is set the background colour of the whole row when i update - can;t find out how to.
I have tried rowFormatter call back and that works when first rendering the table but is then not retriggered when I update the data.
My update message is shown here:
```auto
msg.payload = {
command :"updateOrAddData",
arguments:
[
[
{
"id": zoneId,
"room": zoneObj.name,
"area": zoneConfig.zoneType,
"ACTUAL_TEMPERATURE-value": zoneObj.temp,
"ACTUAL_TEMPERATURE-timeStamp": Number(zoneObj.timeStamp),
"BATTERY_STATE-value": zoneObj.battery,
"SET_TEMPERATURE-value": zoneObj.sPoint,
"nextsptime":zoneObj.nextsPointTime, //"nextsptime": nextSpointTimeStr,
"nextsptemp": zoneObj.nextsPoint,
"boostime": boostTimeStr,
"occupied": zoneConfig.occupied,
"status":statusStr,
"hardware":hardwareStr,
"error":errorStr,
}
]
]
}
return msg;
```
Help greatly appreciated. Answering this shoud help me to understand some otehr similar formatting tasks I'd like to achieve.
Cheers
Copp
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 July 2020 13:06 UTC](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849/2 "2020-07-10T13:06:50Z")
see this recent thread on exactly this topic
> [@The colorization of ui\_table is kicking me in the head!](https://discourse.nodered.org/t/the-colorization-of-ui-table-is-kicking-me-in-the-head/29625):
>
> I have a simple ui\_table node, populated the way I want, so far so good. Now I want to colorize an entire row text, say when a button is pressed, until the table updates again. For example press button, row text is turned green. When the row in the table is refreshed the text returns to default color. I guess what I am struggling with is how to use ui\_control to drive the ui\_table colorization? I don't know if I am over thinking this, or what. Any help greatly appreciated. thanks.
(TLDR: It's hard right now but we're working on it)
---
### Author:  [@coppo23](https://discourse.nodered.org/u/coppo23)
#### Post date: [10 July 2020 14:50 UTC](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849/3 "2020-07-10T14:50:36Z")
Ok - with more wading through the helpful stuff above and some lucky guesswork I have managed to colorize a row based on data update. (Have answered my own question.!)
I want the row background colour to be red if there is an error and the default colour otherwise.
Added this and it works a treat:
```auto
"rowUpdated": "function(row){ if(row.getData().error == (\"Error\")){ row.getElement().style.backgroundColor = \"#faa49d\"; }else{row.getElement().style.backgroundColor = \"\";}; }",
```
The error column is a non visible one i use to signal things to the table row - in this case background colour. That makes me think that adding a non visible field(or column) purely for the purposes of changing the data formatting is a useful technique. (willing to be told this is not good practice however.)
I need to colorise the font in the actual temperature colume based on how far away from the setpoint it is. I was going to do this in the column formatter using function but think it is easier to add another hidden column called setpointCol and send it with the data from node red. Cheating I know - but less painful than using tabulator formatter function.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [17 July 2020 10:19 UTC](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849/4 "2020-07-17T10:19:54Z")
with the latest update to the ui-table node (0.3.2) this should now be somewhat simpler - but nothing wring with what you have already.
```auto
[{"id":"5276ae0a.4105","type":"inject","z":"846d7832.3348c8","name":"add data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":620,"wires":[["6ebd4255.17ac3c"]]},{"id":"6ebd4255.17ac3c","type":"function","z":"846d7832.3348c8","name":"","func":"msg.payload = [\n {title:\"Row0\", test:\"red\", rest:\"More words\"},\n {title:\"Row1\", test:\"blue\", rest:\"More words\"},\n {title:\"Row2\", test:\"green\", rest:\"More words\"},\n {title:\"Row3\", test:\"yellow\", rest:\"More words\"},\n {title:\"Row4\", test:\"cyan\", rest:\"More words\"} \n]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":620,"wires":[["c140681b.2b13c8","54380dea.c7f404"]]},{"id":"c140681b.2b13c8","type":"ui_table","z":"846d7832.3348c8","group":"13b35473.20565c","name":"","order":0,"width":"6","height":"4","columns":[{"field":"title","title":"title","width":"25%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"test","title":"colour","width":"25%","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"rest","title":"words","width":"50%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":490,"y":620,"wires":[["e5c1e113.bdf3e","446a5b9b.703374"]]},{"id":"446a5b9b.703374","type":"function","z":"846d7832.3348c8","name":"","func":"\nvar m = { payload: {\n \"command\":\"deselectRow\",\n \"arguments\":[context.get(\"oldrow\") || 0],\n \"returnPromise\":false\n}};\nmsg.payload={\n \"command\":\"selectRow\",\n \"arguments\":[msg.row],\n \"returnPromise\":false\n}\ncontext.set(\"oldrow\",msg.row);\nreturn [[m,msg]];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":680,"wires":[["c140681b.2b13c8","905be523.cecbb8"]]},{"id":"e5c1e113.bdf3e","type":"debug","z":"846d7832.3348c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":620,"wires":[]},{"id":"6c5dbc15.6c1e04","type":"ui_template","z":"846d7832.3348c8","group":"13b35473.20565c","name":"","order":1,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":300,"y":580,"wires":[[]]},{"id":"13b35473.20565c","type":"ui_group","z":"","name":"Default","tab":"de4df751.046f08","order":3,"disp":false,"width":"6","collapse":false},{"id":"de4df751.046f08","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [31 July 2020 10:19 UTC](https://discourse.nodered.org/t/ui-table-row-change-background-color-on-updateoradddata/29849/5 "2020-07-31T10:19:59Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.