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!

Thanks for everyone's help. [Here](https://codepen.io/idotuchman/pen/YzwYBze) is the updated data table. — IdoTuchman, Jul 04 '20 at 15:42

score 2 · Accepted Answer · answered Jul 03 '20 at 08:51

2

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>
              .....

answered Jul 03 '20 at 08:51

IVO GELOV

8,365
1
9
16

How can I make without `template v-slot:item`? Use only `v-data-table` or with `template v-slot:expanded-item`. – Не быть рабом на Руси Jul 21 '20 at 13:07
You can make it without `template v-slot:item` and use only `template v-slot:expanded-item` - take a look at the example in the documentation (https://vuetifyjs.com/en/components/data-tables/#expandable-rows) – IVO GELOV Jul 21 '20 at 15:37
without `v-slot:item`? – Не быть рабом на Руси Jul 21 '20 at 16:37
Do you see a `v-slot:item` anywhere in the example in Vuetify documentation ? – IVO GELOV Jul 21 '20 at 17:27

score 2 · Answer 2 · answered Jul 03 '20 at 10:14

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>

How can I make without `template v-slot:item`? Use only `v-data-table` or with `template v-slot:expanded-item`. — Не быть рабом на Руси, Jul 21 '20 at 13:09

score 1 · Answer 3 · answered Jul 03 '20 at 09:52

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>

How can I make without `template v-slot:item`? Use only `v-data-table` or with `template v-slot:expanded-item`. — Не быть рабом на Руси, Jul 21 '20 at 13:09

Vuetify data-table row does not expand

3 Answers3