vue.jsvuejs2vuetify.jsvuetify-datatable

How can I use Vuetify v-data-table item slots?


<!-- DataTable.vue -->
<template>
  <v-data-table
    class="elevation-1"
    v-bind="$attrs"
    v-on="$listeners"
    dense
  ></v-data-table>
</template>

As you can see, I created a component which wraps <v-data-table>. I was wondering, why if I use it I'm not able to access the item slots?

<!-- PeopleView.vue -->
<template>
  <v-container>
    <DataTable
      :headers="headers"
      :items="people"
    >
      <template #item.fullName="{ value }">
        <b>{{ value }}</b>
      </template>
    </DataTable>
  </v-container>
</template>

Solution

  • To use item slots you must "override" slots and scoped slots.

    <!-- DataTable.vue -->
    <template>
      <v-data-table
        ...
      >
        <template v-for="(_, name) in $slots">
          <template :slot="name">
            <slot :name="name"></slot>
          </template>
        </template>
    
        <template
          v-for="(_, name) in $scopedSlots"
          #[name]="data"
        >
          <slot
            :name="name"
            v-bind="data"
          ></slot>
        </template>
      </v-data-table>
    </template>