Vuetify remove pagination on v-data-table

Question

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

try to use hide-dafault-footer

<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>

want to remove pagination

score 39 · Accepted Answer · answered Aug 06 '19 at 07:36

39

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

answered Aug 06 '19 at 07:36

ittus

21,730
5
57
57

In case someone finds this later, the slot is "item" not "items" and you have to supply the tag as well. – Rick Kukiela Dec 31 '19 at 22:40
2

See idirsun comment, if you only do that you will only see the first 10 elements. – Stéphane Gerber Sep 24 '20 at 13:48
1

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. – Camille Sévigny Jan 26 '21 at 14:45
1

Very important: set disable-pagination also, otherwise as mentioned above you will only see 10 elements. – Nick D Mar 25 '21 at 09:56
1

You can also just use `hide-default-footer` instead of `:hide-default-footer="true"` – foxiris Jun 15 '21 at 08:04
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 – cnmuc Jun 02 '22 at 09:41

score 27 · Answer 2 · answered Dec 10 '19 at 05:41

27

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>

answered Dec 10 '19 at 05:41

idirsun

474
6
8

1

From what i have experienced you need both – CharybdeBE Nov 17 '20 at 10:18
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. – wondra Jun 15 '22 at 08:35

Winchester · Answer 3 · 2022-02-01T07:58:19.160

13

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.

edited Feb 01 '22 at 07:58

answered Jan 21 '21 at 09:29

Winchester

460
6
19

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. – Emmanuel May 09 '23 at 16:12
What version of Vuetify are you using? If you use Vuetify 3, then the above approach is obsolete. It works with Vuetify 2 only – Winchester May 10 '23 at 19:23

score 10 · Answer 4 · answered Apr 26 '20 at 17:03

10

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

answered Apr 26 '20 at 17:03

Rui Barros

109
1
2

6

This turns off pagination, and the whole item list will display. This does not hide the pagination footer however – Soturi Jul 23 '20 at 18:41

score 6 · Answer 5 · answered Feb 27 '20 at 09:57

6

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

answered Feb 27 '20 at 09:57

idirsun

474
6
8

In addition to posting a screenshot of the documentation add the relevant link as it is easier to find more information that way. – Cray Feb 27 '20 at 10:19
5

Not sure why but this prop has no effect. – Rick Kukiela Apr 13 '20 at 20:59

score -3 · Answer 6 · answered Sep 09 '19 at 19:36

-3

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"

answered Sep 09 '19 at 19:36

Ian

15
6

4

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`). – Shadow Feb 13 '20 at 03:20

Vuetify remove pagination on v-data-table

6 Answers6