Vuetify <v-data-table> custom <th> header

Question

I am using Vuetify <v-data-table>. How to add button on table header <th>?

This code is what I have tried so far.

<v-data-table v-model="selected" :headers="headers" :items="desserts">
  <template slot="items" slot-scope="row">
    <th><button>button</button></th>
  </template>
</v-data-table>  

<script>
export default {
    data:() =>({
    headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: true,
            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' },
        ],
});
</script>

Please help.

Dan Dan · Accepted Answer · 2021-03-10T00:42:21

You can use the header.<fieldname> slot template.

For example, to target the first column, name:

<v-data-table v-model="selected" :headers="headers" :items="desserts">

  <template v-slot:header.name="{ header }">
    {{ header.text }}
    <v-btn>Button</v-btn>
  </template>

</v-data-table>

Vuetify <v-data-table> custom <th> header

1 Answers