Menu
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
859
to disable pagination on v-data-table use disable-pagination prop In addition to posting a screenshot of the documentation add the relevant link as it is easier to find more information that way. Not sure why but this prop has no effect.
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> Likewise just disable-pagination is not enough, it will bug out the footer which is still interactible but doesnt do anything.
Vuetify is a popular UI framework for Vue apps. In this article, we’ll look at how to work with the Vuetify framework. We can customize the default header with the header.<name> slot. <name> is the name of the value property in the header item sent to headers . For example, we can write:
Vuetify is a popular UI framework for Vue apps.. “Vuetify — Table Slots and Pagination” is published by John Au-Yeung in Dev Genius.
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
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
