How can I expand slots in v-data-table component in Vuetify?

Question

Hello I am trying expand default v-data-table component from Vuetify to avoid code redundancy. I have few components with v-data-table. It works on the same principles but table headers can be different. I am using v-slots but how I can expand dynamic slots from Vuetify?

When I have to add custom html to one of column (eg. action) in table I am using:

<v-data-table
   :headers="questionTableHeaders"
   :items="questions.fetchedData"
   class="elevation-1"
   hide-default-footer
   :page.sync="questions.pagination.page"
   :items-per-page="questions.pagination.itemsPerPage"
   :loading="loadingData"
   loading-text="Loading..."
   no-data-text="No data.">

   <template v-slot:item.action="{ item }">
      <v-icon
      small
      class="mr-2"
      title="title"
      @click="clickOnTheItem(item)">
      fas fa-plus
      </v-icon>
   </template>

</v-data-table>

But sometime tables don't have column action. How I can prepare dynamic slots in my component dataTable expanded default v-data-table component to make sure that each of the headers passing to my component have a slot that I can use in parent component?

If I have headers:

[
   {text: "text1", value: "name"},
   {text: "text2", value: "hash"}
]

I can have access to slots item.name and item.hash?

<dataTable :url="examApiUrl" :headers="examTableHeaders">
   <template v-slot:item.name="{ item }"></template>
   <template v-slot:item.hash="{ item }"></template>
</dataTable>

But as I wrote before, headers can be different. How I can prepare slots in my dataTable component?

Vu Thanh Bay Vu Thanh Bay · Accepted Answer · 2020-07-08T06:29:55

Try it

<v-data-table
   :headers="questionTableHeaders"
   :items="questions.fetchedData"
   class="elevation-1"
   hide-default-footer
   :page.sync="questions.pagination.page"
   :items-per-page="questions.pagination.itemsPerPage"
   :loading="loadingData"
   loading-text="Loading..."
   no-data-text="No data.">

   <template v-slot:item.action="{ item }">
      <v-icon
      small
      class="mr-2"
      title="title"
      @click="clickOnTheItem(item)">
      fas fa-plus
      </v-icon>
   </template>
    <template v-for="(slot, name) in $scopedSlots" v-slot:[name]="item">
      <slot :name="name" v-bind="item"></slot>
    </template>
</v-data-table>

How can I expand slots in v-data-table component in Vuetify?

1 Answers