# UIBuilder Table Implementation 2.0

**URL:** <https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618>\
**Category:** Dashboard\
**Tags:** uibuilder\
**Created:** [16 August 2023 20:32 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618 "2023-08-16T20:32:47Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 August 2023 22:04 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/21 "2023-08-22T22:04:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ardukus](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@ardukus](https://discourse.nodered.org/u/ardukus)\
**Post date:** [23 August 2023 05:26 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/22 "2023-08-23T05:26:59Z")

</div>

sure.  
table1:

```auto
[{"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:

```auto
[{"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?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 August 2023 11:04 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/23 "2023-08-23T11:04:04Z")

</div>

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

```auto
<!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

```auto
// @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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d6359f6d48b366ab2778b581fce92c9d15629347.png)

I fed it the first of your 2 data examples.

---

<div class="post-metadata">

**Author:** ![ardukus](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@ardukus](https://discourse.nodered.org/u/ardukus)\
**Post date:** [25 August 2023 14:16 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/24 "2023-08-25T14:16:26Z")

</div>

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

Thanks for the snippets !!

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [27 August 2023 09:40 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/25 "2023-08-27T09:40:18Z")

</div>

...and if you are using quasar:

> **[Table | Quasar Framework](https://v1.quasar.dev/vue-components/table)**
>
> The QTable Vue component allows you to display data in a tabular manner and it's packed with a lot of related features. It's generally called a datatable.

---

<div class="post-metadata">

**Author:** ![ardukus](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@ardukus](https://discourse.nodered.org/u/ardukus)\
**Post date:** [2 September 2023 19:27 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/26 "2023-09-02T19:27:00Z")

</div>

Thank you for the useful link!

---

<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:** [16 September 2023 19:27 UTC](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/27 "2023-09-16T19:27:29Z")

</div>

Closed on 16 September 2023 19:27 UTC

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

[Previous page](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618.md?page=1)