JSON Tabulator change font color

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...

[{"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}]
1 Like

Ok. I found out the way!

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

1 Like

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