vue.jsvuejs2vue-componentvuetify.jsv-data-table

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

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!

Solution

  • 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