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.

CodePudding user response：

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()
  }
}

CodePudding user response：

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
                
                @page-count="pageCount = $event"
              ></v-data-table>
              <div >
                <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>