Answer a question

I can't seem to get default sorting to work. All I can see for the argument custom-sort in the documentation is that it's a "Function used to sort items", but I don't know in what way. I can imagine many. Is it called for an initial sort? It seems to return a list of items, but when I try to create one, I get an error saying this.customSort is not a function.

<template>
  <v-data-table
    :headers="headers"
    :items="reports"
    hide-default-footer>
    <template v-slot:item.requested="{ item }">
      {{ datetimeToDistance(item.requested) }}
    </template>
  </v-data-table>
</template>
<script>
export default {
name: 'Reports',
data () {
    return {
        customSort: (items,index,isDesc) => console.log("never called"),
        reports: [{name:"a",requested:"2020-01-01T00:00:00Z"}.{name:"b",requested:"2020-02-02T00:00:00"}],
    }
},
computed: {
    headers () {
        return [
            {text: "Name", value: "name"},
            {text: "Report Type", value: "report_type"},
            {text: "Requested", value: "requested", sort: (a,b) => a.localeCompare(b) },
            ];
    },
}
}
</script>

My sorting works if you click on the links. All I really want here is to say: "When the page first loads, sort by 'requested' as though the user clicked that one initially. Then let them change the ordering."

Note: The datetimeToDistance is just a function which calls a library and isn't too important. It's just that the output of that column is not directly in the objects.

Answers

Use the sort-by and the sort-desc properties with the .sync option, and set the desired values in data.

<template>
  <div>
    <v-data-table
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
    ></v-data-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        sortBy: 'fat',
        sortDesc: false,
    },
  }
</script>

https://vuetifyjs.com/en/components/data-tables/#external-sorting