# Vuetify Tables in Dashboard 2

**URL:** <https://discourse.nodered.org/t/vuetify-tables-in-dashboard-2/85791>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 February 2024 03:47 UTC](https://discourse.nodered.org/t/vuetify-tables-in-dashboard-2/85791 "2024-02-23T03:47:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [23 February 2024 03:47 UTC](https://discourse.nodered.org/t/vuetify-tables-in-dashboard-2/85791/1 "2024-02-23T03:47:59Z")

</div>

Simply copying the sample code from the Tables component in Vuetify and pasting it into a template node produces a console error "Cannot read properties of undefined (reading 'name')". It does not render in DB2.  
It does work in Vuetify playground without errors though.  
I've tried a few table examples and they have the same issues.

```auto
<template>
  <v-table>
    <thead>
      <tr>
        <th class="text-left">
          Name
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="item in desserts"
        :key="item.name"
      >
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </v-table>
</template>
<script>
  export default {
    data () {
      return {
        desserts: [
          {
            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,
          },
        ],
      }
    },
  }
</script>

```

---

<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:** [23 February 2024 08:16 UTC](https://discourse.nodered.org/t/vuetify-tables-in-dashboard-2/85791/2 "2024-02-23T08:16:28Z")

</div>

Well this is an odd one... it seems to be linked to the Vuetify component specifically, as if we just do a generic:

```html
<div v-for="item in desserts">{{ item }}</div>

```

outside of the `<v-table />` it renders without any issue. If I put this into the Vuetify playground though, it renders fine 😕

Further investigation to follow...

---

<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:** [23 February 2024 08:32 UTC](https://discourse.nodered.org/t/vuetify-tables-in-dashboard-2/85791/3 "2024-02-23T08:32:40Z")

</div>

This does work if we use the `data-table`'s `:items` option:

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

```

That does at least get us round the complete blockage, but I've recorded [v-table & v-data-table static examples not working · Issue #603 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/603) for future investigations too