vue.js - Vuetify V-Data-Table footer Add Button

Question

I want to add a button in the v-data-table footer similar to this image.

The issue is I can normally add a button if the table contains data, however, if there's no data, the button doesn't render.

Here's the code:

<v-data-table
   class="elevation-1"
   :headers="headers"
   :items="configs"
   item-key="id"
   :items-per-page="10">
      <template v-slot:footer.page-text>
        <v-btn
          color="primary"
          dark
          class="ma-2"
          @click="buttonCallback">
            Button
          </v-btn>
      </template>
</v-data-table>

This is what I want to achieve -> Image

question from:https://stackoverflow.com/questions/65672175/vuetify-v-data-table-footer-add-button

Answer 1

Here have you a data table example with the button:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="configs"
      :items-per-page="5"
      class="elevation-1"
    >
      <template v-slot:footer.page-text>
        <v-btn
          color="primary"
          dark
          class="ma-2"
          @click="buttonCallback">
            Button
          </v-btn>
      </template>
    </v-data-table>
  </v-app>
</div>

https://codepen.io/jairoerazo/pen/wvzYBVW

You can delete the configs array items and the button is rendered.