Vuetify Data Table Expand Row on Column Click

I have a vuetify data table that includes expandable rows. The only real difference I have from the demo is that I would like the column to open/close the expandable row just like the chevron icon. When I put an @click handler on the v-slot for that column I get the error Error in v-on handler: "TypeError: expand is not a function". This is the only column I need to customize so I would like to not have to build out the entire <tr> v-slot by hand. A scaled-down code example is below. Thanks.


  <template"{ item, expand, isExpanded }" >
    <h4 class="my-2" @click="expand(!isExpanded)">{{ }} located in {{ item.depot | camelToWords }}</h4>

  <template v-slot:expanded-item="{ headers, item }">
    <ProductDetailExpandedRow :currentProduct="item" :headers="headers"/>


export default {
  data() {
    return {
      headers: [
          text: 'Name',
          value: 'name',
          text: 'Product ID',
          value: 'productCode',
          text: 'Stock',
          value: 'stock',
6 more columns continue on here...
      products: [],

112 thoughts on “Vuetify Data Table Expand Row on Column Click”

Leave a Comment