I'm wondering if there is a way to hide a whole row/item in a vuetify data-table. I've read threads about hiding columns but not data-table items.

CodePudding user response：

I think passing an empty array to your :items would fix your problem. or you can do this one :items="defaultVales || desserts".

CodePudding user response：

In my opinion, the best way to handle this is to add a show property to your objects and use a computed property to hide and show items

Working example

Here it will hide column on click

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed:{
    showItems(){
      return this.desserts.filter(x => x.show)
    }
  },
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Score', value: 'score' },
      ],
      desserts: [{
          name: "Frozen",
          score: 66,
          show: true,
        },
        {
          name: "Tom",
          score: 100,
          show: true,
        },
        {
          name: "Eclair",
          score: 100,
          show: true,
        },
        {
          name: "Frozen",
          score: 89,
          show: true,
        },
      ]
    }
  },
  
  methods: {
    hideColumn(col){
      col.show = false
    }
  }
})

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js'></script>

<div id="app">
  <v-data-table
    :items="showItems"
    :headers="headers"
    @click:row="hideColumn"
  >
  
  </v-data-table>
</div>

CodePudding user response：

As per my understanding, You want to hide the specific rows from the <v-data-table>. If Yes, you can achieve that by using v-slot and manipulate the template.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert',
          value: 'name'
        }
      ],
      items: [
        {
          name: 'Frozen Yogurt',
          show: true
        },
        {
          name: 'Ice cream sandwich',
          show: false
        },
        {
          name: 'Eclair',
          show: true
        },
        {
          name: 'Cupcake',
          show: false
        }
      ]
    }
  },
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="items"
      
    >
      <template v-slot:item="props">
    <template v-if="props.item.show">
      <tr>{{ props.item.name }}</tr>
    </template>
</template>
    </v-data-table>
  </v-app>
</div>