v-data-table sort strings

[mrefik]

Hi,

When sorting the column with these values ['01', '015', '0158', '02', '0258', '03'], I am getting the following order: ['01', '02', '03', '015', '0158', '0258']. It seems that Vuetify is sorting these values as numbers instead of as strings.

How can I avoid this issue and sort them as strings?

Thank you!

[bcExpt1123]

To sort the values as strings instead of numbers in Vuetify, you can use the customSort function in your data table configuration. Here is an example of how you can implement it:

1. Define your headers with the customSort function for the specific column:

const headers = [
  {
    title: 'Values',
    key: 'value',
    customSort: (a, b) => a.localeCompare(b),
  },
  // other headers...
];

2. Use these headers in your v-data-table component:

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :sort-by="[{ key: 'value', order: 'asc' }]"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {
          title: 'Values',
          key: 'value',
          customSort: (a, b) => a.localeCompare(b),
        },
        // other headers...
      ],
      items: [
        { value: '01' },
        { value: '015' },
        { value: '0158' },
        { value: '02' },
        { value: '0258' },
        { value: '03' },
      ],
    };
  },
};
</script>

This way, the customSort function will ensure that the column values are sorted as strings.

[mrefik]

Thank you so much for your response and the helpful solution. I really appreciate your time and effort in providing the answer.
It worked perfectly!