CODEWITHSUNDEEP
vue.jsvuetify.js
Otorrinolaringologista -man
Otorrinolaringologista -man

Reputation: 1137

Vuetify editing v-data-table

Good day. i am trying to edit my v-data-table to suit my personal needs of rows and language. I managed to edit a few fields but i can't find a way to edit the "of" from "1-50 of 300".

I am reading the documentation but i got no idea on how to change that.

v-data-table

Here my current v-data-table documentation:

   <v-data-table
    :headers="headers"
    :items="myItems"
    :search="search"
    no-results-text='LMAO NO DATA'
    rows-per-page-text='Data'
    :rows-per-page-items="[5, 50, 100, {text:'EVERYTHING', value: -1}] "
    class="elevation-3"
   >

EDIT: Sejir Ben Ali's answer is right but if you are having eslint errors showing up try using this:

<template v-slot:[`footer.page-text`]="props">
      itens {{ props.pageStart }} - {{ props.pageStop }} of {{ props.itemsLength }}
</template>

Upvotes: 0

Views: 9029

Answers (1)

Sejir Ben Ali
Sejir Ben Ali

Reputation: 210

From the docs (Slot: pageText - https://vuetifyjs.com/en/components/data-tables#slot-pagetext):

You can customize the page text displaying the range and total items by using the pageText slot.

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:items="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
    <template v-slot:pageText="props">
      ITEMS {{ props.pageStart }} - {{ props.pageStop }} OF {{ props.itemsLength }} // Edit this
      // ^this is what you need
    </template>
  </v-data-table>
</template>

Upvotes: 6

Related Questions