# Add value in overprint in a column of Ui\_Table with the format "Progress (0-100)
**URL:** https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700
**Category:** Dashboard
**Created:** [16 May 2022 15:22 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700 "2022-05-16T15:22:41Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [16 May 2022 15:22 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/1 "2022-05-16T15:22:41Z")
Hello,
do you think it is possible to add the value that was used to fill the cell marked in **1** (below) which is a column of the `Ui_Table` node in the format "**Progress (0-100)**" ?
So the same kind as the node marked in **2** like the `Ui_Level` node does.
Or integrate the `Ui_Level` node in the table cell?
I added the number 100 in red to show an example of the expected result.
Thank you for your ideas or comments
---
### Author:  [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [17 May 2022 01:06 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/2 "2022-05-17T01:06:29Z")
Hello ..
I dont have much experience with the ui\_table node but if you go to **Import \> Examples**
and load the 3rd flow .. you get an advanced example of sending a `msg.ui_control` msg to the node
with some row formatting options to customize the design of the table
---
### Author:  [@mickym2](https://discourse.nodered.org/u/mickym2)
#### Post date: [17 May 2022 01:17 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/3 "2022-05-17T01:17:40Z")
It should be possible - as the underlying library is the tabulator version 5.1. I can not directly tell you - may be a little bit later, how you can address this through the UI\_Table. This shoud be custom parameters and it should be possible:
Here is the reference:
> **[Tabulator - Interactive JavaScript Tables](http://tabulator.info/docs/5.0/format)**
>
> Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [17 May 2022 13:38 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/4 "2022-05-17T13:38:59Z")
Thanks for advice.
I saw this column which I like very much because on my batteries there is exactly the **same number of LED**. This would be better than the progress bar finally.
The formatting that exists by default in the Ui\_table node has only 5 stars and not 6.
I will look into this example as soon as possible.
---
### Author:  [@mickym2](https://discourse.nodered.org/u/mickym2)
#### Post date: [18 May 2022 00:19 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/5 "2022-05-18T00:19:42Z")
If you look to the examples which came with the ui\_table Node investigate the ui\_control example
In the Change Node - you see where you can modify the formatterParams when define the columns.
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [18 May 2022 12:34 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/6 "2022-05-18T12:34:23Z")
This is exactly what I was looking for and it was there under a click of my mouse.
Thank you so much for showing me the info!
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [21 May 2022 17:20 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/7 "2022-05-21T17:20:59Z")
No matter how carefully I look at the example provided, this one is off the charts for my knowledge. I have tried some things but without success. I don't know how to use these 2 msg that are the payload & the control to modify the label of the "progress" field named "SOC".
I understood the idea but I lack too much knowledge.
It's a pity.
I provide below an example of my flow in case all this is "easy" for a person who can manage
```auto
[{"id":"451e31c7dfde825e","type":"inject","z":"04301bd7cfbc1f1f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Batterie_numero\":\"1\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"100\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"2\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"3\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"4\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"70\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"5\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"6\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"7\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"8\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"}]","payloadType":"json","x":170,"y":100,"wires":[["a6e9bd57c05171ff"]]},{"id":"6a18c7b1475dda19","type":"ui_table","z":"04301bd7cfbc1f1f","group":"08b55a197fb6da2a","name":"Table Bytteries","order":1,"width":13,"height":6,"columns":[{"field":"Batterie_numero","title":"Bat. #","width":"80","align":"center","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Volt","title":"Volt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Courant","title":"Courant","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Puissance","title":"Watt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Temp","title":"Temp °C","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Status","title":"Status","width":"90","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Health","title":"Santé","width":"85","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"SOC","title":"SOC","width":"100","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":520,"y":100,"wires":[]},{"id":"a6e9bd57c05171ff","type":"change","z":"04301bd7cfbc1f1f","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":100,"wires":[["6a18c7b1475dda19"]]},{"id":"08b55a197fb6da2a","type":"ui_group","name":"Données Live","tab":"988a249f62084232","order":2,"disp":true,"width":13,"collapse":false,"className":""},{"id":"988a249f62084232","type":"ui_tab","name":"Pylontech","icon":"fa-battery-three-quarters ","order":1,"disabled":false,"hidden":false}]
```
Below is one of my attempts to understand the fields in the large - complex example provided with ui\_table.
---
### Author:  [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [21 May 2022 17:42 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/8 "2022-05-21T17:42:21Z")
I had a little difficulty also when i played around with it ..
that example is **to** advanced and I got a bit confused at first in its complexity 😉
Try this cut down config for the SOC column
( you may need to change some of the settings . .like the colors etc )
**Flow:**
```auto
[{"id":"451e31c7dfde825e","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Batterie_numero\":\"1\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"100\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"2\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"3\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"4\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"70\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"5\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"6\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"7\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"8\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"}]","payloadType":"json","x":350,"y":1220,"wires":[["a6e9bd57c05171ff"]]},{"id":"6a18c7b1475dda19","type":"ui_table","z":"54efb553244c241f","group":"08b55a197fb6da2a","name":"Table Bytteries","order":1,"width":13,"height":6,"columns":[{"field":"Batterie_numero","title":"Bat. #","width":"80","align":"center","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Volt","title":"Volt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Courant","title":"Courant","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Puissance","title":"Watt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Temp","title":"Temp °C","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Status","title":"Status","width":"90","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Health","title":"Santé","width":"85","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"SOC","title":"SOC","width":"100","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":700,"y":1220,"wires":[]},{"id":"a6e9bd57c05171ff","type":"change","z":"54efb553244c241f","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columnResized\":\"function(column){ var newColumn = { field: column._column.field, visible: column._column.visible, width: column._column.width, widthFixed: column._column.widthFixed, widthStyled: column._column.widthStyled }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }\",\"columnMoved\":\"function(column, columns){ var newColumns=[]; columns.forEach(function (column) { newColumns.push({'field': column._column.field}); }); this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }\",\"groupHeader\":\"function (value, count, data, group) {return value + \\\"(\\\" + count + \\\" Termostat\\\"+((count>1) ? \\\"e\\\" : \\\"\\\") + \\\")\\\";}\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":99,\"color\":[\"gray\",\"orange\",\"red\"],\"legend\":\"function (value) {return (value>0)? ' '+value+' %' : '-';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"SOC\",\"field\":\"SOC\",\"formatter\":\"progress\",\"topCalc\":\"max\",\"width\":100}],\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"},\"customHeight\":12}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":1220,"wires":[["6a18c7b1475dda19"]]},{"id":"08b55a197fb6da2a","type":"ui_group","name":"Données Live","tab":"988a249f62084232","order":2,"disp":true,"width":13,"collapse":false,"className":""},{"id":"988a249f62084232","type":"ui_tab","name":"Pylontech","icon":"fa-battery-three-quarters ","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [21 May 2022 18:22 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/9 "2022-05-21T18:22:23Z")
Whooohh, whooohhh, I don't know how to write it in English 🤩
Just had time to go eat and here is the ready-made solution on my screen. Great!
Just a defect on the 1st line, I should be fine I hope
I will spend all night studying your code to try to understand.
That's exactly what I was looking for in a rendering. I will indeed just change the colors but then I saw that I could do it.
Thanks a million for your help. This forum is definitely a nice place to be.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 June 2022 18:22 UTC](https://discourse.nodered.org/t/add-value-in-overprint-in-a-column-of-ui-table-with-the-format-progress-0-100/62700/10 "2022-06-04T18:22:48Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.