Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer
In fact, controls shown by default in v-data-table
footer slot is normal (public - not internal) Vuetify component v-data-footer
. You can add it into the top slot easily like this:
<div id="app">
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:items-per-page="5"
:single-select="true"
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:top="{ pagination, options, updateOptions }">
<v-data-footer
:pagination="pagination"
:options="options"
@update:options="updateOptions"
items-per-page-text="$vuetify.dataTable.itemsPerPageText"/>
</template>
</v-data-table>
</v-app>
</div>
Demo