How to change `Items per page` text in vuetify? - vue.js

Question

I am trying to translate the text of items per page in a v-data-table. I have translated successfully rows per page text but I am not able to change items per page text. I have tried this:
<v-data-table
:items-per-page="itemsPerPage"
:footer-props="{'items-per-page-text': this.$i18n.t('rowsPerPage'), 'page-text': this.$i18n.t('itemsPerPage')}"
:headers="headers"
:items="items"
>
Data:
itemsPerPage: 10,
But any of them worked.

Answer 1

You can use external pagination to change text.
<template>
<div>
<v-data-table
:headers="headers"
:items="desserts"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
#page-count="pageCount = $event"
></v-data-table>
<div class="text-center pt-2">
<v-pagination
v-model="page"
:length="pageCount"
></v-pagination>
<div class='d-flex align-center'>
<!-- you can write your text here according to your requirements -->
<span>Items per page </span>
<v-select
v-model="itemsPerPage"
:items="perPageValues"
></v-select>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
page: 1,
pageCount: 0,
itemsPerPage: 5,
perPageValues:[5, 10, 15, 20],
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
}
],
}
},
}
</script>

Answer 2

You can use localeText object inside gridOptions object to translate ag-grid related in-built texts.
Official documentation : vue-data-grid localization
gridOptions: {
localeText: {
rowsPerPage: I18n.t('rowsPerPage').toString()
}
}