In my code, I have implemented a 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"gt;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>
Accompanied by these 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},
],
I am encountering an issue with sorting the table based on the quantity field which is of integer type. Despite specifying column type and using various sort options like sortable: false or
:sort-by="['quan]" :sort-desc="true"