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

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.


fffff

image
this works for me, however try in your browser

image

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

[{"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}]
2 Likes

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!

1 Like

@ 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.

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?

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

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

e.g.

[{"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

$$.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

1 Like

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

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