# Using ui\_table 'tickCross' colorization?

**URL:** <https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145>\
**Category:** General\
**Created:** [15 July 2022 14:23 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145 "2022-07-15T14:23:33Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2022 14:23 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/1 "2022-07-15T14:23:33Z")

</div>

Comparing ui\_table tickCloss formatter to the tabulator examples, I noticed that the tickCross is the same color be it true/false or 1/0. Is there a way to color the tick or cross? For example, for tick use the default theme color, but if a cross, say red?

I am already using a render function to colorize the entire row, so if I change the foreground color would that do it? Just not sure how the tick/cross code logic works.

I tried this... but did not seem to work...

```auto
 "formatter": "function(cell, formatterParams, onRendered) { var status = cell.getValue(); if (status===false) { cell.getElement().style.color='red'; } return status; }",

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 July 2022 15:44 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/2 "2022-07-15T15:44:28Z")

</div>

> [@Nodi.Rubrum](#):
>
> Is there a way to color the tick or cross?

I tweaked the ui\_table example that uses a `msg.ui_control` configuration.  
When the formatter is `tickCross` you can use the `tickElement` and `crossElement` with added custom styling.

In the tickElement, you can see that i used the  
`color:var(--nr-dashboard-pageTitlebarBackgroundColor)`  
so the tick matches the Dashboard default theme color.

```auto
{
                        "formatterParams": {
                            "target": "_blank",
                            "allowEmpty": true,
                            "allowTruthy": true,
                            "tickElement": "<i class='fa fa-check' style='color:var(--nr-dashboard-pageTitlebarBackgroundColor)'></i>",
                            "crossElement": "<i class='fa fa-times-circle' style='color:red;'></i>"
                        },
                        "title": "Auto",
                        "field": "AUTO_MODE-value",
                        "formatter": "tickCross",
                        "width": 100,
                        "align": "center"
                    },

```

**Demo Flow:**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c48b38ddd71600db5a980e373be0484ed9916f5.png)

```auto
[{"id":"adea6a2e180d669f","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"MEQ0451495\",\"room\":\"Bathroom\",\"SET_TEMPERATURE-value\":22,\"ACTUAL_TEMPERATURE-value\":21.8,\"VALVE_STATE-value\":90,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":true,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875547\",\"room\":\"Living Room\",\"SET_TEMPERATURE-value\":12,\"ACTUAL_TEMPERATURE-value\":16.2,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":true,\"CONTROL_MODE-value\":1},{\"name\":\"MEQ1875538\",\"room\":\"Living Room\",\"SET_TEMPERATURE-value\":18,\"ACTUAL_TEMPERATURE-value\":19.5,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.6,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":2},{\"name\":\"MEQ0447462\",\"room\":\"Kitchen\",\"SET_TEMPERATURE-value\":17,\"ACTUAL_TEMPERATURE-value\":22.2,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":10,\"AUTO_MODE-value\":true,\"CONTROL_MODE-value\":3},{\"name\":\"MEQ1875551\",\"room\":\"Office\",\"SET_TEMPERATURE-value\":18,\"ACTUAL_TEMPERATURE-value\":20.2,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ0447425\",\"room\":\"Dining Room\",\"SET_TEMPERATURE-value\":19,\"ACTUAL_TEMPERATURE-value\":20.4,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875546\",\"room\":\"Dining Room\",\"SET_TEMPERATURE-value\":20,\"ACTUAL_TEMPERATURE-value\":18.8,\"VALVE_STATE-value\":99,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ0447483\",\"room\":\"Bedroom\",\"SET_TEMPERATURE-value\":17,\"ACTUAL_TEMPERATURE-value\":22.4,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":true,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875541\",\"room\":\"Child\",\"SET_TEMPERATURE-value\":18,\"ACTUAL_TEMPERATURE-value\":20.4,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875552\",\"room\":\"Guest Room\",\"SET_TEMPERATURE-value\":20,\"ACTUAL_TEMPERATURE-value\":21.1,\"VALVE_STATE-value\":9,\"BATTERY_STATE-value\":2.8,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0}]","payloadType":"json","x":290,"y":2460,"wires":[["a2b00c70628bd27e"]]},{"id":"a2b00c70628bd27e","type":"change","z":"54efb553244c241f","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columnResized\":\"function(column){ var newColumn = { field: column._column.field, visible: column._column.visible, width: column._column.width, widthFixed: column._column.widthFixed, widthStyled: column._column.widthStyled }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }\",\"columnMoved\":\"function(column, columns){ var newColumns=[]; columns.forEach(function (column) { newColumns.push({'field': column._column.field}); }); this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }\",\"groupHeader\":\"function (value, count, data, group) {return value + \\\"<span style='color:#d00; margin-left:10px;'>(\\\" + count + \\\" Termostat\\\"+((count>1) ? \\\"e\\\" : \\\"\\\") + \\\")</span>\\\";}\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"ROom\",\"field\":\"room\",\"width\":100,\"frozen\":true},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Device\",\"field\":\"name\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Type\",\"field\":\"deviceType\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Measurements\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"target\",\"field\":\"SET_TEMPERATURE-value\",\"formatter\":\"function(cell, formatterParams, onRendered){return cell.getValue()+'°C';}\",\"topCalc\":\"avg\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"min\":10,\"max\":25,\"color\":[\"blue\",\"green\",\"red\"],\"legend\":\"function (value) {return '&nbsp;&nbsp;'+value+'°C';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"left\"},\"title\":\"current\",\"field\":\"ACTUAL_TEMPERATURE-value\",\"formatter\":\"progress\",\"topCalc\":\"avg\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":99,\"color\":[\"gray\",\"orange\",\"red\"],\"legend\":\"function (value) {return (value>0)? '&nbsp;&nbsp;'+value+' %' : '-';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"Valve\",\"field\":\"VALVE_STATE-value\",\"formatter\":\"progress\",\"topCalc\":\"max\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"min\":1.5,\"max\":4.6,\"color\":[\"red\",\"orange\",\"green\"],\"legend\":\"function (value) {return value+' V';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"Batt\",\"field\":\"BATTERY_STATE-value\",\"formatter\":\"progress\",\"topCalc\":\"min\",\"width\":100}]},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Settings\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":30,\"color\":[\"red\",\"orange\",\"green\"],\"legend\":\"function (value) { if (value>0) return \\\"<span style='color:#101010;'>\\\"+value+\\\" min</span>\\\"; else return \\\"<span style='color:#A0A0A0;'>aus</span>\\\"; }\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"Boost\",\"field\":\"BOOST_STATE-value\",\"formatter\":\"progress\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"allowEmpty\":true,\"allowTruthy\":true,\"tickElement\":\"<i class='fa fa-check' style='color:var(--nr-dashboard-pageTitlebarBackgroundColor)'></i>\",\"crossElement\":\"<i class='fa fa-times-circle' style='color:red;'></i>\"},\"title\":\"Auto\",\"field\":\"AUTO_MODE-value\",\"formatter\":\"tickCross\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Mode\",\"field\":\"CONTROL_MODE-value\",\"formatter\":\"function(cell, formatterParams, onRendered){ var html=\\\"<i class=\\\\\\\"\\\"; switch(cell.getValue()) { case 0: html+=\\\"fa fa-calendar-check-o\\\"; break; case 1: html+=\\\"fa fa-hand-o-up\\\"; break; case 2: html+=\\\"fa fa-suitcase\\\"; break; case 3: html+=\\\"fa fa-spinner fa-spin fa-fw\\\"; break; } html+='\\\\\\\"></i>'; return html; }\",\"width\":100,\"align\":\"center\"}]}],\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"},\"customHeight\":12}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":436,"y":2460,"wires":[["64210cf621fa0da5"]]},{"id":"bd5a8f10417763e5","type":"debug","z":"54efb553244c241f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":749,"y":2460,"wires":[]},{"id":"64210cf621fa0da5","type":"ui_table","z":"54efb553244c241f","group":"51ce6aa1.620754","name":"Thermostats","order":1,"width":"20","height":"7","columns":[],"outputs":1,"cts":true,"x":599,"y":2460,"wires":[["bd5a8f10417763e5"]]},{"id":"51ce6aa1.620754","type":"ui_group","name":"ui_control","tab":"3b08fac0.8f06b6","order":1,"disp":true,"width":"22","collapse":false},{"id":"3b08fac0.8f06b6","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2022 16:03 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/3 "2022-07-15T16:03:15Z")

</div>

Ah... tickElement... that makes more sense than the foreground color of the cell! I will give this a shot, thanks! And, this is done per column as well? Is there a way to apply these formatter parameters across all columns that are set to tickCross formatter?

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2022 19:23 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/4 "2022-07-15T19:23:06Z")

</div>

Ok,, got the tick/cross element icon assignment working, and static color of course. Now for the bonus question? Can you sneak in a colorization that is more dynamic? Say I assigned a message part to a color...

msg.iconcolor='blue';

But slipping this message part into the JSON formatted text, does not seem to be rendered? Maybe I am doing it wrong?

```auto
"tickElement": "<i class='fa fa-check' style='color:var(--nr-dashboard-pageTitlebarBackgroundColor)'></i>",
"crossElement": "<i class='fa fa-times-circle' style='color:{msg.iconcolor}'></i>"

```

Or...

```auto
"tickElement": "<i class='fa fa-check' style='color:var(--nr-dashboard-pageTitlebarBackgroundColor)'></i>",
"crossElement": "<i class='fa fa-times-circle' style='color:{{iconcolor}}'></i>"

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [15 July 2022 19:50 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/5 "2022-07-15T19:50:03Z")

</div>

> [@Nodi.Rubrum](#):
>
> Can you sneak in a colorization that is more dynamic?

sure .. just switch in the Change node (the one that creates the ui\_control msg)  
instead of using { } JSON to use an **Expression** and then you can use jsonata with something like

```auto
"tickElement":"<i class='fa fa-check' style='color:var(--nr-dashboard-pageTitlebarBackgroundColor)'></i>",
"crossElement":"<i class='fa fa-times-circle' style='color:" & msg.iconcolor &";'></i>"

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/0504a4ac86964c40493381f7de47dbaab62c95cf.png)

