Skip to content

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

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

<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 v-else-if="(header.type === 'aName')">
            {{ props.item[header.value] }}
      </template >
      <template v-else>
            {{ props.item[header.value] }}

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?



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