'Vuetify remove pagination on v-data-table

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

vue.jspaginationvuetify.js


Solution 1:[1]

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>

Solution 2:[2]

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

Solution 3:[3]

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.

Solution 4:[4]

to disable pagination on v-data-table use disable-pagination propenter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 idirsun
Solution 2 Rui Barros
Solution 3
Solution 4 idirsun

Related Questions