I use v-data-table of vuetify and my problem is that the pagination buttons and the checkboxes are not visible, I can push them but I can not see them.I use Microsoft Edge 101.0.1210.39
This is the template tag of vue component, the table is <v-app id="inspire">
EDIT:I solved it,It was because I did not add vuetify’s icon fonts
<div class="leftDiv">
<div class="custom-select" style="width:200px;">
<select v-model="mcompetitor">
<option v-for="comp in competitors" :value="comp.key">{{comp.name}}</option>
</select> <button v-on:click="mycomp()">Load Categories</button>
</div>
<div class="custom-select" style="width:200px;">
<select v-model="mcat">
<option v-for="cat in categories" :value="cat.key">{{cat.name}}</option>
</select> <button v-on:click="mycat">Load Products</button>
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="mproduct"
calculate-widths
item-key="id"
show-select
class="elevation-1"
>
</v-data-table>
</v-app>
<!-- <div id="products">
<div v-for="pr in mproduct">{{pr.name}}
<input type="checkbox" id="pr.id" :value="pr.id" v-model="checkedProducts"/>
</div>
</div>-->
</div>
</div>
<div class="rightDiv">
<div class="custom-select" style="width:200px;">
<select v-model="clCats">
<option v-for="cat in clientCats" :value="cat.name">{{cat.name}}</option>
</select>
<button v-on:click="myclient">select</button>
</div>
<div id="clientcats">
<div v-for="(pr,index) in checkedCats">{{pr.name}}
<input type="checkbox" :value="pr.name" v-model="checkedClientCats"/>
<button @click="myclientremove(index)">-</button>
</div>
<div>
<button @click="msend">Save</button>
</div>
</div>
</div>
</div>
and the css
.leftDiv {
background-color: #efefef;
color: #000;
height: 800px;
width: 52%;
float: left;
}
.rightDiv {
background-color: #efefef;
color: #000;
height: 800px;
width: 40%;
float: right;
}