# Ui-template & v-table: how to display array of data

**URL:** https://discourse.nodered.org/t/ui-template-v-table-how-to-display-array-of-data/86057
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [1 March 2024 14:33 UTC](https://discourse.nodered.org/t/ui-template-v-table-how-to-display-array-of-data/86057 "2024-03-01T14:33:08Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)
#### Post date: [1 March 2024 14:33 UTC](https://discourse.nodered.org/t/ui-template-v-table-how-to-display-array-of-data/86057/1 "2024-03-01T14:33:08Z")

</div>

Hi,

I am sending an array to the ui-table node, which displays that data perfectly.  
When trying to send this data to a vuetify table, I am not getting any results in the table.  
The code in the template node:

```auto
<template>
  <v-data-table :items="items">
  </v-data-table>
</template>

<script setup>
  const items = {{msg.payload}};
</script>

```

Where am I going wrong?

Thanks!

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [1 March 2024 14:43 UTC](https://discourse.nodered.org/t/ui-template-v-table-how-to-display-array-of-data/86057/2 "2024-03-01T14:43:52Z")

</div>

**TLDR** :

No need to bind this to an additional variable, you can just call `msg.payload` directly:

```html
<template>
  <v-data-table :items="msg.payload"></v-data-table>
</template>

```

**Explanation:**

In VueJS there are two ways of defining things:

- Options API
- Composition API

The latter is cleaner if you don't have much to define, but is a lot more difficult to support in our use case where we're merging in component definitions to an existing component (`ui-template`), as such we only support the Options API way of defining things in VueJS.

The Options API prescribes a fixed set of "options" to define your Vue component, which are those presented in the "Template" of the `ui-template`'s Node-RED panel when first created.

For your use case here, _if_ you want to bind to an additional variable, you'd be able to use the `data () { ... }` section of the component definition.

That said, you actually don't need to in your use case, `msg` is already available to the contents in `<template />` so you can just call that directly.

---

<div class="post-metadata">

### Author: ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)
#### Post date: [1 March 2024 14:58 UTC](https://discourse.nodered.org/t/ui-template-v-table-how-to-display-array-of-data/86057/3 "2024-03-01T14:58:05Z")

</div>

mind blown..  
Thanks! Working perfectly of course.. 🙂

---

<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: [15 March 2024 14:58 UTC](https://discourse.nodered.org/t/ui-template-v-table-how-to-display-array-of-data/86057/4 "2024-03-15T14:58:54Z")

</div>

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