Vuetify data table - previous/next page is showing on the left side when items-per-page is hidden

user_2607447 0
Viewed 906

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,
            }"

Thisenter image description here 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?

vuetify.js vue.js css html javascript
1 Answers

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.

user_92752240
Related