Vuetify v-data-table not responsive when using v-slot:body

Question

Vuetify v-data-table not stacking on mobile devices when using v-slot:body

How can I get the data table to stack if it implements the body v-slot? As can be seen in the Vuetify documentation this is how a normal v-data-table behaves:

And this is how it behaves when using body slot:

Thank you.

Answer 1

The default body implementation of v-data-table has two components for the table rows - Row and MobileRow. When the page's width is under 600px, MobileRow is used.

By using the body slot, the default implementation is discarded, along with the mobile logic, so you must supply your own. Fortunately, there's a handy helper class we can use to easily switch styling depending on the current page size.

Here's a codepen with a sketch up of the solution. The relevant part:

  <template v-slot:body="props">
    <tbody>
      <tr v-for="item in props.items">
        <td class="d-block d-sm-table-cell" v-for="field in Object.keys(item)">
          {{item[field]}}
        </td>
      </tr>
    </tbody>
  </template>

For more precise styling, you might want to use the visibility helper classes and have two separate implementations for the table rows - just like the default implementation.