Hi,
I'm trying to make the <thead> of a <table> a component.
Here's my code:
<table class="table table-hover table-striped table-bordered mb-0">
<sortable-header :headers="['ID', 'Name', 'Contact', 'Email', 'Country', 'Added By', 'Date Added']">
</sortable-header>
<tbody>
// other stuff here...
</tbody>
</table>
Here's the output:
// This is the sortable-header component
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Contact</th>
<th>Email</th>
<th>Country</th>
<th>Added By</th>
<th>Date Added</th>
</tr>
</thead>
<table class="table table-hover table-striped table-bordered mb-0">
<tbody>
// other stuff here...
</tbody>
</table>
The <sortable-header> component is rendered properly but outside the <table>. Is there any way to fix this?
Thanks in advance.
HTML tolerates a lot of madness, but some elements including tables are fussy about what other elements can be nested inside of them - so your custom component gets hoisted out because is is invalid! You can use the is attribute instead:
<table class="table table-hover table-striped table-bordered mb-0">
<thead is="sortable-header"></thead>
<tbody>
// other stuff here...
</tbody>
</table>
@tykus It works! Thanks a lot.
Please or to participate in this conversation.