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>
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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>