Replace VDataTable header slot with sorting and respecting widths

[kazluu]

I am trying to replace the default header of a VDataTable. I've managed to replace the visuals, but I lost all sorting and width sizing. Here's what I am currently doing:

<template v-slot:header="{ props }">
<thead>
  <tr>
    <th :class="['pa-2']" v-for="h in props.headers" :key="`th-${h.text}`">
      <div>
        {{ _getHeaderLetter(h.text) }}
      </div>
      <div>
        {{ _getHeaderText(h.text) }}
      </div>
    </th>
  </tr>
</thead>
</template>

Does anyone have an example on how to properly overwrite the default header without losing its capabilities?

Thanks in advance.