How to create a Vuetify data table that has only some expandable rows

#vue #vuetify

Uses vuetify v2.0.0

To make only some of the items expandable use the data-table-expand slot. The slot provides the following props.

{
  item: any
  select: (v: boolean) => void
  isSelected: boolean
  expand: (v: boolean) => void
  isExpanded: boolean
  headers: TableHeader[]
}

Using the item object and the expand function, you can add custom expend functionality.

<template>
  <v-data-table
    :headers="myHeaders"
    :items="myItems"
    :single-expand="true"
    show-expand
  >
    <!-- expand column -->
    <template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
      <v-btn @click="expand(true)" v-if="item.canExpand && !isExpanded">Expand</v-btn>
      <v-btn @click="expand(false)" v-if="item.canExpand && isExpanded">close</v-btn>
    </template>

    <!-- expand item/row -->
    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length">
        <pre>{{item}}</pre>
      </td>
    </template>
  </v-data-table>
</template>

The items objects use a canExpand boolean for determining if it can be expanded.

Vuetify, by default adds a text-start class to the expand td element. To change alignment, update the header object for that column, by adding an align property.

Available values are: 'start' | 'center' | 'end'

The expand column is always first though, If you want to make it last, you need to add a custom column.

steps:

Remove the show-expand prop from v-data-table, we're no longer using it.
Add :expanded.sync="expanded" prop to the data table, and a expanded:[] variable to your component data.
Add a new column { text: '', value: 'expand', align:'end' }, to myHeaders.
Add a row slot for the new column. Because the row slot does not provide a expand function, you need to use the expanded variable to toggle selection.

<template v-slot:item.expand="{ item }">
  <v-btn x-small @click="expanded = [item]" v-if="item.canExpand && !expanded.includes(item)">compare</v-btn>
  <v-btn x-small @click="expanded = []" v-if="item.canExpand && expanded.includes(item)">close</v-btn>
</template>