Ui-table / specify the number of decimal places

[ceysa75]

Hi all,

beside technical aspects of course you can't ignore a little bit of cosmetics ;-). I wonder if one could specifiy the number of decimal places directly
via ui-control. In the present case I would like to see room temperatures with a single decimal place.

I have no problems with non-integer numbers; one can simply convert 21.73 to 21.7 in a function node in advance. However, this fails for the case of integer numbers; say for 20 i would like to see 20.0 in my table. But no idea how to achieve this.

I already found a imo non-elegant solution which is converting the number to a string using the 'toFixed()' Method before feeding into the table.
But isn't there a more elegant way to do this via ui-control formatters directly ?

Thanks and best regards

[E1cid]

This may help

Tabulator - Interactive JavaScript Tables

as ui-table is based on tabulator

[ceysa75]

Of course, I am aware of that. I also found the money formatter where you can set the precision. I had tested that already and it works. But I wonder if there is not a more appropriate way of doing this using a custom formatter.

[jbudd]

Is this what you are seeking?
https://discourse.nodered.org/t/template-node-displaying-a-value-rounded-to-1dp/57608

[ceysa75]

Thanks for the hint,

that sounds promising. If I just would knew how to implement that approach into the ui_control formatters... I am fine with Javascript but all the stuff related to styling (Angular / CSS etc) I feel lost. Is someone able to help me ?

[Christian-Me]

Sure it is as you already know you will need a custom formatter … and it isn't rocket science:

I use an unconnected function node as editor:

var numFormatter = function (cell, formatterParams, onRendered) {
    let result = Number(cell.getValue());
    if (Number.isNaN(result)) return cell.getValue();
    result = result.toFixed(formatterParams.precision);
    result += (formatterParams.unit) ? formatterParams.unit : '';
    return result;
}

some security checks here + flexible precision and the ability to add a unit symbol via formatter params to make it reusable

and then pass this to your table (assume you configured it in the ui-table config UI)

{
    "tabulator": {
        "columns": [
            {
                "field": "put your field property as configured in ui-tabel here",
                "formatterParams": {
                    "precision": 2,
                    "unit": "°C"
                },
                "formatter": "function (cell, formatterParams, onRendered) {     let result = Number(cell.getValue());     if (Number.isNaN(result)) return cell.getValue();     result = result.toFixed(formatterParams.precision);     result += (formatterParams.unit) ? formatterParams.unit : '';     return result; }"
            }
        ]
    }
}

The visual Editor helps you pasting your function in the JSON (simply copy paste). The Editor does all the escaping of special characters like " and CR for you

CTRL+C and then

CTRL+A CTRL+V
and you are done

[{"id":"981dd4a03d7a0058","type":"inject","z":"d2952ff54c89c139","name":"ui_control","props":[{"p":"ui_control","v":"{\"tabulator\":{\"columns\":[{\"field\":\"putt your field id here\",\"formatterParams\":{\"precision\":2,\"unit\":\"°C\"},\"formatter\":\"function (cell, formatterParams, onRendered) {     let result = Number(cell.getValue());     if (Number.isNaN(result)) return cell.getValue();     result = result.toFixed(formatterParams.precision);     result += (formatterParams.unit) ? formatterParams.unit : '';     return result; }\"}]}}","vt":"json"},{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"str","x":580,"y":340,"wires":[[]]},{"id":"bd294316568c3750","type":"function","z":"d2952ff54c89c139","name":"callback functions editor","func":"var numFormatter = function (cell, formatterParams, onRendered) {\n    let result = Number(cell.getValue());\n    if (Number.isNaN(result)) return cell.getValue();\n    result = result.toFixed(formatterParams.precision);\n    result += (formatterParams.unit) ? formatterParams.unit : '';\n    return result;\n}","outputs":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":380,"wires":[]}]

and you can do so much more like controlling the background or text color. (examples are here in the forum all over the place).

and the sum row then works too "bottomCalc": "sum"

[ceysa75]

As always, thank you very much Christian!

This was so well explained that I could implement your advises instantly. I start to understand the ui-table philosopy better and better. This also helped to have a better undestanding for implementing own custom formatters.

Best regards

Ceysa