A component inside table headers slot

Steps to reproduce

Hi, I wanted to put a component inside datatables headers slot like this:

<template slot="headers" scope="props">
  <my-component />
</template>

my-component contains all th tags wrapped in a tr tag which is the root.

<tr>
  <th>blah</th>
</tr>

but by doing so vuetify wraps my component in another tr which messes up the markup, the result is a tr containing a tr

<tr>
  <tr>
    <th>blah</th>
  </tr>
</tr>

this is due to this line of code: head.js:13

children = row.length && row[0].tag === 'tr' ? row : this.genTR(row)

when using a component, the tag property is assigned the component’s name thus, a new tr is generated.

is there a workaround?

Thank you.

[nekosaur]

That’ll have to end up being user error I think. You can only have one root element in vue templates anyway, so a user would have to do something like

<template>
  <div>
    <td></td>
    <td></td>
  </div>
</template>

which isn’t valid html in a table anyway.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord