example.vue

<template>
  <div class="pa-16 ma-16">
    <v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      sort-by="name"
      group-by="category"
      class="elevation-1"
      show-group-by
    >
      <template v-slot:group.header="{ group, toggle }">
        <td colspan="3">
          <v-btn
            icon
            @click="toggle"
          >
            <v-icon>mdi-minus</v-icon>
          </v-btn>

          {{ group }}
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            value: 'name',
            groupable: false,
          },
          {
            text: 'Category',
            value: 'category',
            align: 'right',
            groupable: false,
          },
          { text: 'Calories', value: 'calories', align: 'right' },
          { text: 'Dairy', value: 'dairy', align: 'right' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            category: 'Ice cream',
            dairy: 'Yes',
            calories: 40,
          },
          {
            name: 'Ice cream sandwich',
            category: 'Ice cream',
            dairy: 'Yes',
            calories: 20,
          },
          {
            name: 'Eclair',
            category: 'Cookie',
            dairy: 'Yes',
            calories: 80,
          },
          {
            name: 'Cupcake',
            category: 'Pastry',
            dairy: 'Yes',
            calories: 140,
          },
          {
            name: 'Gingerbread',
            category: 'Cookie',
            dairy: 'No',
            calories: 40,
          },
          {
            name: 'Jelly bean',
            category: 'Candy',
            dairy: 'No',
            calories: 80,
          },
          {
            name: 'Lollipop',
            category: 'Candy',
            dairy: 'No',
            calories: 110,
          },
          {
            name: 'Honeycomb',
            category: 'Toffee',
            dairy: 'No',
            calories: 10,
          },
          {
            name: 'Donut',
            category: 'Pastry',
            dairy: 'Yes',
            calories: 20,
          },
          {
            name: 'KitKat',
            category: 'Candy',
            dairy: 'Yes',
            calories: 40,
          },
        ],
      }
    },
  }
</script>