[Vuejs]-Vuetify editing v-data-table

by

6👍

✅

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>
👤Sejir Ben Ali

Leave a comment