Vuetify Datatable Actions Row - vue.js

Question

Is it possible to left align the rows per pages and page navigation and put a button in its place in the same row?

Answer 1

The actions row are aligned right by default. There is a way to achieve what you want though. You can use custom pagination and hide the current one:
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
hide-actions
:pagination.sync="pagination"
>
And add this after the datatable:
<v-layout row justify-center>
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
<v-btn class="test">test</v-btn>
</v-layout>
See more here.
Here is a Codepen in action.

Answer 2

I found the easiest way is to add the button to some data table slot you use and just position the button relatively to the table.
<v-data-table
style="position: relative;">
<template slot="footer">
<v-btn style="position: absolute; left: 10px; bottom: 10px;">
test
</v-btn>
</template>
</v-data-table>

Answer 3

Simplest way by CSS :
template in your datatable :
<template v-slot:actions-prepend>
<v-btn>
Click me !
</v-btn>
</template>
CSS :
.my-grid .v-datatable__actions > div:first-child {
flex: 1;
}
Working snippet :
new Vue({
el: '#app',
methods: {
onClick() { this.dark = !this.dark; }
},
data: {
dark: true,
headers: [{
text: 'Dessert (100g serving)',
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'
}
],
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%'
}
]
}
})
.my-grid .v-datatable__actions > div:first-child {
flex: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.js"></script>
<div id="app">
<v-app :dark="dark">
<v-content>
<v-data-table :headers="headers" :items="desserts" class="my-grid">
<template v-slot:items="{item}">
<tr>
<td>{{item.name}}</td>
<td>{{item.calories}}</td>
<td>{{item.fat}}</td>
<td>{{item.carbs}}</td>
<td>{{item.protein}}</td>
<td>{{item.iron}}</td>
</tr>
</template>
<template v-slot:actions-prepend>
<v-btn #click="onClick">
Switch mode
</v-btn>
</template>
</v-data-table>
</v-content>
</v-app>
</div>