How to use both v-slot:item and v-slot:item.<name> in Vuetify data table?

Question

I've got a fairly customized Vuetify data table that I'm using, in that I've overwritten several columns with custom variations:

<v-data-table
    :headers="headers"
    :items="category.items"
    hide-default-footer
    show-select
    single-select
    sort-by="position"
    sort-desc>
    <template v-slot:item.data-table-select="{ item }">
        <v-icon
            class="handle grab">
            mdi-drag-vertical
        </v-icon>
    </template>

    <!-- Type Edit In Place -->
    <template v-slot:item.generic_type="{ item }">
        <span
            v-if="editableItem !== `type${item.id}Ref`"
            @click="setEditing(`type${item.id}Ref`);">
            {{ item.generic_type }}
        </span>
        <v-text-field
            v-else
            :ref="`type${item.id}Ref`"
            :value="item.generic_type"
            color="primary"
            dense
            hide-details
            type="text"
            outlined
            @blur="updateItem($event.target.value, item, 'generic_type')"
            @change="updateItem($event, item, 'generic_type')" />
    </template>

    // Several others similar to the input above //

</v-data-table>

Now though I'm trying to implement SortableJS, and am needing to be able to add a custom data attribute to each row of the data table so that I can reference it later in my Sortable functions.

According to the Vuetify docs, Some slots will override each other such as: body > item > item.<name> and header/header.<name>.

How do I go about writing a custom table row so that I can attach custom data attributes, as well as keeping the existing table columns that I've custom written?

Answer 1

After a few days of messing with it and lots of Googling, I've finally come across the way to fix this, and sorting even still works! Hope this helps someone else.

<v-data-table
  class="items-table-container"
  :headers="headers"
  :items="category.items"
  hide-default-footer
  single-select
  sort-by="position"
  sort-desc>
  <template
    v-slot:item="{ item, index }">
      <tr
        :data-category-id="category.id"
        :data-id="item.id">
        <td>
          <v-icon class="handle grab">
            mdi-drag-vertical
          </v-icon>
        </td>

        <!-- Type Edit In Place -->
        <td>
          <span
            v-if="editableItem !== `type${item.id}Ref`"
            @click="setEditing(`type${item.id}Ref`);">
            {{ item.generic_type }}
          </span>
          <v-text-field
            v-else
            :ref="`type${item.id}Ref`"
            :value="item.generic_type"
            color="primary"
            dense
            hide-details
            type="text"
            outlined
            @blur="updateItem($event.target.value, item, 'generic_type')"
            @change="updateItem($event, item, 'generic_type')" />
       </td>

       // Several others similar to the input above //
    </tr>
  </template>
</v-data-table>

Essentially I am using the v-slot:item, and creating my own table rows and cells.