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.
group.headerslot makes theitemslot ignored, so the only way seems to be to use theitem.nameslot for each colum. It's not so much more code... - Fab