0
529
ViewsVuetify data table - previous/next page is showing on the left side when items-per-page is hidden
I'm trying to completely hide the items-per-page choices from a table while keeping next/previous functionality untouched.
I can hide it by setting this props:
:footer-props="{
'items-per-page-options':[10],
'disable-items-per-page': true,
}"
This
is great but now the previous/next functionality is on the left side of the table footer. I want to keep it on the right.
How can I do that?
1 answers
Answer question0
It's a bug that has already been described in issues #13751 and #13678 of vuetify library. But there's still no "out of the box" solution.
You may fix your issue in several ways:
First way: Add footer.prepend slot into your <v-data-table> component with <v-spacer/> component:
<v-data-table
...
:footer-props="{
'items-per-page-options':[10],
'disable-items-per-page': true,
}"
>
<template #footer.prepend>
<v-spacer/>
</template>
</v-data-table>
Second way: If you don't need to support RTL, you may override one of the built-in CSS classes:
.v-application--is-ltr .v-data-footer__pagination {
margin-left: auto;
}
There's a codepen where you may test both ways before applying it into your project.