[Bug Report] v-data-table custom-key-sort uses key not value

[LittleLama]

Problem to solve

Roles of key and value in headers are not explicits.

Regarding the doc, it looks like :

• key is the name referencing the header,
• value, which accepts function, could be used for filtering or sorting.

But it's not working this way.
Value can be used to process the string displayed, but is not sent to nor filtering nor sorting.

So, how can we sort processed data ?
As a side problem, how can we sort well sloted cells which are filled from many item properties ?

Example built from the doc : https://vuetifyjs.com/en/components/data-tables/basics/#keys-and-values
The issue is that the column, fullname, is not sorting well. Last colum is for testing processed data in the key : fail.
See playground
: https://t.ly/STk2u

We could think that "key" is here for referencing and value for sorting but it's not the case, see this example https://t.ly/eyMNr, only keys are used to sort, making some problems with processed data because it prevents from using them with sorting

It could be in another way, answering this question, how to make this doc example sorting correctly the last column https://vuetifyjs.com/en/components/data-tables/data-and-display/#basic-sorting
Processed value works for displaying, but as custom-key-sort only use the key provided value, it can't work for processed data. I think there is a shadow in the process but I can just be misunderstanding it

As a conclusion, it could be an example to integrate to the doc, showing how to make this table sorting well

Proposed solution

Would like to know how it should work with these cases to be able to detail the doc :

• using slots : how to set the data to use for sorting ?
• using processed value : how to make it work ?
• what the purpose of value if using key ?

[KaelWD]

Value can be used to process the string displayed, but is not sent to nor filtering nor sorting

That seems like a bug not a documentation problem.

We could think that "key" is here for referencing and value for sorting but it's not the case

Yeah key has to be a valid object key, it doesn't accept a function. Key is used as an identifier in sortBy, groupBy, and slots.
If value is not set then value = key. If key is not set and value is a string then key = value.

[LittleLama]

Thank you for lighting me.

So should it work like this ?

1. Key not a valid property of item & value is not set :

• display : from slot named like key
• sorting & filtering : not possible

2. Key not a valid property of item & value is set :

• display : from slot named like key, or if no slot from value
• sorting & filtering : from value (like this it's eventually processed from item properties)

3. Key is a valid property of item & value is not set :

• display : from slot named like key, or if no slot from key (pure, no process possible)
• sorting & filtering : from key

4. Key is a valid property of item & value is set :

• display : from slot named like key, or if no slot from value
• sorting & filtering : from value

Currently, it's working more like :

• if key is not valid, display from slot or fallback to value, no sorting possible
• if key is valid, display from slot (I should verify) or fallback to value, then fallback to key, sorting from key