Tengo una tabla de datos v que agrupa elementos. Cuando uso un encabezado personalizado con una ranura en V como se muestra a continuación, ¿cómo habilito la función de clasificación integrada que se encuentra en el encabezado predeterminado?
¿Hay alguna manera de activar la función de clasificación integrada con mi función sortThisColumn , o de alguna otra manera? Por el momento, no se puede hacer clic en los encabezados de mi tabla.
<v-app class="v-app-custom" v-if="myItems.length > 0"> <div class="section"> <v-data-table :headers="headers" :items="myItems" :items-per-page="30" hide-default-footer hide-default-header item-key="uuid" group-by="mentor_id" class="mentor-table" > <template v-slot:header="{ props }"> <thead class="v-data-table-header"> <tr> <th class="text-start" v-for="header in props.headers" :key="header.value" :style="{ width: `${header.width}px` }" @click="sortThisColumn(header.value)" > <span>{{ header.text }}</span> <v-icon v-if="header.sortable" color="white" small>{{ sort[header.value] == "desc" ? "fa-chevron-down" : "fa-chevron-up" }}</v-icon> </th> </tr> </thead> </template> <template v-slot:group.header="{ group, props, headers }" sort-icon="fa-chevron-down" >Encabezados de tabla: -
headers: [ { text: "Status", value: "status", width: 82, sortable: false, }, { text: "Type", value: "type", width: 140, sortable: true }, { text: "Creator", value: "creator", width: 140, sortable: true }, { text: "Date", value: "due_date", width: 141, sortable: true }, { text: "Mentor", value: "mentor", width: 141, sortable: true }, ],Verifique este codesanbox que hice: https://codesandbox.io/s/stack-70975751-p9msn?file=/src/components/CustomSorting.vue
Puede definir una función de clasificación personalizada en su matriz de encabezados como esta. He hecho esto en el pasado para agregar una ordenación personalizada a una de mis columnas de fecha.
headers: [ { text: 'Date', value: 'date', align: 'center', sort: (a, b) => { var date1 = a.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1') var date2 = b.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1') return date1 < date2 ? -1 : 1 } } ]Sabiendo esto, podrías hacer algo como esto en tu caso.
data: (vm) => ({ headers: [ { text: 'Date', value: 'date', sort: (a,b) => { return vm.myCustomSort(a,b) } }, ] })