# Simple template table example needed

**URL:** <https://discourse.nodered.org/t/simple-template-table-example-needed/101784>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [14 September 2026 13:21 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784 "2026-09-14T13:21:40Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [14 September 2026 13:21 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/1 "2026-09-14T13:21:40Z")

</div>

Nodered using dashboard2:

Please, who can show me a really simple example of drawing a simple v-table by using msg.payload as data input?

I tried this with the "desserts"-array as payload the whole day but nothing renders...  
[https://vuetifyjs.com/en/components/tables/#usage](https://vuetifyjs.com/en/components/tables/#usage)

```auto
[
    {
        "id": "46663f7e9e9231e5",
        "type": "inject",
        "z": "10808ffc4d809688",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"name\":\"Frozen Yogurt\",\"calories\":159},{\"name\":\"Ice cream sandwich\",\"calories\":237},{\"name\":\"Eclair\",\"calories\":262},{\"name\":\"Cupcake\",\"calories\":305},{\"name\":\"Gingerbread\",\"calories\":356},{\"name\":\"Jelly bean\",\"calories\":375},{\"name\":\"Lollipop\",\"calories\":392},{\"name\":\"Honeycomb\",\"calories\":408},{\"name\":\"Donut\",\"calories\":452},{\"name\":\"KitKat\",\"calories\":518}]",
        "payloadType": "json",
        "x": 1610,
        "y": 500,
        "wires": [
            [
                "ce149b05494dc865",
                "67159871e3646fb5"
            ]
        ]
    },
    {
        "id": "67159871e3646fb5",
        "type": "ui-template",
        "z": "10808ffc4d809688",
        "group": "072f099c3e031939",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <v-table theme=\"dark\">\n <thead>\n <tr>\n <th class=\"text-left\">\n Name\n </th>\n <th class=\"text-left\">\n Calories\n </th>\n </tr>\n </thead>\n <tbody>\n <tr v-for=\"item in msg.payload\" :key=\"item.name\">\n <td>{{ item.name }}</td>\n <td>{{ item.calories }}</td>\n </tr>\n </tbody>\n </v-table>\n</template>\n\n<script>\n</script>",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1800,
        "y": 400,
        "wires": [
            []
        ]
    },
    {
        "id": "072f099c3e031939",
        "type": "ui-group",
        "name": "Ergebnis",
        "page": "b891121fc5180bae",
        "width": "4",
        "height": 1,
        "order": 3,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "b891121fc5180bae",
        "type": "ui-page",
        "name": "Kennlinie",
        "ui": "227638075b6e8ee2",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "b6fa5134e8946362",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "227638075b6e8ee2",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "b6fa5134e8946362",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "886e2ec277e4aad5",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.31.0"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [14 September 2026 13:37 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/2 "2026-09-14T13:37:23Z")

</div>

If the built in Table node does not meet your needs then have a look at [node-red-dashboard-2-table-tabulator (node) - Node-RED](https://flows.nodered.org/node/@omrid01/node-red-dashboard-2-table-tabulator) which will do almost everything and the author lurks here ready to leap into action if anyone needs help with it.

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [16 September 2026 05:48 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/3 "2026-09-16T05:48:39Z")

</div>

Thank you for this advice, I will have a look on this. But isnt anybody able to describe how to work with the core template node? 🤔

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 September 2026 06:16 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/4 "2026-09-16T06:16:16Z")

</div>

The ui-template is well documented: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template) (that link even has live try out demos)

Then there is a page of examples here: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples)

As for tables, you can use standard HTML or you can use Vuetify tables or Vuetify data tables, which are documented (with lots of examples) here: [Data table component — Vuetify](https://vuetifyjs.com/en/components/data-tables/basics/#usage)

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [16 September 2026 07:01 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/5 "2026-09-16T07:01:41Z")

</div>

How can I display this: `I will display &#8986;`

```auto
<template>
  <p>{{msg.payload}}</p>
</template>

```

should print: I will display ⌚  
but I get plain text.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 September 2026 08:36 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/6 "2026-09-16T08:36:36Z")

</div>