> [@Nodi.Rubrum](#):
>
> And, this is done per column as well? Is there a way to apply these formatter parameters across all columns that are set to tickCross formatter?

just saw you question .. i dont think there is a way to apply the formatting for many columns. because you need to specify the individual `field` which is linked to the data etc .. maybe with some advanced javascript map() code you can construct an array for multiple columns with the same formatting .. but if its not many columns maybe its better to just copy / paste the same lines a few times 😉

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2022 21:29 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/6 "2022-07-15T21:29:59Z")

</div>

Yeah, as I have been changing and testing things, the complexity of trying to setup common formatter parameters for a few columns (in my use case) is not worth the complexity that would result.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2022 21:33 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/7 "2022-07-15T21:33:38Z")

</div>

So expression variant accepts the variable references... but JSON is executed, or parsed rather just as HTML. I take it, it is the expression type that invokes the evaluation before the final HTML is rendered. I say this to remind me of this fact, and that anyone reading this will gain potential insight.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [18 July 2022 17:55 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/8 "2022-07-18T17:55:22Z")

</div>

One more question... A bit of curve... colorize plain text? Since there does not seem to be an explicit 'element' the following did not work....

"textElement":"

"

Odd, Google tabulator references and did not seem to find a straight forward example of just colorizing plain text.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [18 July 2022 18:31 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/9 "2022-07-18T18:31:38Z")

