const headers = [{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{
text: 'Calories',
value: 'calories'
},
{
text: 'Fat (g)',
value: 'fat'
},
{
text: 'Carbs (g)',
value: 'carbs'
},
{
text: 'Protein (g)',
value: 'protein'
},
{
text: 'Iron (%)',
value: 'iron'
},
]
const desserts = [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: 1,
},
]
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
headers, desserts, noScroll: false,
},
})
.no-scroll .v-data-table__wrapper{
overflow-x: hidden;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1979e9f85b1c7df89">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c5c6d6c7dad5caf3819dcb">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<div>
<v-switch v-model="noScroll" label="disable scroll"/>
</div>
<div :class="{'no-scroll': noScroll}" style="width: 300px;">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
mobile-breakpoint="0"
class="elevation-1"
></v-data-table>
</div>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8a8999bcced284">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cabcbfafbea3acb38af8e4b2">[email protected]</a>/dist/vuetify.js"></script>