I have this v-data-table:
<v-data-table :headers="walletInHeaders" :items="filteredByQuantityIncome" class="elevation-1">
<template v-slot:items="props">
<td class="pa-1 text-xs-center">
<v-btn @click="loginAsClient(props.item.email)" color="blue">Login as client</v-btn>
{{ props.item.email }}
</td>
<td class="pa-1 text-xs-center">{{ props.item.currency }}</td>
<td class="pa-1 text-xs-center">{{ props.item.quantity }}</td>
<td class="pa-1 text-xs-center">{{ props.item.totalIncomeAmount.toFixed(8) }}</td>
<td class="pa-1 text-xs-center" style="white-space: pre-line">{{ props.item.types }}</td>
</template>
</v-data-table>
And headers:
walletInHeaders: [
{text: 'Email (click on email to log in as client)', value: 'email', align: 'center', class: 'px-0', sortable: false},
{text: 'Currency', value: 'curr', align: 'center', class: 'px-0', sortable: false},
{text: 'Quantity', value: 'quan', align: 'center', class: 'px-0'},
{text: 'Total income amount', value: 'totalIncomeAmount', align: 'center', class: 'px-0', sortable: false},
{text: 'Payment methods', value: 'mostPopularPaymentMethod', align: 'center', class: 'px-0', sortable: false},
],
As you can see, there is a fiend quantity (it's integer in code), and I want to make table sort using this column. By default it doesn't work correctly at all. Not quantity field, not others.
I wrote, that this is integer column in code. Also, I was trying to use sortable: false and on other columns :sort-by="['quan]" :sort-desc="true" on table, but it still doesn't work.
Actually, I should pay attention to value property in headers. As you can see, in HTML I have, for example, props.item.currency, but in headers {text: 'Currency', value: 'curr', align: 'center', class: 'px-0', sortable: false}. So, I just change curr value to currency, just like object's properties name. I did it for every property and now it works.
sort-by and sort-order fields are String and Boolean respectively. They are Arrays only if multi-sort is true.
If multi-sort is disabled: Try sort-by="quan" instead of :sort-by="['quan']".
If multi-sort is enabled: Try :sort-desc=[true] instead of :sort-desc="true".