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

Question

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'.

Answer 1

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>

Answer 2

<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>

Answer 3

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.