Simple template table example needed

Dashboard
1

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

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

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 which will do almost everything and the author lurks here ready to leap into action if anyone needs help with it.

3

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? :thinking:

4

The ui-template is well documented: Template ui-template | Node-RED Dashboard 2.0 (that link even has live try out demos)

Then there is a page of examples here: UI Template Examples | Node-RED Dashboard 2.0

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

5

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

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

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

6

This is a vue thing. So use vue binding (ref)

<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)

7

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

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

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)

9

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 :white_check_mark: :white_check_mark: :cross_mark:
10

you can adapt the vuetify example "item slot"

11

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

<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>
12

Now you are making it tricky!

image
image1148×377 8.27 KB

image
image1148×378 9.63 KB

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