app/components/Ui/Template/DataTable.vue

<!--
Template de base d'un tableau interactif

@see https://vuetifyjs.com/en/components/data-tables/
-->

<template>
  <v-col cols="12" sm="12">
    <v-data-table :headers="headersWithItem" :items="items" class="elevation-1">
      <template v-for="(header, index) in headersWithItem" :key="index" #[header.item]="slotProps">
        <slot :name="header.item" v-bind="slotProps">
          {{ slotProps.item[header.value] }}
        </slot>
      </template>
    </v-data-table>
  </v-col>
</template>

<script setup lang="ts">
interface TableHeader {
  value: string;
  item?: string;
  [key: string]: unknown;
}

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  headers: {
    type: Array as PropType<TableHeader[]>,
    required: true,
  },
})

const { headers } = toRefs(props)

const headersWithItem = computed(() => {
  return headers.value.map((header: TableHeader) => {
    header.item = 'item.' + header.value
    return header
  })
})
</script>