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!

Elizabetelizabeth

Answer 1

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

Utimer

thank you! another word i want to change is: 'of'. do you know how to change it? – Elizabetelizabeth

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 – Utimer

I've been reading about that property... If I achieve It i will tell you – Elizabetelizabeth

Thanks, i was trying something like 'page-text':'$vuetify.dataFooter.pageText'.replace('of','de') but with no success – Utimer

I got it! i had to add another template using v-slot footer.page-text: '<template v-slot:footer.page-text="items"> {{ items.pageStart }} - {{ items.pageStop }} de {{ items.itemsLength }} </template>' – Elizabetelizabeth

Answer 2

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

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

Fogdog

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? – Nautch

@Nautch in your case it should be :footer-props="{ pageText: '{0}-{1} de {2}' } – Fogdog

Answer 3

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

Gabble

What’s the benefit of this approach over the approaches established by the existing answers? – Inimitable

Answer 4

Very simple, at least in version 3.3.9:

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

Pyroxylin

Answer 5

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.

Virga

Answer 6

To change the "{start}-{end} of {total}, here's what I did: (the others solution didn't work)

<template>
    <v-data-table
        v-model:page="page"
        v-model:items-per-page="itemsPerPage"
        :items-per-page-text="$t('table.itemsPerPage')"
        :page-text="pageText"
></v-data-table>
</template>

<script>
    // Inside component definition
    data() {
        return {
            items: [], // Array to show in the table
            page: 1,
            itemsPerPage: 5,
        }
    },
    computed: {
        pageText(): string {
            const total = this.items.length
            const startInterval = (this.page - 1)*this.itemsPerPage+1
            const endInterval = Math.min(this.page*this.itemsPerPage, total)
            const interval = `${startInterval}-${endInterval}`
            return this.$t('table.pageText', {interval: interval, total:total})
        }
    },
</script>

And in my translation files, I have

en.json

{
    "table": {
        "itemsPerPage": "Items per page",
        "pageText": "{interval} of {total}"
    }
}

fr.json

{
    "table": {
        "itemsPerPage": "Items par page",
        "pageText": "{interval} de {total}"
    }
}

Wearproof

Answer 7

It's very simple in version 3.5.6:

<v-data-table
  items-per-page-text="products per page"
/>

Bryozoan

Answer 8

The uniqui way that works to me:

<v-data-table-server
      v-model:items-per-page="itemsPerPage"        // quantity of items
      :items-per-page-options="[10, 25, 50, 100]"  // options to select
      :items-per-page-text="'Itens por página'"    // translate text
      :pageText="'{0}-{1} de {2}'"                 // translate quantity
      :headers="headers"
      :items-length="totalItems"
      :items="items.results"
      :loading="isLoading"
      :search="search"
      item-value="name"
      @update:options="loadItems"
    > </v-data-table-server>

Violetteviolin

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Washout