How to enable sorting Data-table with i18n?

Question

I have a vuetify Data-table with multisort enabled like so:

<v-data-table
          ref="insuranceTable"
          :headers="headers"
          :items="getRows"
          :sort-by="['created']"
          :sort-desc="[true]"
          multi-sort
          :search="search"
          :items-per-page="10"          
        >

one of the columns in the table is Insurance Type. this value is fetched by using an index like this {{insuranceType[item.code]}}. The insuranceType array is defined as follows:

insurancetype:[
 this.$t('insuranceType.life'),
 this.$t('insuranceType.health'),
 this.$t('insuranceType.property'),
]

The values are displayed in the data-table without any issue. However, When I try To sort the table by Insurance Type Column, nothing happens. The Sorting works for all other columns. The sorting works for Insurance Type column if I use a non i18n array like this:

insurancetype:['life','health','property']

How can I configure the V-Data-Table so it can be sorted by columns with i18n values?

You should feed the data table with items that have already mapped code to insuranceType - or provide a custom sorting function to the sort property in the column definition in headers, as shown in the manual — IVO GELOV

cmfc31 cmfc31 · Accepted Answer · 2022-07-08T22:05:46

You can define a custom sorting function for the Insurance Type column in your headers array. I've used this method before to be able to sort some custom string dates formats like this:

headers: [
   {
      text: 'Created date',
      value: 'created_at',
      align: 'center',
      sort: (a, b) => {
         var date1 = a.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')
         var date2 = b.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')

         return date1 < date2 ? -1 : 1
      }
   },
   ...
]

You should be able to add your own logic to be able to sort those. Can you replicate the issue in a codesanbox or codepen?

How to enable sorting Data-table with i18n?

1 Answers