Vuetify: [Bug Report] v-data-table group.header does not span the entire row

[yjagota]

Environment

Vuetify Version: 2.0.19
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Windows 10

Steps to reproduce

Add the following templat to a grouped v-data-table:

<template v-slot:group.header="{ group, headers }"> <tr> <td :colspan="headers.length"> <span style="font-weight:bold;"> {{ group.toUpperCase() }} </span> </td> </tr> </template>

Expected Behavior

The header row should span the entire row.

Actual Behavior

The header only appears in the first column.

Reproduction Link

https://codepen.io/yjagota/pen/VwZJdjj

[bluwy]

Omitting the <tr> tag resolves the issue since the slot is already a <tr> tag.

So it becomes like this:
<template v-slot:group.header="{ group, headers }"> <td :colspan="headers.length"> <span style="font-weight:bold;"> {{ group.toUpperCase() }} </span> </td> </template>

[yjagota]

Thanks. That does resolve it. Is there any way to find the information about slot tags? The documentation does not provide any such information. Some are obvious but others, not so much.

[bluwy]

The v-data-table API section's slot tab only briefly describes its scoped props. I can't find any examples below regarding the group.header slot too. I could make a PR to have it included under the example's slot section, no promises though :)

[yjagota]

Haha. Thanks, that will be great. 👍

I am closing the issue as it is resolved.