Vuetify 2 grouped data table with customized group header and item rows

Question

My goal is to create a Vuetify 2 data table from a list of car models. Data needs to be grouped by vendor with a customized group header row and also the item rows for each car model needs to be customized. Below is a very reduced example to show my main problem which is that Vuetify fully ignores my template for the item-slot and uses the default behaviour instead.

How can I make Vuetify use that template as well with avoiding to use a single template for each item column? ... because in my real world example there are a lot of columns which needs to be customized.

Vue code:

<div id="app">
  <v-app>
    <v-data-table
      dense
      disable-sort
      :headers="headers"
      hide-default-footer
      :items="cars"
      item-key="id"
      group-by="vendor"
    >
      <template v-slot:group.header="{items, isOpen, toggle}">
        <th colspan="2">
          <v-icon @click="toggle"
            >{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
          </v-icon>
          {{ items[0].vendor }}
        </th>
      </template>
      <template v-slot:item="{ item }">
        <tr>
          <td><strong>{{ item.name }}</strong></td>
          <td>{{ item.power }} HP</td>
        </tr>
      </template>
    </v-data-table>
  </v-app>
</div>

Javascript code:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        { text: 'Model name', value: 'name' },
        { text: 'Power', value: 'power' }
      ],
      cars: [
        {
          id: 1,
          name: '320i',
          vendor: 'BMW',
          power: 170
        },
        {
          id: 2,
          name: 'M5',
          vendor: 'BMW',
          power: 350
        },
        {
          id: 3,
          name: 'Golf GTD',
          vendor: 'Volkswagen',
          power: 184
        },
        {
          id: 4,
          name: 'Polo GTI',
          vendor: 'Volkswagen',
          power: 190
        }
      ]
    }
  }
})

Codepen demo can be found here.

Answer 1

The following behavior is a bug in previous Vuetify versions. Using Vuetify 2.4.9+ (or even earlier) will fix your problem.

Check this codepen: https://codepen.io/seaskyways/pen/VwPbyER

It's the same as yours just with updated Vuetify.

// and this is some code cuz stackoverflow doesn't allow codepens without code