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

To anyone who's still experiencing this issue, update your Vuetify version to 2.3.19. This was a bug that was fixed in that version. github.com/vuetifyjs/vuetify/releases/tag/v2.3.19 — DeeP

Jairo David Erazo Botero Jairo David Erazo Botero · Accepted Answer · 2021-01-12T08:20:45

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.

Vuetify V-Data-Table footer Add Button

1 Answers