DEV Community

Daniel P πŸ‡¨πŸ‡¦
Daniel P πŸ‡¨πŸ‡¦

Posted on • Updated on

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

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[]
Enter fullscreen mode Exit fullscreen mode

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

    <!-- expand column -->
    <template"{ 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>

    <!-- expand item/row -->
    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length">
Enter fullscreen mode Exit fullscreen mode

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.


  1. Remove the show-expand prop from v-data-table, we're no longer using it.

  2. Add :expanded.sync="expanded" prop to the data table, and a expanded:[] variable to your component data.

  3. Add a new column { text: '', value: 'expand', align:'end' }, to myHeaders.

  4. 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>
Enter fullscreen mode Exit fullscreen mode

More info here:

Top comments (4)

plekleft profile image
Pavel Levin
wwwolfgang profile image

Do you have a solution for this problem? Im realy interested to be able to expand rows conditionaly.

jonahbranch profile image
Jonah Branch

Yes. Use the above codepen and add a "canExpand" attribute to each item, and a v-if="item.canExpand" to the expand button

dwweb0309 profile image

Great Article!