Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer

Question

The v-data-table has a top slot, with a pagination prop whose structure matches that of the footer slot. Is it possible to assign the top slot to reference the same (presumably a v-pagination) control that the footer is using?

My goal here is to duplicate the pagination controls (that are in the footer) at the top of the table.

Answer 1

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