CODEWITHSUNDEEP
vue.jsvuetify.js
user15282016
user15282016

Reputation:

Vuetify How can I sort a custom cell in a v-data-table?

I have a table with these headers:

    headersfav: [
      {text: 'Datum', value: 'createdate'},
      {text: 'Nachname', value: 'lastname'},
      {text: 'Vorname', value: 'firstname'},
      {text: 'Adresse', value: 'address', sortable: true},
      {text: 'Status', value: 'status'},
    ],

I use it in a v-data-table component like this:

<v-data-table
    :headers="headersfav"
    :items="itemsfav"
    :search="searchfav"
    :custom-filter="customSearch"
    :sort-by="['createdate']"
    multi-sort
    :sort-desc="[true]"
>

For the address field, I use this:

<template #item.address="{ item }">{{ item.street }}, {{ item.city }}</template>

When I tried to sort it, nothing happens, must I use here a custom-sort function? And how can I make it?

Upvotes: 0

Views: 1141

Answers (2)

nargant
nargant

Reputation: 1

Just had the problem in Vue3 and if you want to sort on more than 1 value like to sort there is a new property 'sortRaw' which allow to use the whole object for the sort function. If needed you will be able to sort computing the both values street and city instead of the one defined as 'value' :

 headersfav: [
      {text: 'Datum', value: 'createdate'},
      {text: 'Nachname', value: 'lastname'},
      {text: 'Vorname', value: 'firstname'},
      {text: 'Adresse', value: '', sortable: true, sortRaw: (a: ItemType, b: ItemType) => {
                 //custom sort function where you can use a.street AND a.city values          
             }
      },
      {text: 'Status', value: 'status'},
    ],

Upvotes: 0

Daniel Rodr&#237;guez Meza
Daniel Rodr&#237;guez Meza

Reputation: 1267

Since the property address seems to be an object, you have to point to the actual property upon it needs to be sorted, this is done in the header definitions in the value property:

In this case it could be by address.street or address.city

    headersfav: [
      {text: 'Datum', value: 'createdate'},
      {text: 'Nachname', value: 'lastname'},
      {text: 'Vorname', value: 'firstname'},
      {text: 'Adresse', value: 'address.street', sortable: true},
      {text: 'Status', value: 'status'},
    ],

Upvotes: 1

Related Questions