How to use vutify's custom sort?

You can use a function like this-

customSort(items, index, isDesc) {  items.sort((a, b) => {    if (index === "date") {      if (!isDesc) {        return compare(a.date, b.date);      } else {        return compare(b.date, a.date);      }    }  });  return items;}

Where the compare is a function which compares a.date and b.date and returns 1 or -1

isDesc is a variable passed by the table which tells in what order does the user want to sort it. If you want to sort in desc, just use !isDesc in the if-else condition

To use this in your template just use

<v-data-table  :headers="headers"  :items="Data"  :custom-sort="customSort">  <template slot="items" slot-scope="props">    <td class="font-weight-black">{{ props.item.date }}</td>    <td class="text-xs-right">{{ props.item.time }}</td>    <td class="text-xs-right">{{ props.item.name }}</td>  </template></v-data-table>

To make sure your other fields still work with the normal sort use

customSort(items, index, isDesc) {      items.sort((a, b) => {        if (index === "date") {          if (!isDesc) {            return dateHelp.compare(a.date, b.date);          } else {            return dateHelp.compare(b.date, a.date);          }        } else {          if (!isDesc) {            return a[index] < b[index] ? -1 : 1;          } else {            return b[index] < a[index] ? -1 : 1;          }        }      });      return items;    }

Based on this answer code about custom-filter, I tried using custom-sort.
Please refer to this answer if you apply it to your code.

By the following code, I have confirmed sorting when I click 'Calories' header.
My CodePen

new Vue({    el: '#app',    data() {        return {            food: [                { name: 'Bakchoi', type: 'vegetable', calories: 100 },                { name: 'Pork', type: 'meat', calories: 200 },                { name: 'Chicken Thigh', type: 'meat', calories: 300 },                { name: 'Watermelon', type: 'fruit', calories: 10 },            ],            headers: [                { text: 'Name', align: 'left', value: 'name' },                { text: 'Food Type', align: 'left', value: 'type' },                { text: 'Calories', align: 'left', value: 'calories' },            ],            search: '',        };    },    methods: {        customSort(items, index, isDescending) {          // The following is informations as far as I researched.          // items: 'food' items          // index: Enabled sort headers value. (black arrow status).          // isDescending: Whether enabled sort headers is desc          items.sort((a, b) => {              if (index === 'calories') {                  if (isDescending) {                      return b.calories - a.calories;                  } else {                      return a.calories - b.calories;                  }              }          });          return items;        }    }})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script><script src="https://unpkg.com/vuetify@0.15.2/dist/vuetify.js"></script><link rel="stylesheet" href="https://unpkg.com/vuetify@0.15.2/dist/vuetify.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"><div id="app">    <v-app>        <v-select                label="Food Type"                :items="['vegetable', 'meat', 'fruit']"                v-model="search"        ></v-select>        <v-data-table                :headers="headers"                :items="food"                :search="search"                :custom-sort="customSort"                hide-actions        >            <template slot="items" scope="{ item }">                <td>{{ item.name }}</td>                <td>{{ item.type }}</td>                <td>{{ item.calories }}</td>            </template>        </v-data-table>    </v-app></div>

NOTE: the following answer is for Vuetify 1.5.x

A little late to the party here, if all you want to do is sort descending by a single field, then custom-sort it not what you want to use, you're better off using the :pagination.sync prop

Custom sort is used when you want to change the behaviour of the comparison function (e.g sorting based off the reverse or lowercase version of a string, or proper sorting of date strings in the format 'DD-MM-YYYY').

If you want to use the default descending functionality, use the :pagination.sync prop, like so:

<v-data-table  :headers="headers"  :items="acts"  :pagination.sync="pagination">    <template v-slot:items="props">...</template></v-data-table>

In your script, set pagination:

data () {  return {    pagination: {      sortBy: 'id', // The field that you're sorting by      descending: true    }  }}

This specifies that you want the table to be initially sorted by descending id - id can be changed to any field name in the dataset.

It's worth noting that this only specifies the default behaviour, and if you have sorting enabled for your other headers, users can still sort the table by any field.