Thursday, 13 May 2021

Customize v-data-table headers and keep default functionality (sorting)

I want the table headers of my v-data-table to be "tab-able". Therefore I created a slot and put a tabindex on the columns. Unfortunetely the sorting doesn't work anymore. Is there a smart way to make the columns "tab-able" and keep the standard functionality of the headers? Here is my code:

<template v-slot:header="{ props:{ headers}  }">
    <thead>
        <tr>
            <th v-for="header in headers" :key="header.value">
                <td sortable="true"  tabindex="0"></td>
            </th>
        </tr>
    </thead>
</template>

Best regards



from Customize v-data-table headers and keep default functionality (sorting)

No comments:

Post a Comment