Group rows in Vuetify Data Table body

Question

In the body section of a v-data-table, where Vuetify puts the items, it wraps all of the rows in a tbody tag. My slot template consists of multiple rows all which I need to group so that I can apply transitions or other effects.

How can I make v-data-table stop wrapping the body in a tbody tag, resulting in nested tbody tags?

  <v-data-table
    ref="dataTable"
    :headers="headers"
    fixed-header
    :height="height"
    :items="invoices"
    item-key="id"
    :search="search"
    class="elevation-1"
    disable-pagination
    :loading="loading"
    loading-text="Loading invoices... please wait..."
    :no-data-text="this.noDataText"
    no-results-text="No invoices found for your search."
    :hide-default-footer="true"
  >
    <template v-slot:headers="props">
      <thead>
        <tr>
          <th
            v-for="header in props.headers"
            :key="header.text"
            ref="dataTableHdr"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '', header.class === '']"
            @click="changeSort(header.value)"
          >
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
        </tr>
      </thead>
    </template>

    <template v-slot:item="props">
      <tbody>
        <tr>
          <td>{{ props.item.vendorCode }}</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
        </tr>
        <tr>
          <td>{{ props.item.vendorName }}</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
          <td>CONTENT</td>
        </tr>
      </tbody>
    </template>
  </v-data-table>

Johnny Rice Johnny Rice · Accepted Answer · 2020-05-06T00:05:53

You can omit the tbody from the template since v-data-table puts the tbody around the results already when using v-slot:item.

<template v-slot:item="props">

    <tr>
      <td>{{ props.item.vendorCode }}</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
    </tr>
    <tr>
      <td>{{ props.item.vendorName }}</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
      <td>CONTENT</td>
    </tr>

</template>

Group rows in Vuetify Data Table body

1 Answers