\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 December 2024 04:34 UTC](https://discourse.nodered.org/t/simple-html-table-in-template-node/94098 "2024-12-22T04:34:17Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [22 December 2024 04:34 UTC](https://discourse.nodered.org/t/simple-html-table-in-template-node/94098/1 "2024-12-22T04:34:17Z")
How to render a simple html table within a template node?
As i joined the db2 race very late, i might be missing some basic things, unfortunately my search algorithm isnt able to find relevant solution.
```auto
[{"id":"a4e151ffdd5011cf","type":"ui_template","z":"5a5b50a5e5a3beba","group":"df08b927c9f612b3","name":"","order":10,"width":"13","height":"7","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":585,"y":4175,"wires":[[]]},{"id":"046e48e594f38dc0","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":300,"y":4175,"wires":[["1df9bb1b3025f074"]]},{"id":"1df9bb1b3025f074","type":"template","z":"5a5b50a5e5a3beba","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":" | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 | Row 1, Cell 4 | Row 1, Cell 5 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 | Row 2, Cell 4 | Row 2, Cell 5 |
","output":"str","x":435,"y":4175,"wires":[["a4e151ffdd5011cf"]]},{"id":"df08b927c9f612b3","type":"ui_group","name":"Demo","tab":"159656fa2fe2c65c","order":2,"disp":false,"width":"44","collapse":false,"className":""},{"id":"159656fa2fe2c65c","type":"ui_tab","name":"MONTH","icon":"fa-calendar","order":11,"disabled":false,"hidden":false}]
```
In db1 the above flow was sufficient to generate a table.
in db2, i can use the ui-table node and get it, but i want a simple table from template node.
---
**Author:**  [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [22 December 2024 06:54 UTC](https://discourse.nodered.org/t/simple-html-table-in-template-node/94098/2 "2024-12-22T06:54:53Z")
An example
To render something like this:
Example array coming from a function node:
```auto
const boats = [
{
"id": 1,
"length": 25,
"name": "Sailboat 1",
"color": "Blue",
"yearBuilt": 2010,
"type": "monohull"
},
{
"id": 2,
"length": 30,
"name": "Speedboat 2",
"color": "Red",
"yearBuilt": 2005,
"type": "pontoon"
},
{
"id": 3,
"length": 35,
"name": "Yacht 3",
"color": "White",
"yearBuilt": 2018,
"type": "catamaran"
},
...
]
msg.payload = boats
return msg
```
ui-template node:
```auto
| Vessel name |
Length |
type |
Year |
|
|
|
|
```
The bottom script added to give an example how to use methods, this could be used for click, change etc as well.
Note that I am using tailwindcss styling here with an external library, but you can use your own styles/classes.
In case it looks too complicated, you would only need the part in the `` section.
the `v-for` is the same as a normal `for loop` except it binds to html/custom elements, same goes for the `v-text` which read/displays the property.
---
**Author:**  [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 January 2025 06:55 UTC](https://discourse.nodered.org/t/simple-html-table-in-template-node/94098/3 "2025-01-05T06:55:12Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.