# JSON Tabulator change font color

**URL:** <https://discourse.nodered.org/t/json-tabulator-change-font-color/41392>\
**Category:** Dashboard\
**Created:** [22 February 2021 03:12 UTC](https://discourse.nodered.org/t/json-tabulator-change-font-color/41392 "2021-02-22T03:12:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![wingkuan98](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wingkuan98/32/36617_2.png) [@wingkuan98](https://discourse.nodered.org/u/wingkuan98)\
**Post date:** [22 February 2021 03:12 UTC](https://discourse.nodered.org/t/json-tabulator-change-font-color/41392/1 "2021-02-22T03:12:18Z")

</div>

Hi,

May I know how can I have conditional formatting for text color? Let's say if the temperature below 22 then text color is red and above 40 is green...

```auto
[{"id":"176722bb.75815d","type":"ui_table","z":"abc404b5.ffb248","group":"a0faa353.c07aa","name":"","order":0,"width":"7","height":"13","columns":[],"outputs":0,"cts":false,"x":630,"y":260,"wires":[]},{"id":"4315bebf.b4bb8","type":"function","z":"abc404b5.ffb248","name":"","func":"msg.payload = [\n {name:\"Office-A\", location:\"\", gender:\"\", cavity:\"\", code: \"\", col:\"\", dob:\"\", _children:[\n {name:\"Zap-Air-1\", location:\"22.5\", gender:\"45.2\", cavity:\"45.0\", code: \"22.2\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-2\", location:\"23.2\", gender:\"55.4\", cavity:\"45.0\", code: \"25.2\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-3\", location:\"22.8\", gender:\"52.2\", cavity:\"45.0\", code: \"24.5\", col:\"FAN\", dob:\"ON\"},\n]},\n {name:\"Zap-Air-4\", location:\"24.5\", cavity:\"45.0\", code:\"18.5\", gender:\"33.8\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-5\", location:\"24.5\", cavity:\"45.0\", code:\"21.8\", gender:\"42.5\", col:\"FAN\", dob:\"ON\"}, \n {name:\"Laboratory\", location:\"\", cavity:\"\", code:\"\", gender:\"\", col:\"\", dob:\"\", _children:[\n {name:\"Zap-Air-6\", location:\"26.5\", cavity:\"45.0\", gender:\"44.5\", code: \"22.0\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-7\", location:\"25.5\", cavity:\"45.0\", gender:\"46.2\", code: \"20.8\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-8\", location:\"26.2\", cavity:\"45.0\",gender:\"45.5\",code: \"21.9\", col:\"FAN\", dob:\"ON\"},\n]},\n {name:\"Production Line 1\", location:\"\", cavity:\"\", code:\"\", gender:\"\", col:\"\", dob:\"\", _children:[\n {name:\"Zap-Air-9\", location:\"26.5\", cavity:\"45.0\",gender:\"55.2\", code: \"15.2\", col:\"IDLE\", dob:\"OFF\"},\n {name:\"Zap-Air-10\", location:\"26.2\", cavity:\"45.0\", gender:\"55.3\", code: \"15.0\", col:\"IDLE\", dob:\"OFF\"},\n {name:\"Zap-Air-11\", location:\"26.1\", cavity:\"45.0\",gender:\"56.2\",code: \"15.0\", col:\"IDLE\", dob:\"OFF\"},\n]},\n {name:\"Zap-Air-12\", location:\"26.5\", cavity:\"45.0\", code:\"28.2\", gender:\"62.2\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-13\", location:\"26.5\", cavity:\"45.0\", code:\"29.0\", gender:\"60.3\", col:\"IDLE\", dob:\"OFF\"}, \n {name:\"Production Line 2\", location:\"\", cavity:\"\", code:\"\", gender:\"\", col:\"\", dob:\"\", _children:[\n {name:\"Zap-Air-14\", location:\"26.5\", gender:\"42.8\", cavity:\"45.0\", code:\"22.5\", col:\"FAN\", dob:\"ON\"},\n {name:\"Zap-Air-15\", location:\"26.5\", gender:\"40.5\", cavity:\"45.0\", code: \"15.0\", col:\"IDLE\", dob:\"OFF\"},\n {name:\"Zap-Air-16\", location:\"26.4\", gender:\"43.2\", cavity:\"45.0\", code: \"23.9\", col:\"FAN\", dob:\"ON\"},\n]},\n];\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":260,"wires":[["67111667.602f78"]]},{"id":"67111667.602f78","type":"change","z":"abc404b5.ffb248","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\t \"tabulator\":{\t \"data\":msg.payload,\t \"dataTree\":true,\t \"dataTreeStartExpanded\":true,\t \"columns\":[\t {\t \"title\":\"Location\",\t \"field\":\"name\",\t \"width\":110,\t \"responsive\":0\t \t },\t {\t \"title\":\"Temperature (C)\",\t \"field\":\"location\",\t \"width\":25,\t \"headerVertical\": true\t \t },\t {\t \"title\":\"Humidity (%)\",\t \"field\":\"gender\",\t \"width\":25,\t \"responsive\":2,\t \"headerVertical\": true\t \t },\t {\t \"title\":\"Humidity Set Point\",\t \"field\":\"cavity\",\t \"width\":25,\t \"responsive\":2,\t \"headerVertical\": true\t },\t {\t \"title\":\"Power\",\t \"field\":\"code\",\t \"width\":25,\t \"responsive\":2,\t \"headerVertical\": true\t },\t {\t \"title\":\"Status\",\t \"field\":\"col\",\t \"width\":40,\t \"responsive\":2,\t \"headerVertical\": true\t },\t {\t \"title\":\"Fan Control\",\t \"field\":\"dob\",\t \"align\":\"center\",\t \"width\":25,\t \"editor\":true,\t \"headerVertical\": true\t }\t]\t\t }\t\t}","tot":"jsonata"},{"t":"set","p":"ui_control.customHeight","pt":"msg","to":"30","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":260,"wires":[["176722bb.75815d"]]},{"id":"20c8600a.78ed3","type":"inject","z":"abc404b5.ffb248","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":260,"wires":[["4315bebf.b4bb8"]]},{"id":"a0faa353.c07aa","type":"ui_group","z":"","name":"Overall Equipment View","tab":"eca4cad1.b7ccb8","order":1,"disp":true,"width":"7","collapse":false},{"id":"eca4cad1.b7ccb8","type":"ui_tab","z":"","name":"ZAP-AIR REMOTE","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![wingkuan98](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wingkuan98/32/36617_2.png) [@wingkuan98](https://discourse.nodered.org/u/wingkuan98)\
**Post date:** [22 February 2021 05:11 UTC](https://discourse.nodered.org/t/json-tabulator-change-font-color/41392/2 "2021-02-22T05:11:37Z")

</div>

Ok. I found out the way!

```auto
"formatter" : "function(cell, formatterParams){var value = cell.getValue();if(value >= 23){cell.getElement().style.color ='red';cell.getElement().style.backgroundColor ='yellow'} return value;}"

```

---

<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:** [8 March 2021 05:11 UTC](https://discourse.nodered.org/t/json-tabulator-change-font-color/41392/3 "2021-03-08T05:11:59Z")

</div>

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