UIBuilder Table Implementation 2.0

Dashboard
21

Do you have a small example of your query data? That way I could test things. It's been quite a while since I used Vue properly.

22

sure.
table1:

[{"name":"D-5909","type":"Arcus","manufacturer":"Schempp-Hirth Flugzeugbau"},{"name":"OE-9513","type":"DG-1001M","manufacturer":"DG Flugzeugbau"},{"name":"D-5809","type":"Duo Discus","manufacturer":"Schempp-Hirth Flugzeugbau"},{"name":"OE-5663","type":"FOX","manufacturer":"MDM-1"},{"name":"OE-5280","type":"ASK 21","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-5664","type":"LS8","manufacturer":"Rolladen-Schneider"},{"name":"D-6521","type":"LS1","manufacturer":"Rolladen-Schneider"},{"name":"D-3578","type":"LS4","manufacturer":"Rolladen-Schneider"},{"name":"OE-5338","type":"LS4","manufacturer":"Rolladen-Schneider"},{"name":"OE-5563","type":"LS4","manufacturer":"Rolladen-Schneider"},{"name":"OE-5211","type":"ASK 13","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"D-3987","type":"ASK 13","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"D-8525","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-5287","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-5295","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"OE-0772","type":"Ka 8","manufacturer":"Alexander Schleicher Flugzeugbau"},{"name":"D-KNAM","type":"SF-25C Falke","manufacturer":"Scheibe"},{"name":"OE-ARD","type":"Husky","manufacturer":"Aviat Aircraft"}]

table 2:

[{"id":1,"first_name":"Mike","last_name":"Bauer","phone":"+34 575 46546","email":"mymail@mail.com","is_active":true,"created_at":"2023-07-25T20:55:09.815Z","modified_at":"2023-07-25T20:55:09.815Z","modified_by":"Mike"},{"id":2,"first_name":"Paul","last_name":"Lederer","phone":"+23 r4r r4rr","email":"soso@mail.com","is_active":true,"created_at":"2023-07-25T20:55:09.815Z","modified_at":"2023-07-25T20:55:09.815Z","modified_by":"Mike"}]

To you personally prefer no framework when you dev frontends?

23

Just tested this with Vue v2 and v3 and it works just fine. Though you haven't rendered table headings.

You do have a minor typo though it still works. In the HTML, v-for="items in items" should be v-for="item in items" and then change the other items references to item. You also have spaces before each column in the data and you probably want to avoid that.

Here is my code:

index.html

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Vue v3 - Table Test - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Vue v3 - Table Test">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <!-- Your own CSS -->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed  -->
    <script defer src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.global.prod.js">/* Remove .prod for development version */</script>
    <!-- <script defer src="../uibuilder/vendor/vue/dist/vue.global.prod.js">/* Remove .prod for development version */</script> -->
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">

    <div id="app">
        <h1 class="with-subtitle">Vue v3 - Table Test</h1>
        <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

        <div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>

        <table >
            <thead>
                <tr>
                    <th v-for="col in cols">
                        {{col}}
                    </th>
                </tr>
            </thead>
            <tbody>
              <tr v-for="item in items" :key="item.name">
                <td>{{ item.name }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.manufacturer }}</td>
              </tr>
            </tbody>
        </table>
        
    </div>

</body></html>

index.js

// @ts-nocheck
'use strict'

const { createApp } = Vue

const app = createApp({
    data() { return {

        items: [], //table data
        cols: ['Manufacturer', 'Name', 'Type'],

    } },

    mounted() {
        uibuilder.onChange('msg', (msg) => {
            console.log('>> msg recvd >>', msg, this)

            this.items = msg.payload
        })
    },
})

app.mount('#app')

Based on the VueJS v3 simple template.

Example output:
image

I fed it the first of your 2 data examples.

1 Like
24

Oh I see, i left out something and mixed the syntax.

Thanks for the snippets !!

25

...and if you are using quasar:

3 Likes
26

Thank you for the useful link!

27

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