Vuetify remove pagination on v-data-table

Question

I want remove pagination on v-data-table, I tried to use hide-default-footer but it doesn't work.

<v-data-table
  :headers="headers"
  :items="desserts"
  hide-default-header
  hide-default-footer
  class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>{{ props.index }}</td>
        <td>{{ props.item.name }}</td>
        <td>{{ getProject(props.item.project_uuid) }}</td>
        <td>{{ props.item.deadline }}</td>
        <td>{{ getUser(props.item.executor) }}</td>
        <td>{{ getUser(props.item.creator) }}</td>
        <td>{{ props.item.description }}</td>
    </template>
</v-data-table>

Vickeyvicki

Answer 1

It should be :hide-default-footer="true"

<v-data-table
  :headers="headers"
  :items="desserts"
  :hide-default-header="true"
  :hide-default-footer="true"
  class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>{{ props.index }}</td>
        <td>{{ props.item.name }}</td>
        <td>{{ getProject(props.item.project_uuid) }}</td>
        <td>{{ props.item.deadline }}</td>
        <td>{{ getUser(props.item.executor) }}</td>
        <td>{{ getUser(props.item.creator) }}</td>
        <td>{{ props.item.description }}</td>
    </template>
</v-data-table>

Demo on codepen

Shipe

In case someone finds this later, the slot is "item" not "items" and you have to supply the <tr> tag as well. – Whereupon

See idirsun comment, if you only do that you will only see the first 10 elements. – Ibbetson

For Vuetify 2.x: This only hides the pagination controls, but the table still paginates. You need to hide the controls as well as disable the actual pagination of the results for the latest versions. – Chlo

Very important: set disable-pagination also, otherwise as mentioned above you will only see 10 elements. – Hobbyhorse

You can also just use hide-default-footer instead of :hide-default-footer="true" – Ninurta

hiding the footer does not disable paging. when there are more than 10 data items/desserts they will not be shown in the table and users can access them (expect you add paging functionality to your custom footer). so you also need to add :disable-pagination="true" to show all data in the table as mentioned by @idirsun – Empathize

Answer 2

adding :hide-default-header="true" :hide-default-footer="true" will only remove the default footer and header, to completely disable pagination you need to add disable-pagination to your <v-data-table>

Midshipman

From what i have experienced you need both – Anny

Likewise just disable-pagination is not enough, it will bug out the footer which is still interactible but doesnt do anything. There is also middleground of items-per-page="-1" + footer props to limit it to all. That way most of the footer will be hidden and just item counter remains. – Carabiniere

Answer 3

For those arriving here using Vuetify 3, I've found adding an empty footer slot achieves the same:

<template #bottom></template>

To show more than the first 10 items, disable pagination with :items-per-page="0". Full example:

<v-data-table
    :items="thedata"
    :items-per-page="0"
  >
  <template #bottom></template>
</v-data-table>

Here's further documentation on the footer slot:

• https://vuetifyjs.com/en/components/data-tables/slots/

• https://vuetifyjs.com/en/api/v-data-table/#slots-bottom

Git

Answer 4

I just add these two props to v-data-table

<v-data-table hide-default-footer disable-pagination />

No need to assign true to the props .i.e hide-default-footer="true"

That's what I usually do.

Tallboy

Do you know if there's any tricky on this when using VueJs 3.2 and Vite 3.2.4? Because I've tried these options but my footer never goes away. – Contrition

What version of Vuetify are you using? If you use Vuetify 3, then the above approach is obsolete. It works with Vuetify 2 only – Tallboy

Answer 5

The correct answer for this is adding the attribute disable-pagination as it's stated on Vuetify documentation: https://vuetifyjs.com/en/components/data-tables/ Vuetify documentation

This is true for Vuetify 2.x version, if you're using Vuetify 1.5 use the hide-actionsattribute instead. https://v15.vuetifyjs.com/en/components/data-tables

Berhley

This turns off pagination, and the whole item list will display. This does not hide the pagination footer however – Plath

Answer 6

to disable pagination on v-data-table use disable-pagination prop

Midshipman

In addition to posting a screenshot of the documentation add the relevant link as it is easier to find more information that way. – Hamachi

Not sure why but this prop has no effect. – Whereupon

It's for vue2, but for vue3 need to use templates – Geodynamics

Answer 7

In Vuetify 3, you can use the #bottom slot to customize the bottom section of the v-data-table, including the pagination controls. Here's how you can hide the pagination controls using the #bottom slot.

For Vuetify 3.5.3 my solution is

<v-data-table :items="item.req_skills" :items-per-page="-1">
  <template #bottom>
    <!-- Leave this slot empty to hide pagination controls -->
  </template>
</v-data-table>

Gauguin

Answer 8

Below code worked for me, none of the above did. Also dont see the "disable-pagination" prop in the new API

<v-data-table :items="items" :hide-default-footer="true"
                :items-per-page="items.length"></v-data-table>

Rodd

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Karyosome

Answer 9

The answer from ittus almost works, but the attributes should not be bound (unless you have a data property called "true" that is set to a boolean of true.

Instead,

:hide-default-header="true"
:hide-default-footer="true"

should be

hide-default-header="true"
hide-default-footer="true"

Boredom

This is in fact wrong. Doing it this way passes the string "true" as a prop, which can cause vue warnings for receiving a data type it does not expect. Instead, simply provide the attribute without a value (eg, just hide-default-footer). – Suzysuzzy