Simple html table in template node

Dashboard
1

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.

[{"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":"<!DOCTYPE html> <html> <head> <style> table {   border: 1px solid red; /* Add border around the entire table */ }  th, td {   border: 1px solid red; /* Add border around each cell */   padding: 5px; /* Add some padding for better readability */ } </style> </head> <body>  <table>   <tr>     <th>Column 1</th>     <th>Column 2</th>     <th>Column 3</th>     <th>Column 4</th>     <th>Column 5</th>   </tr>   <tr>     <td>Row 1, Cell 1</td>     <td>Row 1, Cell 2</td>     <td>Row 1, Cell 3</td>     <td>Row 1, Cell 4</td>     <td>Row 1, Cell 5</td>   </tr>   <tr>     <td>Row 2, Cell 1</td>     <td>Row 2, Cell 2</td>     <td>Row 2, Cell 3</td>     <td>Row 2, Cell 4</td>     <td>Row 2, Cell 5</td>   </tr> </table>  </body> </html>","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.

2

An example

To render something like this:

image
image1652Ă—780 101 KB

Example array coming from a function node:

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:

<template>
   <table>
        <thead>
            <tr>
                <th class="text-left">Vessel name</th>
                <th class="text-right">Length</th>
                <th class="text-right" >type</th>
                <th class="text-right">Year</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="boat in msg.payload" class="hover:bg-gray-100 cursor-pointer">
                <td class="text-left" v-text="boat.name"></td>
                <td class="text-right" v-text="boat.length"></td>
                <td class="text-right"><span class="rounded px-2 py-0.5 text-xs font-semibold" :class="getBoatType(boat.type)" v-text="boat.type" ></span></td>
                <td class="text-right"><span class="rounded px-2 py-0.5 bg-blue-500 text-xs text-white font-semibold" v-text="boat.yearBuilt"></span></td>
            </tr>
        </tbody>
   </table>
</template>
<script src="https://unpkg.com/@vimesh/style"></script>
<script>
let interval = setInterval(() => {
    if (window.$vs) {
        // used to trigger initialization of style lib
        window.$vs.reset() 
        clearInterval(interval);
    }
}, 100);
</script>
<script>
export default {
    methods: {
        getBoatType(b) {
            let bg = ''

            if(b == 'monohull'){
                bg = 'bg-amber-500 text-white '
            }else{
                bg = 'bg-emerald-500 text-white '
            }

            return bg
        }
    }
}
</script>

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 <template></template> 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.

2 Likes
3

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