This is a `vue` thing. So use vue binding ([ref](https://www.w3schools.com/vue/ref_v-html.php))

```html
<template>
  <p v-html="msg.payload"></p>
</template>

```

NOTE: This pattern can lead to XSS Attacks (dont use `v-html` on data provided by a user)

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [16 September 2026 10:04 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/7 "2026-09-16T10:04:43Z")

</div>

Great, thank you! How can I combine this with a data table?

```auto
<template>
  <v-data-table
    :items="msg?.payload"
    hide-default-footer
    density="compact"
  ></v-data-table>
</template>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 September 2026 10:10 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/8 "2026-09-16T10:10:40Z")

</div>

combine what? the `<p>` tag and `<v-data-table>` tag?

the `v-data-table` sample you have just posted here ^ will work as soon as you inject an array of objects (like the 1st inject in the flow you posted in your first post)

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [16 September 2026 10:18 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/9 "2026-09-16T10:18:40Z")

</div>

I would like to inject an array of strings with html symbols (red/green).  
(number of coloumns / sensors will be dynamic!)

| Temperature | Sensor 1 | Sensor 2 | Sensor X |
| --- | --- | --- | --- |
| 25°C | true | true | false |
| 30°C | ✅ | ✅ | ❌ |
| | | | |
| | | | |
| | | | |
| | | | |

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 September 2026 13:09 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/10 "2026-09-16T13:09:10Z")

</div>

you can adapt the vuetify example ["item slot"](https://vuetifyjs.com/en/components/data-tables/basics/#item-slot)

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [16 September 2026 13:16 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/11 "2026-09-16T13:16:50Z")

</div>

I´m trying, but without succes when it comes to dynamic amount of sensor coloumns.

```auto
<template>
  <v-data-table :headers="msg?.headers" :items="msg?.payload" hide-default-footer density="compact">
    <template v-slot:item="{ value, item, index, column }">
      <template v-if="column.index > 1">
        <v-icon v-if="value === true" color="success" icon="mdi-check-circle"></v-icon>
        <v-icon v-else color="error" icon="mdi-alert-circle"></v-icon>
      </template>
      <template v-else>
        {{ value }}
      </template>
    </template>
  </v-data-table>
</template>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 September 2026 13:42 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/12 "2026-09-16T13:42:35Z")

</div>

> [@protonmw](#):
>
> dynamic amount of sensor coloumns.

Now you are making it tricky!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/70ae82afc51f66046e66c70b38291200bb53bb3d.png)

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

```json
[{"id":"afaa1c68f9a12b78","type":"ui-template","z":"9342c5a1bef79a13","group":"","page":"","ui":"","name":"Temperature sensor table","order":2,"width":12,"height":5,"head":"","format":"<template>\n <v-data-table\n :headers=\"headers\"\n :items=\"msg?.payload ?? []\"\n item-value=\"temperature\"\n density=\"comfortable\"\n class=\"elevation-1\"\n >\n <template\n v-for=\"header in sensorHeaders\"\n v-slot:[`item.${header.key}`]=\"{ item }\"\n >\n <v-icon :color=\"item[header.key] ? 'success' : 'error'\">\n {{ item[header.key] ? 'mdi-check-circle' : 'mdi-close-circle' }}\n </v-icon>\n </template>\n </v-data-table>\n</template>\n<script>\nexport default {\n computed: {\n sensorHeaders () {\n return this.headers.filter(header => header.key !== 'temperature')\n },\n headers () {\n const items = Array.isArray(this.msg?.payload) ? this.msg.payload : []\n const keys = []\n items.forEach(item => {\n Object.keys(item || {}).forEach(key => {\n if (key !== 'temperature' && !keys.includes(key)) keys.push(key)\n })\n })\n return [\n { title: 'Temperature', key: 'temperature' },\n ...keys.map(key => ({\n title: key.replace(/^sensor/i, 'Sensor '),\n key,\n align: 'center'\n }))\n]\n }\n }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":440,"wires":[[]]},{"id":"58232aee74f223fa","type":"inject","z":"9342c5a1bef79a13","name":"Temperature data - 2 sensors","props":[{"p":"payload","v":"[{\"temperature\":\"25°C\",\"sensor1\":true,\"sensor2\":true},{\"temperature\":\"30°C\",\"sensor1\":true,\"sensor2\":false}]","vt":"json"},{"p":"topic","v":"temperature-status-2-sensors","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":450,"y":400,"wires":[["afaa1c68f9a12b78"]]},{"id":"47af9c63b270752b","type":"inject","z":"9342c5a1bef79a13","name":"Temperature data - 4 sensors","props":[{"p":"payload","v":"[{\"temperature\":\"25°C\",\"sensor1\":true,\"sensor2\":true,\"sensor3\":false,\"sensor4\":true},{\"temperature\":\"30°C\",\"sensor1\":true,\"sensor2\":false,\"sensor3\":true,\"sensor4\":true}]","vt":"json"},{"p":"topic","v":"temperature-status-4-sensors","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":450,"y":480,"wires":[["afaa1c68f9a12b78"]]},{"id":"c6bc9d815a6d13ef","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.31.0"}}]

```

Use `ctrl-i` to import this ^ demo flow. Also, be sure to select a group in the ui-template before deploy

---

<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:** [30 September 2026 13:42 UTC](https://discourse.nodered.org/t/simple-template-table-example-needed/101784/13 "2026-09-30T13:42:55Z")

</div>

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