How can I move the Vuetify v-data-table expand arrow to the leftmost column?

You can achieve the desired layout by simply reordering your headers so that the automatically generated expand column (matching the key "data-table-expand") comes first. In other words, keep the show-expand prop so that the expand functionality is wired up, but move the header with key "data-table-expand" to the first position in your headers array.

Below is an updated example:

VUECopied
<template>
  <v-data-table
    v-model:expanded="expanded"
    :headers="dessertHeaders"
    :items="desserts"
    item-value="name"
    show-expand
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>Expandable Table</v-toolbar-title>
      </v-toolbar>
    </template>
    <template v-slot:expanded-row="{ columns, item }">
      <tr>
        <td :colspan="columns.length">
          More info about {{ item.name }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data () {
    return {
      expanded: [],
      // Place the expand header first by moving the "data-table-expand" key to the beginning:
      dessertHeaders: [
        { title: '', key: 'data-table-expand' },
        {
          title: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          key: 'name'
        },
        { title: 'Calories', key: 'calories' },
        { title: 'Fat (g)', key: 'fat' },
        { title: 'Carbs (g)', key: 'carbs' },
        { title: 'Protein (g)', key: 'protein' },
        { title: 'Iron (%)', key: 'iron' }
      ],
      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: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: 16
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: 6
        }
      ]
    }
  }
}
</script>

Explanation

• The show-expand prop (along with v-model:expanded) wires up the built‑in expand functionality.
• Vuetify automatically renders an extra cell using the header with the key "data-table-expand."
• By moving that header to be first in the dessertHeaders array, the expand arrow will be rendered in the leftmost column, matching your desired layout.

This solution keeps the built‑in toggle behavior intact without requiring manual wiring of click handlers.