Vue data table sort doesn't work correctly-CodePudding

I have this v-data-table:

  <v-data-table :headers="walletInHeaders" :items="filteredByQuantityIncome" >
    <template v-slot:items="props">
      <td >
        <v-btn @click="loginAsClient(props.item.email)" color="blue">Login as client</v-btn>
        {{ props.item.email }}
      </td>
      <td >{{ props.item.currency }}</td>
      <td >{{ props.item.quantity }}</td>
      <td >{{ props.item.totalIncomeAmount.toFixed(8) }}</td>
      <td  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.

CodePudding user response：

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".

CodePudding user response：

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.