Vuetify: How to remove this specific prop content from the data table component?

1
votes

In Vuetify, when I use the data-table component, by default I get a bunch of information displayed through the props, I succeeded to get rid of them (such as the previous and next icons), howver I can not get rid of the text below the 2 rows displayed here:

enter image description here

(I mean that 1-2 of 2 text)

Here is the code (Codepen live demo):

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      v-model="selected"
      item-key="name"
      select-all
      class="elevation-1"
      rows-per-page-items=2
      prev-icon=false
      next-icon=false
    >
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>
        <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>      
      </template>
    </v-data-table>
  </v-app>
</div>
2
javascriptvuetify.js

2 Answers

0
votes

I found the answer, I had to add this:

<template slot="pageText" slot-scope="props">
</template>

I mean if you add any text between <template> tags it will appear below the table. In my case I did not put any text, so nothing is displayed. Hope this helps someone else in the future.

0
votes

I just found even a better and cleaner answer:

Just add hide-actions prop as follows:

<v-data-table
  hide-actions
>
 <!-- Rest of components -->
</v-data-table>