CODEWITHSUNDEEP
vuejs2vue-componentvuetify.js
VerySeriousSoftwareEndeavours
VerySeriousSoftwareEndeavours

Reputation: 1753

Replacing content of default header of v-data-table

I have a Vue application that is using Vuetify 2.x v-data-table component. Inside the v-data-table component is a template for the defined slot :header. Within the template is another custom defined slot.

    <v-data-table>
        <template v-slot:header="props">
            <tr>
                <slot name="hdrCheckbox">
                    <th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAllSelected"></v-checkbox></th>
                </slot>
    
                <th v-for="header in props.headers" :key="header.text"
                    :class="['column sortable', dataTable.options.sortDesc ? 'desc' : 'asc', header.value === dataTable.options.sortBy ? 'active' : '']"
                    @click="$emit('change-sort', header.value)">
                    <v-icon small>arrow_upward</v-icon>
                    {{ header.text }}
                </th>
            </tr>
        </template>
    </v-data-table>

    <data-table>
        <template #hdrCheckbox="props"><th class="empty"></th></template>
    </data-table>

This is the markup that the component renders:

    <tr>
        <th class="empty"></th>
    </tr>
    <thead class="v-data-table-header">
        <tr>
            <th role="columnheader" scope="col" aria-label="Topic" class="text-start">
                <span>Topic</span>
            </th>
            <th role="columnheader" scope="col" aria-label="Current Interval" class="text-start">
                <span>Current Interval</span>
            </th>
            <th role="columnheader" scope="col" aria-label="Interval Benchmark: Sorted ascending. Activate to sort descending." aria-sort="ascending" class="text-start sortable active asc">
                <span>Interval Benchmark</span>
                <i aria-hidden="true" class="v-icon notranslate v-data-table-header__icon mdi mdi-arrow-up theme--light" style="font-size: 18px;"></i>
            </th>
            <th role="columnheader" scope="col" aria-label="Add Date: Not sorted. Activate to sort ascending." aria-sort="none" class="text-start sortable">
                <span>Add Date</span>
                <i aria-hidden="true" class="v-icon notranslate v-data-table-header__icon mdi mdi-arrow-up theme--light" style="font-size: 18px;"></i>
            </th>
        </tr>
    </thead>

Why does the content of the custom defined slot hdrCheckbox render outside of the thead tag?

Upvotes: 0

Views: 3201

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37763

Well that's how v-data-table works

It may feel strange first but overriding header slot of v-data-table does not replace it's default header content. You need to use hide-default-header prop to do that. And content of header slot is placed before default header content...

Also check the documentation for header slot - parameter passed into it is object { props: {...}, on: {...}} so using it like <template v-slot:header="props"> wont work (props.headers does not exist, props.props.headers does). Use <template v-slot:header="{ props }"> instead....

Upvotes: 3

Related Questions