Apply background/text colour and weight in ui_table column cells

Dashboard
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

1 Like