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