Can't remove Footer/Pagination from V-Data-Table in Vue 3.2

Question

So, I'm using VueJs 3.2, Vite 3.2.4, Vuetify 3.2.2...

I'm aware of how should I declare the options on DataTable, so the footer and pagination be removed, like this:

 <VDataTable
   :search="searchQuery"
   :headers="headers"
   :items="organizations"
   disable-pagination   
   hide-default-footer
   class="elevation-1 px-lg-4"
 >

At least that's what I found on my last search on Docs and Forums, using disable-pagination and hide-default-footer to achieve the expected result.

But it doesn't work. The table is presented with my data without errors at all, but the Footer/Pagination is still there.

I have even tried to set footer props, that is an old solution:

:footer-props="{ disablePagination : true, disableItemsPerPage : true }"

but nothing works...

Any idea on this guys?

Regalado

Answer 1

From looking at the code, the only way this can be done at the moment seems to be through setting an empty bottom slot:

<v-data-table
  ...
>
  <template #bottom></template>
</v-data-table>

Here it is in a snippet, where you can toggle it on and off:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    const items = ref(Array.from({length:10}, (_,i) => ({
      id: 1 + i, 
      name: `Item ${1 + i}`
    })))

    return {
      headers: [{key: 'id', title: 'ID'},{key: 'name', title: 'Name'}],
      items,
      showFooter: ref(false)
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
  <v-main>
    <v-data-table
    :headers="headers"
    :items="items"
    item-title="name"
    item-value="name"
    items-per-page="3"
  >
    <template #bottom v-if="!showFooter"></template>
  </v-data-table>
  <v-switch v-model="showFooter" label="Show Footer"/>
  </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.js"></script>

Dorsoventral

Thank you @Moritz-Ringler, for your answer! That's an option, that work. I changed the Data Table Footer class to be displayed as none and it worked as well. As it was a Vue local change in the class, it was fast and with less code. Do you think that define a footer template and use a v-if condition is more appropriate for this case? – Regalado

Oh, the v-if is only in the snippet so the footer can be toggled. When you don't want to toggle the footer, the empty slot from the template is all it takes. When you use CSS, the footer is not visible, but it is still generated and updated. Personally, I'd prefer to have it gone completely if I don't use it (also, it sounded like your question was about programmatically removing it, not just visually). – Dorsoventral

Answer 2

<v-data-table-virtual hide-default-footer

convert the data table into the virtual and add "hide-default-footer".

Outset