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

vue.js vuejs2 vuetify.js v-data-table
Nacho picture Nacho · Jun 8, 2020 · Viewed 9.4k times · Source

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!

Answer

Boussadjra Brahim picture Boussadjra Brahim · Jun 8, 2020

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

Related questions

Vuetify v-data-table align center only one column

i have: <v-data-table :headers="headers" :items="tableData" :items-per-page="5" class="elevation-1"> <template v-slot:item.id="{ item }"> {{item.id}} </template> How can I align the content of that column vertically center?

Read More
Vuetify: Show pagination controls at the top of my v-data-table as well as in the footer

The v-data-table has a top slot, with a pagination prop whose structure matches that of the footer slot. Is it possible to assign the top slot to reference the same (presumably a v-pagination) control that the footer is using? My …

Read More
How to use Vuetify tabs with vue-router

I have the following jsfiddle that has two Vuetify tabs. The documentation doesn't show examples on using vue-router with them. I found this Medium.com post on how to use Vuetify with vue-router, which has the following code: <div …

Read More