Following is executable code to demonstrate my problem.
Template:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
hide-default-header
hide-default-footer
></v-data-table>
</v-app>
</div>
Script:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
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' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
This is the result: wide-screen
Looks all right with larger screens. But when I do have smaller screens, it starts to look like this:
Question: how do I hide the empty parts of the table at smaller screens(/when everything just becomes one column).
CodePudding user response：
You can assign prop value in
v-data-tablemobile-breakpoint="0", so now you can add your custom functionality on your desired screen size. On windows resize I'm calling the functiononResizeto calculate the width of the current window, and assign value to theisMobilevariable to true if the window width is less than 769 (you can change this value), now we will add<template v-slot:item="{ item }">in thev-data-tableto use our custom design as shown on demo. Different designs on the base ofisMobilevalue.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
isMobile: false,
windowSize: {
x: 0,
y: 0,
},
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' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
carbs: 65,
protein: 7,
iron: '6%',
},
],
}),
mounted() {
this.onResize();
},
methods: {
onResize() {
this.windowSize = { x: window.innerWidth, y: window.innerHeight };
if (this.windowSize.x < 769) {
this.isMobile = true;
} else{
this.isMobile = false;
}
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<div v-resize="onResize" >
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
hide-default-header
hide-default-footer
mobile-breakpoint="0"
>
<template v-slot:item="{ item }">
<tr v-if="isMobile == false">
<td>{{ item.name }} not mobile view</td>
<td >{{ item.calories }}</td>
<td >{{item.fat }}</td>
<td >{{ item.carbs }}</td>
<td >{{ item.protein }}</td>
<td >{{ item.iron }}</td>
</tr>
<tr v-else>
<td>
<v-list-item-group>
<v-list-item v-if="item.name != undefined">
<v-list-item-content>
<v-list-item-title v-text="item.name "></v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="item.calories != undefined">
<v-list-item-content>
<v-list-item-title v-text="item.calories "></v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="item.fat != undefined">
<v-list-item-content>
<v-list-item-title v-text="item.fat "></v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="item.carbs != undefined">
<v-list-item-content>
<v-list-item-title v-text="item.carbs "></v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="item.protein != undefined">
<v-list-item-content>
<v-list-item-title v-text="item.protein "></v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="item.iron != undefined">
<v-list-item-content>
<v-list-item-title v-text="item.iron "></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</td>
</tr>
</template>
</v-data-table>
</div>
</v-app>
</div>