Vuetify data-table row does not expand

Question

I'm building a vuetify <v-data-table> with button icons on the right-most column. The button icons appear when a data row is hovered. I'd like the data row to expand when the row is clicked, but it's not working.

Current codepen implementation here

The code creates a <v-data-table> as follows:

<v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
      :items-per-page="5"
      :expanded.sync="expanded"
>

And this is the slot to expand the row:

<template v-slot:expanded-item="{ headers, item }">
        <td :colspan="headers.length">More info about {{ item.name }}</td>
</template>

I'm hoping someone with vuetify experience can help me get the data table rows to expand when clicked. Thanks!

Answer 1

You should change your code like this:

 <template v-slot:item="{index, item, isExpanded, expand}">
            <tr 
               @mouseover="toolsIndex=index" 
               @mouseleave="toolsIndex=null" 
               @click="expand(!isExpanded)"
            >
              <td>{{ item.name }}</td>
              <td>{{ item.calories }}</td>
              <td>{{ item.fat }}</td>
              <td>{{ item.carbs }}</td>
              <td>{{ item.protein }}</td>
              <td>{{ item.iron }}</td>
              .....

Answer 2

hey because you want to expand your row maybe you can try the vuetify expansionpanel?

it cloud look something like this

<template v-slot:item="{index, item}">           
   <v-expansion-panels>
    <v-expansion-panel>
     <v-expansion-panel-header>{{ item.name }}</v-expansion-panel-header>
      <v-expansion-panel-content>
       <v-simple-table>
        <template v-slot:default>
         <thead>
          <tr>
           <td>Calories</td>
           <td>Fat (g)</td>
           <td>Carbs (g)</td>
           <td>Protein (g)</td>
           <td>Iron (%)</td>
           </tr>
          </thead>
          <tbody>
           <tr @mouseover="toolsIndex=index" @mouseleave="toolsIndex=null">
            <td @click="expandRow(index)">{{ item.calories }}</td>
            <td @click="expandRow(index)">{{ item.fat }}</td>
            <td @click="expandRow(index)">{{ item.carbs }}</td>
            <td @click="expandRow(index)">{{ item.protein }}</td>
            <td @click="expandRow(index)">{{ item.iron }}</td>
            <td>
             <v-icon
                  v-show="index==toolsIndex"
                  small
                  class="mr-2"
                  @click.stop="dialog = true"
                  >mdi-pencil</v-icon
                >
                <v-icon
                  v-show="index==toolsIndex"
                  small
                  @click.stop="dialog = true"
                  >mdi-delete</v-icon
                >
             </td>
            </tr>
          </tbody>
         </template>
        </v-simple-table>
       </template>
      </v-data-table>
     </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>         
          </template>

Answer 3

just change your code block like below, problem solved here

<template v-slot:item="{index, item, isExpanded, expand}">
            <tr @mouseover="toolsIndex=index" 
                @click="expand(!isExpanded)"
                @mouseleave="toolsIndex=null">
              <td @click="expandRow(index)">{{ item.name }}</td>
              <td @click="expandRow(index)">{{ item.calories }}</td>
              <td @click="expandRow(index)">{{ item.fat }}</td>
              <td @click="expandRow(index)">{{ item.carbs }}</td>
              <td @click="expandRow(index)">{{ item.protein }}</td>
              <td @click="expandRow(index)">{{ item.iron }}</td>
              <td>
                <v-icon
                  v-show="index==toolsIndex"
                  small
                  class="mr-2"
                  @click.stop="dialog = true"
                  >mdi-pencil</v-icon
                >
                <v-icon
                  v-show="index==toolsIndex"
                  small
                  @click.stop="dialog = true"
                  >mdi-delete</v-icon
                >
              </td>
            </tr>
          </template>