app/components/Ui/Template/DataTable.vue

<!--
Tableau interactif

@see https://vuetifyjs.com/en/components/data-tables/
// TODO: expliquer la différence avec UiDatatable
-->

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

    </v-data-table>
  </v-col>
</template>

<script setup lang="ts">

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  headers: {
    type: Array,
    required: true
  }
})

const { headers } = toRefs(props)

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