Vuetify change text Rows per page text in v-data-table's footer

Question

I'm working with v-data-tables of Vuetify and....

I want to change this text:

I have added this code but it isn't working:

Thanks!

score 21 · Accepted Answer · edited Oct 22 '22 at 07:25

21

You could use 'items-per-page-text':'products per page':

<v-data-table
  :headers="headers"
  :items="desserts"
  :items-per-page="5"
  item-key="name"
  class="elevation-1"
  :footer-props="{
    showFirstLastPage: true,
    firstIcon: 'mdi-arrow-collapse-left',
    lastIcon: 'mdi-arrow-collapse-right',
    prevIcon: 'mdi-minus',
    nextIcon: 'mdi-plus',
    'items-per-page-text':'products per page'
  }"
></v-data-table>

Please check this example

edited Oct 22 '22 at 07:25

Yue JIN

1,047
1
10
20

answered Jun 08 '20 at 10:36

Boussadjra Brahim

82,684
19
144
164

thank you! another word i want to change is: 'of'. do you know how to change it? – Nacho Jun 08 '20 at 11:16
there's a property called `page-text` which has by default `$vuetify.dataFooter.pageText` as value but i don't know how could i change it – Boussadjra Brahim Jun 08 '20 at 13:09
I've been reading about that property... If I achieve It i will tell you – Nacho Jun 08 '20 at 14:31
Thanks, i was trying something like `'page-text':'$vuetify.dataFooter.pageText'.replace('of','de')` but with no success – Boussadjra Brahim Jun 08 '20 at 14:38
7

I got it! i had to add another template using v-slot footer.page-text: '' – Nacho Jun 09 '20 at 06:56

score 8 · Answer 2 · edited Oct 23 '22 at 05:20

8

The correct prop for Vuetify 2.X is items-per-page-text:

<v-data-table
  :footer-props="{itemsPerPageText: 'Rows count'}"
></v-data-table>

edited Oct 23 '22 at 05:20

Yue JIN

1,047
1
10
20

answered Jun 08 '20 at 10:32

Alexander Shkirkov

3,527
3
17
37

Your solution has worked for me perfectly, but I am still having one part without translation. I have two pages and I see "of" when it should be "de" (spanish). What is the property for that topic? – inane May 17 '21 at 17:03
4

@inane in your case it should be `:footer-props="{ pageText: '{0}-{1} de {2}' }` – Alexander Shkirkov May 18 '21 at 02:42

score 6 · Answer 3 · edited Oct 23 '22 at 01:51

6

<template v-slot:[`footer.page-text`]="items"> 
  {{ items.pageStart }} - {{ items.pageStop }} de {{ items.itemsLength }}
</template>

edited Oct 23 '22 at 01:51

Yue JIN

1,047
1
10
20

answered Oct 08 '21 at 21:26

Edilson Vieira

61
1
5

What’s the benefit of this approach over the approaches established by the existing answers? – Jeremy Caney Oct 10 '21 at 00:46

score 1 · Answer 4 · edited Oct 22 '22 at 07:17

The best way I've ever found is language localization in the Vuetify configuration.

import en from "vuetify/lib/locale/en";
    
export default new Vuetify({
  theme: {
    themes: {
      options: {/*...*/},
      light: {/*...*/},
      dark: {/*...*/},
    },
  },
  lang: {
    locales: { en },
      current: "en",
  },
});

The above configuration causes all the Vuetify components (v-data-table) to be language localized.

score 0 · Answer 5 · answered Jul 20 '23 at 00:56

0

Very simple, at least in version 3.3.9:

<VDataTable :pageText="'{0}-{1} de {2}'" />

answered Jul 20 '23 at 00:56

paulodrjr

41
4

Vuetify change text Rows per page text in v-data-table's footer

5 Answers5