Vuetify Datatable Actions Row

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.