How I can hide row 'no-data' in datatable Vuetify

user_10384477 0
Viewed 18710

I'm beginner in vue and vuetify. I'm trying to make the first application on vue and vuetify. I'd like customize data table in vuetify. It has row 'no-data' default (with text 'No data available'). I want hide this row, but data table has no option such as 'hide-no-data'.

vuetify.js
5 Answers

You can override the no-data slot. Here is how it looks in the documentation:

</v-data-table>    
 <template slot="no-data">
   <v-alert :value="true" color="error" icon="warning">
     Sorry, nothing to display here :(
   </v-alert>
 </template>
</v-data-table>

All you would have to do is replace the v-alert with an empty div

<template slot="no-data">
  <div></div>
</template>
user_5899990

enter image description here

<v-data-table>
    <template v-slot:no-data>
      <v-alert :value="true" color="error" icon="warning">
        Sorry, nothing to display here :(
      </v-alert>
    </template>
<v-data-table>
user_79743240

A bit late but it might still help someone..

You can use an empty row and hide it by setting visibility to hidden:

<v-data-table ref="myTable">
    <template slot="no-data">
        <tr style="visibility: hidden;" />
    </template>
    ....
</v-data-table>

Or if you want the entire content gone you can remove it manually by code:

$refs.myTable.$el.getElementsByTagName('tbody')[0].innerHTML = '';

Where myTable refers to the v-data-table.

user_15723300

You can hide the 'no-data' row via CSS

<style scoped>
    ::v-deep .v-data-table__empty-wrapper {
        display: none;
    }
</style>
user_123317040

The solution that came to my mind was to go straight to the vDataTable component and change the message path to the vuetify component. enter image description here

user_125679660
Related