JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.min.js"></script>
<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :custom-sort="customSort">
    </v-data-table>
  </v-app>
</div>

JavaScript

new Vue({
  vuetify: new Vuetify({
      icons: {
        values: {
          sort: 'mdi-arrow-down',
        },
      },
    }),
  data: () => ({
    headers: [{
      text: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      value: 'name'
    }, {
      text: 'Calories',
      value: 'calories'
    }, {
      text: 'Fat (g)',
      value: 'fat'
    }],
    desserts: [{
      name: 'Frozen Yogurt',
      calories: 200,
      fat: 6.0
    }, {
      name: 'Ice cream sandwich',
      calories: 200,
      fat: 9.0
    }, {
      name: 'Eclair',
      calories: 300,
      fat: 16.0
    }, {
      name: 'Cupcake',
      calories: 300,
      fat: 3.7
    }],
    sortBy: [],
    sortDesc: []
  }),
  methods: {
    customSort(items, index, isDesc) {
      items.sort((a, b) => {
        if (isDesc != "false") {
          return a[index] < b[index] ? -1 : 1
        } else {
          return b[index] < a[index] ? -1 : 1
        }
      })
      return items
    }
  }
}).$mount('#app')