title: How to use vuetify's custom sort?
body: <p>I'd like to use <a href="https://vuetifyjs.com/en/components/data-tables#api" rel="nofollow noreferrer">custom-sort</a> in my data table. My goal is to sort the table DESC as opposed to the default ASC. But I don't know-how.</p>
  <p>This is the start of my data table component:</p>
  <pre><code>  &lt;v-data-table
    :headers=&quot;headers&quot;
    :items=&quot;acts&quot;
    hide-actions
    class=&quot;elevation-1&quot;
    &gt;
    &lt;template slot=&quot;items&quot; slot-scope=&quot;props&quot;&gt;
  
      &lt;td&gt;{{ props.item.id }}&lt;/td&gt;
      &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;{{ props.item.provider.id }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;{{ props.item.category.name }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;{{ props.item.budget }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;{{ props.item.location.name }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;{{ props.item.deets }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;{{ props.item.keeping_it_100 }}&lt;/td&gt;
      &lt;td class=&quot;text-xs-center&quot;&gt;&lt;img width=&quot;50&quot; height=&quot;50&quot; :src=&quot;props.item.inspiration.inspiration&quot;&gt;&lt;/td&gt;
      &lt;td class=&quot;justify-center layout px-0&quot;&gt;....
  </code></pre>
  <p>And this is the script I'm using:</p>
  <pre><code>&lt;script&gt;
    export default {
      data () {
        return {
  
          dialog: false,
          customerSort: {
            isDescending: true,// I tried this? as the kabab format throws an error
          },
          headers: [
              { text: 'ID', value: 'id'},
              { text: 'Name', value: 'name' },  
              { text: 'Provider', value: 'provider' },
              { text: 'Category', value: 'category' },
              { text: 'Budget', value: 'budget' },
              { text: 'Country', value: 'location', sortable: true },
              { text: 'Keeping it 100%', value: 'keeping_it_100', sortable: false },
              { text: 'deets', value: 'deets', sortable: false },
              { text: 'inspiration', value: 'inspiration', sortable: false },
              { text: 'Cover', value: 'cover', sortable: false },
              { text: 'Actions', value: 'actions', sortable: false }
          ],
  </code></pre>
  <p>According to docs it is a <code>function prop</code>. But I haven't found an example on how to pass it.</p>
  <p><a href="https://i.stack.imgur.com/5Ekor.jpg" rel="nofollow noreferrer">This is a screenshot of the function...</a></p>