</div>

> [@Nodi.Rubrum](#):
>
> colorize plain text

if its a style that you need to apply for all rows .. you can use  
`"rowFormatter": "function(row){ row.getElement().style.color = 'green'; }",`

```auto
"tabulator": {
        ...
        "rowFormatter": "function(row){row.getElement().style.color = 'green'; //apply css change to row element}",
        "columns": [
            ...

```

if a column has it own specific formatting then that will be applied overriding the `rowFormatter` style

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [18 July 2022 20:20 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/10 "2022-07-18T20:20:24Z")

</div>

I just realized I asked the question wrong, this specific case is per cell, based on the value of the cell. I just realized as I was changing the code, that the entire row changed or the entire column changed.

I think this the direction I am going to need to follow...

```auto
{title:"Name", field:"name", formatter:function(cell, formatterParams, onRendered){
    //cell - the cell component
    //formatterParams - parameters set for the column
    //onRendered - function to call when the formatter has been rendered

    return "Mr" + cell.getValue(); //return the contents of the cell;
},
}

```

The above is not specific to what I am trying to do, but I think is close, say if the value is 10, I want it to be green, 20 then yellow that type of idea.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [18 July 2022 20:27 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/11 "2022-07-18T20:27:39Z")

</div>

@UnborN, yup... the trick is that I already have a row formatter that turns the entire row red, if an error resulted, so now I need to customize that formatter function to on error turn the row red, if not error then given the specific cell value, colorize it accordingly.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [18 July 2022 20:34 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/12 "2022-07-18T20:34:10Z")

</div>

There is a post on the Forum about changing the cell text (or background) color based on its value

> [@JSON Tabulator change font color](https://discourse.nodered.org/t/json-tabulator-change-font-color/41392/2):
>
> 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;}"

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [18 July 2022 20:35 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/13 "2022-07-18T20:35:17Z")

</div>

Yes, can you have multiple formatters? Meaning, the row formatter is separate from the per-cell formatter?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [18 July 2022 20:46 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/14 "2022-07-18T20:46:59Z")

</div>

i did a quick test and it seems that if you have a rowFormatter and also in columns a custom cell formatter,  
the cell formatter overwrites the more general rowFormatter for that cell .. which is a good thing

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [18 July 2022 20:49 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/15 "2022-07-18T20:49:34Z")

</div>

Ah, then that is easy to deal with in my use case. I will only have a cell value update when the row is not colorized. So, either the entire row is red... an error. Or the cell in the row has a value, and it is colorized as applicable. Or I just set a flag that error has happened, if so, the cell formatter knows to take action accordingly. I will play around with it, and see what I can do. Pretty much whatever renders last wins of course.

---

<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:** [16 September 2022 20:50 UTC](https://discourse.nodered.org/t/using-ui-table-tickcross-colorization/65145/16 "2022-09-16T20:50:15Z")

</div>

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