Vuetify Expandable Data Table: Expand row position

I've added fixes to the above logic you are trying

Find the working codepen here: https://codepen.io/chansv/pen/yLLbZWo?editors=1010

<div id="app">  <v-app id="inspire">    <v-data-table      :headers="headers"      :items="desserts"      :single-expand="singleExpand"      :expanded.sync="expanded"      item-key="name"      show-expand      class="elevation-1"    >      <template v-slot:top>        <v-toolbar flat color="white">          <v-toolbar-title>Expandable Table</v-toolbar-title>          <v-spacer></v-spacer>          <v-switch v-model="singleExpand" label="Single expand" class="mt-2"></v-switch>        </v-toolbar>      </template>      <template v-slot:expanded-item="{ headers }">        <td :colspan="headers.length">        <v-simple-table>              <template v-slot:default>                <thead>                  <tr>                    <th>Dessert (400g serving)</th>                    <th>Calories</th>                    <th>Fat</th>                    <th>Carbs</th>                    <th>Protein</th>                    <th>Iron</th>                  </tr>                </thead>                <tbody>                  <tr v-for="dessert in desserts" :key="dessert.name">                    <td>{{ dessert.name }}</td>                    <td>{{ dessert.calories * 4 }}</td>                    <td>{{ dessert.fat * 4 }}</td>                    <td>{{ dessert.carbs * 4 }}</td>                    <td>{{ dessert.protein * 4 }}</td>                    <td>{{ '4%' }}</td>                  </tr>                </tbody>              </template>            </v-simple-table>          </td>      </template>    </v-data-table>  </v-app></div>new Vue({  el: '#app',  vuetify: new Vuetify(),  data () {    return {      expanded: [],      singleExpand: false,      headers: [        {          text: 'Dessert (100g serving)',          align: 'left',          sortable: false,          value: 'name',        },        { text: 'Calories', value: 'calories' },        { text: 'Fat (g)', value: 'fat' },        { text: 'Carbs (g)', value: 'carbs' },        { text: 'Protein (g)', value: 'protein' },        { text: 'Iron (%)', value: 'iron' },        { text: '', value: 'data-table-expand' },      ],      desserts: [        {          name: 'Frozen Yogurt',          calories: 159,          fat: 6.0,          carbs: 24,          protein: 4.0,          iron: '1%',        },        {          name: 'Ice cream sandwich',          calories: 237,          fat: 9.0,          carbs: 37,          protein: 4.3,          iron: '1%',        },        {          name: 'Eclair',          calories: 262,          fat: 16.0,          carbs: 23,          protein: 6.0,          iron: '7%',        },        {          name: 'Cupcake',          calories: 305,          fat: 3.7,          carbs: 67,          protein: 4.3,          iron: '8%',        },        {          name: 'Gingerbread',          calories: 356,          fat: 16.0,          carbs: 49,          protein: 3.9,          iron: '16%',        },        {          name: 'Jelly bean',          calories: 375,          fat: 0.0,          carbs: 94,          protein: 0.0,          iron: '0%',        },        {          name: 'Lollipop',          calories: 392,          fat: 0.2,          carbs: 98,          protein: 0,          iron: '2%',        },        {          name: 'Honeycomb',          calories: 408,          fat: 3.2,          carbs: 87,          protein: 6.5,          iron: '45%',        },        {          name: 'Donut',          calories: 452,          fat: 25.0,          carbs: 51,          protein: 4.9,          iron: '22%',        },        {          name: 'KitKat',          calories: 518,          fat: 26.0,          carbs: 65,          protein: 7,          iron: '6%',        },      ],    }  },})