Change order of default select and expand columns in Vuetify data table

Question

I have got a Vuetify 2 data table which uses default select and expand functionality. So I get the expand icon in the first column, select boxes in the 2nd column from left.

What I need is to show these columns in switched order: 1st column -> select box, 2nd column -> expand icon.

Is there any easy way to achieve that without implementing the select functionality on my own?

<v-data-table
    :headers="headers"
    :items="items"
    show-select
    show-expand
    item-key="id"
  >
    <template v-slot:expanded-item="{ item }">
      <td :colspan="headers.length+2">{{ item }}</td>
    </template>
</v-data-table>

Answer 1

In your header list, add column declarations with value set to data-table-select and data-table-expand to set the position of the select column and expand column:

headers: [
  {value: 'data-table-select'},
  {value: 'data-table-expand'},
  ...
]

Here it is in a snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-data-table
            :headers="headers"
            :items="items"
            show-select
            show-expand
            item-key="id"
          >
            <template v-slot:expanded-item="{ item }">
              <td :colspan="headers.length+2">{{ item }}</td>
            </template>
        </v-data-table>
        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    return {
      headers: [
        {value: 'data-table-select'},
        {value: 'data-table-expand'},
        {text: 'Name', value: 'name'}
      ],
      items: [{id: 1, name: 'foo'}, {id: 2, name: 'bar'}],
      
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>