Example implementation for Table.vue?

[arjanski]

Hello,

I was wondering if you could give a quick example of how the Table.vue is used?

I was guessing that this would work, but nothing renders:

      <Table hover clickable :items="items" :maxHeight="400">
        <slot name="header">
          <td>Name</td>
          <td>Place</td>
        </slot>
        <slot name="items">
          <td>{{items.name}}</td>
          <td>{{items.place}}</td>
        </slot>
      </Table>

...

  data () {
    return {
      items: [
        {
          name: 'Name1',
          place: 'Place1'
        },
        {
          name: 'Name2',
          place: 'Place2'
        }
      ]
    }
  }

Thank you for any help!

[arjanski]

Okay, sorry that was silly. The syntax for providing named slot content was completely wrong:

        <template v-slot:header>
          <td>Name</td>
          <td>Place</td>
        </template>

Component looks great and neatly constructed.

[arjanski]

I seemingly can't wrap my head around using the items slot, sorry.

How would I pass dynamic data from my array? I know that Table.vue receives it as a prop, but I cannot write items.name or something similar in my parent component since the v-for loop happens within Table.vue.

Would be great to know - thanks for any advice!