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

user_4966208 0
Viewed 12564

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

I want to change this text:

enter image description here

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

enter image description here

Thanks!

v-data-table vuejs2 vuetify.js vue.js
3 Answers

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

user_81728570

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

<v-data-table
      :footer-props="{itemsPerPageText: 'Rows count'}"
></v-data-table>
user_92752240 
<template v-slot:[`footer.page-text`]="items"> 
  {{ items.pageStart }} - {{ items.pageStop }} de {{ items.itemsLength }}
</template>
user_42236930
Related