How to change style or add over component on headers of v-data-table on vuetify3

Question

I want to add some specific changes on the header of v-data-table like this:

DATE | Libelle <v-chip>(No count)</v-chip> |TYPE 

Anyone does have any ideas how to do that?

const headers = [
  { title: 'DATE', align: 'start', key: 'date', sortable: true, },
  { title: 'LIBELLÉ', align: 'start', key: 'libelle', width: '25%' },
  { title: 'TYPE', align: 'start', key: 'type', width: '10%' },
];

Answer 1

Pretty sure you are indeed looking for the header.libelle slot:

<v-data-table :headers="headers">
  <template v-slot:['header.libelle']>
    Libelle <v-chip>(No count)</v-chip>
  </template>
</v-data-table>

Here it is in a snippet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
          <v-data-table :headers="headers">
            <template v-slot:['header.libelle']>
              Libelle <v-chip>(No count)</v-chip>
            </template>
          </v-data-table>
        </v-main>
      </v-app>
  `,
  data(){
    
    return {
      headers:[
        { title: 'DATE', align: 'start', key: 'date', sortable: true, },
        { title: 'LIBELLÉ', align: 'start', key: 'libelle', width: '25%' },
        { title: 'TYPE', align: 'start', key: 'type', width: '10%' },
      ]
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>