# Ui-table / specify the number of decimal places

**URL:** <https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519>\
**Category:** Dashboard\
**Created:** [17 February 2022 08:56 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519 "2022-02-17T08:56:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [17 February 2022 08:56 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/1 "2022-02-17T08:56:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [17 February 2022 09:03 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/2 "2022-02-17T09:03:48Z")

</div>

This may help

> **[Tabulator - Interactive JavaScript Tables](http://tabulator.info/docs/4.4/format#format-builtin)**
>
> Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.

as ui-table is based on tabulator

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [17 February 2022 09:40 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/3 "2022-02-17T09:40:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [17 February 2022 10:58 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/4 "2022-02-17T10:58:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [17 February 2022 12:22 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/5 "2022-02-17T12:22:55Z")

</div>

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 ?

---

<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:** [17 February 2022 13:09 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/6 "2022-02-17T13:09:44Z")

</div>

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:

```auto
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)

```auto
{
    "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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/46ce23210b5bd3d34a593a9998ee5fa27bb920ea.png)  
CTRL+C and then  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/1/8177a76b36461f25ecc1b596169f1942cbf91df6.png)  
CTRL+A CTRL+V  
and you are done

```auto
[{"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).

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

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

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [18 February 2022 13:23 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/7 "2022-02-18T13:23:09Z")

</div>

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

---

<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:** [4 March 2022 13:24 UTC](https://discourse.nodered.org/t/ui-table-specify-the-number-of-decimal-places/58519/8 "2022-03-04T13:24:05Z")

</div>

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