Vuetify remove pagination on v-data-table Vuetify remove pagination on v-data-table vue.js vue.js

Vuetify remove pagination on v-data-table


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


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>


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