Vuetify datatable customiser le header

Bonjour,

J’ai besoin de modifier en temps réel le nom des colonnes de mes tableaux v-data-table.Dans l’exemple ci-dessous, je suis obligé de répéter mon code autant de fois qu’il y a de colonnes:

<template>
  <v-app>
    <v-content>
      <v-data-table
        :headers="headers"
        :items="items"
      >
        <template v-slot:header.col1="{ header }">
          {{ parseInt(header.text) + 1 }}
        </template>
        <template v-slot:header.col2="{ header }">
          {{ parseInt(header.text) + 1 }}
        </template>
        <template v-slot:header.col3="{ header }">
          {{ parseInt(header.text) + 1 }}
        </template>
        <template v-slot:header.col4="{ header }">
          {{ parseInt(header.text) + 1 }}
        </template>
      </v-data-table>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    headers: [
      { text: '1', value: 'col1' },
      { text: '2', value: 'col2' },
      { text: '3', value: 'col3' },
      { text: '4', value: 'col4' }
    ],
    items: [
      {
        col1: 'Frozen Yogurt',
        col2: 159,
        col3: 6.0,
        col4: 24
      },
      {
        col1: 'Ice cream sandwich',
        col2: 237,
        col3: 9.0,
        col4: 37
      },
      {
        col1: 'Frozen Yogurt',
        col2: 159,
        col3: 6.0,
        col4: 24
      },
      {
        col1: 'Ice cream sandwich',
        col2: 237,
        col3: 9.0,
        col4: 37
      }
    ]
  })
}
</script>

Y a-t-il une possibilité de faire ceci plus simplement, sans redondance et sans avoir à connaitre à l’avance le nombre de colonnes?

J’ai essayé de faire un v-for sur le header dans le template mais sans succès.

Merci d’avance pour votre aide.

Salutations.

t’as essayer le slot header tout cour ?

pk ne pas juste mettre à jour les header.value et utiliser les templates par défaut ?

Oui, c’est effectivement une piste que j’étudie en ce moment.

L’idée était d’éviter de faire des traitements sur le nom des colonnes qui proviennent d’une API externe et de le faire faire par le composant datatable. Ainsi, je peux réutiliser ce composant dans n’importe quelle vue sans jamais me préoccuper du nombre de colonnes à afficher.

Salutations.