Apply background/text colour and weight in ui_table column cells

Dashboard
1

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 :face_with_raised_eyebrow:

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.

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;

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;
2

Hi,

if you use the build in formatters only the listed formatterParams will work (see documentation). 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 which is essential a simple callback function:

this will then look like this:

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!):

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

4

Someone reading my untested code! Great. Thank you! :+1:

5

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.

6

Top man as always :+1:

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"

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;