A way to access the defaullt sorting method from Data Tables in Vuetify

I'm trying to add the default functionality for sorting information inside a Data table from Vuetify, but I couldn't make it appear.

Code Sandbox with some comments : https://codesandbox.io/s/vuetify-2-forked-wfhe9?file=/src/App.vue

<template>    <v-app>      <div>        <v-data-table          :headers="headers"          :items="data"          class="elevation-1 mt-4"          :items-per-page="5"          hide-default-header        >          <template v-slot:header="{ header }">            <thead>              <tr>                <th                  v-for="(h, index) in headers"                  class="text-subtitle-2"                  style="border-bottom: 2px solid #bdc6d8"                  :key="index"                >                  <v-tooltip bottom :key="h.value">                    <template v-slot:activator="{ sort }">                      <span v-on="sort"></span>                    </template>                  </v-tooltip>                </th>              </tr>            </thead>          </template>          <template #item="{ item }">            <tr>              <td style="border: 0; height: 70px">                              </td>              <td style="border: 0; height: 70px">                              </td>              <td style="border: 0; height: 70px">                              </td>              <td style="border: 0; height: 70px">                              </td>            </tr>          </template>        </v-data-table>      </div>    </v-app>  </template>    <script>  export default {    data() {      return {        headers: [          {            text: "Name",            align: "start",            value: "name",          },          {            text: "Date",            align: "start",            value: "date",          },          {            text: "Quantity",            align: "start",            value: "quantity",          },          {            text: "Expiration",            align: "start",            value: "expirationDate",          },        ],        currentProds: [          {            name: "Proc 1",            date: "01/01/01",            quantity: 123,            expirationDate: "01/02/02",          },          {            name: "Proc 1",            date: "01/01/01",            quantity: 123,            expirationDate: "01/02/02",          },          {            name: "Proc 1",            date: "01/01/01",            quantity: 123,            expirationDate: "01/02/02",          },          {            name: "Proc 1",            date: "01/01/01",            quantity: 123,            expirationDate: "01/02/02",          },          {            name: "Proc 1",            date: "01/01/01",            quantity: 123,            expirationDate: "01/02/02",          },        ],      };    },  };  </script>    <style>  </style>    

Searching google I found code that apparently works but only in previous versions (i'm using the last one)

Why i'm doing the header again? Designer asked for a different border bottom so trying to do this I made the thead again using the slot.

I dont want to add a custom sort, just the default one.

Is there a way to do this in 2.4.3 verison of Vuetify?

https://stackoverflow.com/questions/66070202/a-way-to-access-the-defaullt-sorting-method-from-data-tables-in-vuetify February 06, 2021 at 04:32AM