Vuetify Data Table Header Customization - "hide-default-header" removes sort functionality

Question

When adding "hide-default-header" to the v-data-table, I've noticed the sort function for all columns are removed. I'd like to keep that functionality, is there a simple way to re-include sort?

It's tricky because I'm also attempting to add an additional icon with search features next to it, hence the need for a custom th template in the header.

In the code below, the 1st column is attempting to use the sort function to no avail. Any help would be appreciated in getting it working.

    <v-data-table
            @click:row="rowClick"
            :headers="headers"
            :items="arrangedList" 
            :search="search"
            :items-per-page="10"
            class="outlined elevation-0"
            hide-default-header
            >
            <template>
<thead>
    <tr>
        <th :class="[
                        'column sortable',
                        pagination.descending ? 'desc' : 'asc',
                        headers[0].value === pagination.sortBy
                        ? 'active'
                        : '',
                        ]">
            <!-- Foo1 -->

            {{ headers[0].text }}

            <template>
                <v-btn :ripple="false" x-small icon>
                    <v-icon @click="changeSort(headers[0].value)" color="grey darken-1">fa-arrow-up</v-icon>
                </v-btn>
            </template>

            <v-menu attach="#menuAnchor" :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">

                <template v-slot:activator="{ on }" id="menuAnchor">
                    <v-btn :ripple="false" x-small icon v-on="on">
                        <v-icon color="grey darken-1">mdi-filter-outline</v-icon>
                    </v-btn>
                </template>

                <v-card class="gridfilter-card">
                    <v-list-item class="gridfilter-list-item">
                        <v-list-item-content class="gridfilter-list-item-content">
                            <v-text-field v-model="filterCandyValue" label="Enter Candy #" :clearable="true"></v-text-field>
                        </v-list-item-content>
                    </v-list-item>
                    <v-card-actions class="gridfilter-card__actions">
                        <v-spacer></v-spacer>
                        <button type="button" class="btn btn-primary" @click="onCandyFilterApply()">
                            <i class="fa fa-floppy-o"></i>
                            &nbsp;Apply
                        </button>
                    </v-card-actions>
                </v-card>
            </v-menu>
        </th>

        <!-- Foo2 -->
        <th>
            <v-menu :close-on-content-click="false" :nudge-height="200" offset-y content-class="gridfilter-dd" style="display: inline-block">
                <template v-slot:activator="{ on }" id="menuAnchor1">
                    <span v-on="on">{{ headers[1].text }}</span>
                    <v-btn :ripple="false" x-small icon v-on="on">
                        <v-icon color="grey darken-1">mdi-filter-outline</v-icon>
                    </v-btn>
                </template>
                <v-card class="gridfilter-card">
                    <v-list-item class="gridfilter-list-item">
                        <v-list-item-content class="gridfilter-list-item-content">
                            <v-text-field label="Enter Foo2 #" :clearable="true"></v-text-field>
                        </v-list-item-content>
                    </v-list-item>
                    <v-card-actions class="gridfilter-card__actions">
                        <v-spacer></v-spacer>

                        <button type="button" class="btn btn-primary" @click="onFilterApply()">
                            <i class="fa fa-floppy-o"></i>
                            &nbsp;Apply
                        </button>
                    </v-card-actions>
                </v-card>
            </v-menu>
        </th>
    </tr>

    <template slot="items" slot-scope="props">
        <tr :active="props.selected" @click="props.selected = !props.selected">
            <td class="text-xs-right">{{ props.item.Foo1 }}</td>
            <td class="text-xs-right">{{ props.item.Foo2 }}</td>
        </tr>
    </template>

</thead>
</template>

            </v-data-table>

P.S. I was using this page as a starting point in getting the table set up: https://codepen.io/mikecole/pen/zLNKbG

Ronin Ronin · Accepted Answer · 2020-11-25T11:22:12

Looks like you want to remove the header row, however you still want keep the sort. So without adding hide-default-header option and keeping the header text value as empty string, you can keep the sort functionality.

HTML

<v-data-table
    @click:row="rowClick"
    :headers="headers"
    :items="arrangedList" 
    :search="search"
    :items-per-page="10"
    class="outlined elevation-0"
    >
JS

headers: [
    {
      text: '',align: 'left', value: 'name'
    },
    { text: '', value: 'calories' },
    .
    .
    ],

Vuetify Data Table Header Customization - "hide-default-header" removes sort functionality

1 Answers