# How to change font size of Table Data in Node Red?

**URL:** <https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252>\
**Category:** General\
**Tags:** node-red-dashboard, node-red-node-test-helper\
**Created:** [16 June 2023 13:06 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252 "2023-06-16T13:06:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![techylax](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/techylax/32/80706_2.png) [@techylax](https://discourse.nodered.org/u/techylax)\
**Post date:** [16 June 2023 13:06 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/1 "2023-06-16T13:06:50Z")

</div>

Hello everyone,

I'm new to Node-RED and I'm currently facing a challenge with adjusting the font size in my table data. The HMI UI I'm working on lacks optimization, and I've made several attempts to resolve this issue without success.

I've experimented with different approaches, including utilizing the Function and Template nodes and incorporating CSS within them. However, I haven't achieved the desired outcome so far.

If anyone could offer assistance with this matter, I would greatly appreciate it. Any suggestions or guidance on how to effectively change the font size in my table data would be immensely helpful. Thank you for your time and support.

 ![ttttttt](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7cede96a3e0c96acf0d7808dfe5b87797dad1dde.png)  
 ![fffff](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/303242c8e2de2a7340a69b78494f25f492b7018e.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 June 2023 00:53 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/2 "2023-06-17T00:53:46Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bda7f6ae418d19926deceac619376a89a608322f.png)  
this works for me, however try in your browser

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/092c656c172c1ae340ee56ec22ededa955759aac.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/7/27ba6a6c699aa10080a5897d5c648244ee992992.png)

---

<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 June 2023 08:03 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/3 "2023-06-17T08:03:15Z")

</div>

AS shown in @smanjunath211 last image \<font\> is deprecated and should be avoided in new projects

You could use inline css style attributes  
Inline example

