# Apply background/text colour and weight in ui\_table column cells

**URL:** <https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574>\
**Category:** Dashboard\
**Created:** [13 March 2021 11:14 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574 "2021-03-13T11:14:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![notnice](https://avatars.discourse-cdn.com/v4/letter/n/da6949/32.png) [@notnice](https://discourse.nodered.org/u/notnice)\
**Post date:** [13 March 2021 11:14 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574/1 "2021-03-13T11:14:39Z")

</div>

I'm trying to add the same style to all cells in a particular column such as background and text colours and bold weight. Seems like it should be straightforward enough, but the examples I have found seem to deal with adding things like progress bars in the cell, rather than the above static column cell formatting.

My couple of failed attempts in a function node are below. And yes, I'm a bit out of my depth trying to consolidate node-red ui\_table exaples/info and tabulator docs 🤨

I did find some examples that seem to indicate that I can't simply apply formatting to the cells and preserve the cell data? Instead I need to create a function read the cell values, apply formatting using SPAN directives and add the value back. Tried couple of examples of that too with no success.

```auto
msg = {};
msg.topic = "columns"
msg.ui_control = {tabulator:{}};
msg.ui_control.tabulator[msg.topic]= [
    {
        "field": "areaName",
        "title": "Area",
        "formatter": "text"
    },
        {
        "formatterParams": {
            "color": "white",
            "backgroundColor": "red",
            "font-weight": "bold"
                },
    }
];
msg.payload=null;
return msg;

```

```auto
msg = {};
msg.topic = "columns"
msg.ui_control = {tabulator:{}};
msg.ui_control.tabulator[msg.topic]= [
    {
        "field": "areaName",
        "title": "Area",
        "formatter": "<span style='color:red; font-weight:bold;'></span>"
    }
];
msg.payload=null;
return msg;

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 March 2021 12:38 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574/2 "2021-03-13T12:38:48Z")

</div>

Hi,

if you use the build in formatters only the listed `formatterParams` will work [(see documentation)](http://tabulator.info/docs/4.7/format#format-builtin). The formatter "text" does not exists I think you whant something like "plaintext" - but as you see there are no additional parameters available.

You will have to write your own [custom formatter](http://tabulator.info/docs/4.7/format#format-custom) which is essential a simple callback function:

this will then look like this:

```auto
function(cell, formatterParams, onRendered) {
    return "<span style='color:red; font-weight:bold;'>" + cell.getValue() + "</span>";
}

```

I use an unconnected function node as a editor where I write my callback functions (to have syntax highlighting and basic error checking and then copy paste into my node where I prepare my msg.ui\_control. I normally use an change node (or my ui-table hander subflow) and the visual json editor to paste in my code in a string parameter not to mess around with escaping quotation marks and NL/CR but in a function node it should look like this (not tested!):

```auto
var msg = {
        ui_control : {
            tabulator: {
                columns: [
                    {
                        "field": "areaName",
                        "title": "Area",
                        "formatter": "function(cell, formatterParams, onRendered) {return \"<span style='color:red; font-weight:bold;'>\" + cell.getValue() + \"</span>\";}"
                    }
                ]
            }
        }
    };

```

A quick test in one of my tables, bold and red:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/0884f3f96e38a16eb750af241d99c2e9ef51102b.png)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 March 2021 12:46 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574/4 "2021-03-13T12:46:30Z")

</div>

Someone reading my untested code! Great. Thank you! 👍

---

<div class="post-metadata">

**Author:** ![notnice](https://avatars.discourse-cdn.com/v4/letter/n/da6949/32.png) [@notnice](https://discourse.nodered.org/u/notnice)\
**Post date:** [13 March 2021 13:51 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574/5 "2021-03-13T13:51:34Z")

</div>

Hello Christian - as always thx for a quick response. Your solution looks along the lines of a doc I found, but had no idea how to modiffy for my use. I'll give it a try and let you know.

---

<div class="post-metadata">

**Author:** ![notnice](https://avatars.discourse-cdn.com/v4/letter/n/da6949/32.png) [@notnice](https://discourse.nodered.org/u/notnice)\
**Post date:** [13 March 2021 14:43 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574/6 "2021-03-13T14:43:29Z")

</div>

Top man as always 👍

My test function node content below - works great.

Just as a note from Tabulator docs, you have to run this before populating table data. If you want to see the format change after populatign tabel data then read the docs section " Triggering Actions After the Formatter Has Been Displayed"

```auto
msg = {};
msg.topic = "columns"
msg.ui_control = {tabulator:{}};
msg.ui_control.tabulator[msg.topic]= [
    {
        "field": "areaName",
        "title": "Area",
        "formatter": "function(cell, formatterParams, onRendered) {return \"<span style='color:red; font-weight:bold;'>\" + cell.getValue() + \"</span>\";}"
    },
];
msg.payload = null;
return msg;

```

---

<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:** [27 March 2021 14:43 UTC](https://discourse.nodered.org/t/apply-background-text-colour-and-weight-in-ui-table-column-cells/42574/7 "2021-03-27T14:43:51Z")

</div>

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