how to use single slot to modify any columns in data tables

Question

I have created a reusable data table by using vuetify. Everything is working fine. I have passed headers and items as a props for using the data table in different component.

I am using slot but using some different approach which is column based solution with if/else condition. But, i need single slot so it couldn't be component centric.

Here is my sample Data table code

<v-data-table
:headers="headers"
:items="items"
:items-per-page="8"
:hide-default-footer="true"
hide-actions
item-key="name"
class="elevation-1"
>
<template slot="items" slot-scope="props">
  <td v-for="(header, index) in headers" :key="index">
      <template v-if="(header.type === 'aId')">
            {{ props.item[header.value] }}
      </template>
      <template v-else-if="(header.type === 'aName')">
            {{ props.item[header.value] }}
      </template >
      <template v-else>
            {{ props.item[header.value] }}
      </template>
  </td>
 </template>
 </v-data-table>

Here i am passing one 'template' property in table header fields and based on condition i can change respective columns but it sounds component specific. Is there any better approach to do that?

Emīls Gulbis Emīls Gulbis · Accepted Answer · 2021-02-11T12:40:25

CustomDataTable.vue

<template>
  <v-data-table ...>
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>
  </v-data-table>
</template>

how to use single slot to modify any columns in data tables

1 Answers