How to get access to a specific header column in Vuetify data-table

Question

How can I get access to a specific header column in Vuetify data-table to customize it? Let's say I would like to hide it by using a css class-name.

In Vuetify docs suggested to use header.<name> to get acess to. But I don't have a clear understanding how to this due to the lack of an example.

Answer 1

As mentioned in official docs :

You can use the dynamic slots header.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers.

You could do :

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:header.name="{ header }">
      {{ header.text.toUpperCase() }}
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data: () => ({
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        ...
      ],
    }),
  }
</script>

For example <template v-slot:header.<name>="{ header }"> gives you an access to the correspondant item in headers config { text: 'Calories', value: 'calories' }, where you could use the text and the value in order to customize them like :

<template v-slot:header.name="{ header }">
      <i>{{ header.text.toUpperCase() }}</i>
    </template

If you want to customize rows check this answer