Having an issue with adding an extra empty row when using the header slot in v-data-table from Vuetify2.
Check out the codepen here: https://codepen.io/satishvarada/pen/rNBjMjE?editors=1010
Vue.component('pivot-table',{
data:()=>({
pivotData:[["2018",1470,1436,1445,0],["2019",1953,1824,0,0]],
pivotHeaders:[[{"value":"Month","colspan":1},{"value":"JAN","colspan":2},{"value":"FEB","colspan":2}],[{"value":"Year","colspan":1},{"value":"Count1","colspan":1},{"value":"Count2","colspan":1},{"value":"Count1","colspan":1},{"value":"Count2","colspan":1}]],
}),
template:
`<v-data-table disable-sort disable-filtering :headers="pivotHeaders" :items="pivotData">
<template v-slot:header="{ props: { headers } }"><thead class="v-data-table-header">
<tr v-for="header in headers" style="background-color:yellow;">
<th v-for="head in header" :colspan="head.colspan">{{head.value}}</th>
</tr></thead>
</template>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item_row in items"><template v-for="item in item_row">
<td>{{ item }}</td></template>
</tr></tbody></template></v-data-table>`
})
An additional empty row is being displayed below the header. The number of cells in this row matches the number of rows present in the header.