app_vue2/components/Ui/Template/DataTable.vue

<!--
Tableau interactif

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

<template>
  <v-col
    cols="12"
    sm="12"
  >
    <v-data-table
      :headers="headersWithItem"
      :items="items"
      :locale="$i18n.locale"
      class="elevation-1"
      :footer-props="{
        'items-per-page-text':  $t('itemsPerPage'),
        'items-per-page-all-text':  $t('allResult')
      }"
    >
      <template v-for="header in headersWithItem" #[header.item]="props">
        <slot :name="header.item" v-bind="props">
          {{ props.item[header.value] }}
        </slot>
      </template>

      <template #[`footer.page-text`]="items">
        {{ items.pageStart }} - {{ items.pageStop }} {{$t('of')}} {{ items.itemsLength }}
      </template>

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

<script lang="ts">
import { defineComponent, computed, toRefs } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    items: {
      type: Array,
      required: true
    },
    headers: {
      type: Array,
      required: true
    }
  },
  setup (props) {
    const { headers } = toRefs(props)

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

    return {
      headersWithItem
    }
  }
})
</script>