I'm using vuetify's data tables component to display objects of this schema:

{ date: '2021-12-23T11:12:18.669Z', type: 0, name: 'Meter-234452', temperature: '46', param_value: '23', floor_temp: '23' },

But in my mounted hook I'm overriding the date field to format it as requested by the product owner:

...
moment(date).format('DD.MM.YYYY HH.mm')

I am also grouping the data by the "name" field which works perfectly fine. But sorting the data by date does not work at all, it will only sort it by the day which makes sense.

I tried to specify a custom function in the custom-sort prop of the component as follows:

customSort (items, sortBy, sortDesc, locale) {
      const activeSortColumn = sortBy[0]
      const activeSortDesc = sortDesc[0]
      items.sort((a, b) => {
        if (activeSortColumn === 'date') {
          const dateA = moment(a.date, 'DD.MM.YYYY HH.mm').toDate()
          const dateB = moment(b.date, 'DD.MM.YYYY HH.mm').toDate()
          return activeSortDesc ? dateA - dateB : dateB - dateA
        }
        return activeSortDesc ? ('' + a[activeSortColumn]).localeCompare(b[activeSortColumn]) : ('' + b[activeSortColumn]).localeCompare(a[activeSortColumn])
      })
      return items
    },

This does work perfectly fine if I don't use grouping, but if I'm grouping and specifying this custom sort function, it'll look like this:

The sorting is still correct, but it also changed the grouping, which kinda makes sense, too. I suppose that it's being sorted and then grouped which causes it to create duplicate groups.

I'm unsure how to solve this, since I'd like to keep the grouping, but also have to provide correct sorting for the date format and all the other columns at once. I noticed that the sortBy parameter will be an array that includes the grouped field aswell if that is being used, so I thought about maybe sorting the data array twice could help?

I appreciate any help!