```auto
[{"id":"1f89b2e2db240ada","type":"inject","z":"d58a0e9fb6feb9d6","name":"","props":[{"p":"payload"},{"p":"text_size","v":"30","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"Yokoi\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"DCJ\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]","payloadType":"json","x":110,"y":380,"wires":[["6caaacacb0e52df5"]]},{"id":"74032093f9e9f4e7","type":"debug","z":"d58a0e9fb6feb9d6","name":"debug 313","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":570,"y":240,"wires":[]},{"id":"7d48e13.90ee22","type":"ui_table","z":"d58a0e9fb6feb9d6","group":"571a38b1.5e3638","name":"People","order":1,"width":"8","height":"3","columns":[{"field":"Name","title":"Who","width":"20%","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Age","title":"Age","width":"40","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Color","title":"","width":"5%","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"Star","title":"%","width":"100","align":"left","formatter":"star","formatterParams":{"target":"_blank"}},{"field":"Pass","title":"","width":"5%","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"Prog","title":"","width":"80","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}},{"field":"web","title":"URL","width":"","align":"left","formatter":"link","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":480,"y":380,"wires":[]},{"id":"6caaacacb0e52df5","type":"change","z":"d58a0e9fb6feb9d6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload ~> |$|{\"Name\":\"<span style=\\\"font-size: \" & $$.text_size & \"px;\\\">\" & $.Name & \"</span>\"}|","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":380,"wires":[["7d48e13.90ee22","74032093f9e9f4e7"]]},{"id":"571a38b1.5e3638","type":"ui_group","name":"Richer Table","tab":"29ec6908.552b36","order":1,"disp":true,"width":"8","collapse":false},{"id":"29ec6908.552b36","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 June 2023 09:31 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/4 "2023-06-17T09:31:50Z")

</div>

> [@E1cid](#):
>
> Inline example

Excellent, every where i was only getting instructions to AVOID, but no one gave me equivalent solution so far.  
Thank you for this. Your Jsonata Skills are out of the world!

---

<div class="post-metadata">

**Author:** ![techylax](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/techylax/32/80706_2.png) [@techylax](https://discourse.nodered.org/u/techylax)\
**Post date:** [19 June 2023 17:19 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/5 "2023-06-19T17:19:44Z")

</div>

@ [smanjunath211](https://discourse.nodered.org/u/smanjunath211)@E1cid Thank you so much for your answer. Is there any way that I could set all table data to same font size ? I really appreciate your help.

---

<div class="post-metadata">

**Author:** ![techylax](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/techylax/32/80706_2.png) [@techylax](https://discourse.nodered.org/u/techylax)\
**Post date:** [20 June 2023 14:29 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/6 "2023-06-20T14:29:43Z")

</div>

Hey Eric, I tried to implement it on Age Column but was not successful. Could you please let me know how to apply font size of whole table data?

---

<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:** [20 June 2023 15:05 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/7 "2023-06-20T15:05:08Z")

</div>

Who's Eric?

You maybe able to use css to style the table, I think ui-table uses tabulator 5.1, but not sure [Tabulator | JavaScript Tables & Data Grids](https://tabulator.info/docs/5.1/style)

Or you can make columns you wish to size html and adjust the array objects as needed.

e.g.

```auto
[{"id":"acb594c5b3cdc60d","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.payload ~> |$|{\t \"Name\": \"<span style=\\\"font-size: \" & $$.text_size & \"px;\\\">\" & $.Name & \"</span>\",\t \"Age\": \"<span style=\\\"font-size: \" & $$.text_size & \"px;\\\">\" & $.Age & \"</span>\",\t \"web\": \"<a href=\\\"\" & $.web & \"\\\" style=\\\"font-size: \" & $$.text_size & \"px;\\\">\" & $.web & \"</a>\"\t }|","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":4760,"wires":[["e07866ad6f0d18d8","5da9c63d0ae6ee5b"]]},{"id":"e7e77a184fd0581f","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"text_size","v":"25","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"Yokoi\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"DCJ\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]","payloadType":"json","x":170,"y":4760,"wires":[["acb594c5b3cdc60d"]]},{"id":"e07866ad6f0d18d8","type":"ui_table","z":"b9860b4b9de8c8da","group":"91064730303102a7","name":"People","order":1,"width":"8","height":"3","columns":[{"field":"Name","title":"Who","width":"20%","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Age","title":"Age","width":"40","align":"center","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Color","title":"","width":"5%","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"Star","title":"%","width":"100","align":"left","formatter":"star","formatterParams":{"target":"_blank"}},{"field":"Pass","title":"","width":"5%","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"Prog","title":"","width":"80","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}},{"field":"web","title":"URL","width":"15%","align":"left","formatter":"html","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":540,"y":4760,"wires":[]},{"id":"5da9c63d0ae6ee5b","type":"debug","z":"b9860b4b9de8c8da","name":"debug 313","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":630,"y":4620,"wires":[]},{"id":"91064730303102a7","type":"ui_group","name":"Richer Table","tab":"29ec6908.552b36","order":1,"disp":true,"width":"8","collapse":false},{"id":"29ec6908.552b36","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]

```

example expression

```auto
$$.payload ~> |$|{
    "Name": "<span style=\"font-size: " & $$.text_size & "px;\">" & $.Name & "</span>",
    "Age": "<span style=\"font-size: " & $$.text_size & "px;\">" & $.Age & "</span>",
    "web": "<a href=\"" & $.web & "\" style=\"font-size: " & $$.text_size & "px;\">" & $.web & "</a>"
    }|

```

Targets Name, Age and web

---

<div class="post-metadata">

**Author:** ![techylax](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/techylax/32/80706_2.png) [@techylax](https://discourse.nodered.org/u/techylax)\
**Post date:** [20 June 2023 15:26 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/8 "2023-06-20T15:26:07Z")

</div>

I am sorry for calling you Eric. And thank you so much for your explanation.

---

<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:** [19 August 2023 15:26 UTC](https://discourse.nodered.org/t/how-to-change-font-size-of-table-data-in-node-red/79252/9 "2023-08-19T15:26:54Z")

</div>

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