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!

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

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>

Answer 3

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