When a DataTable is displayed on a smartphone screen in portrait orientation, the original rows are separated and the appearance is not ideal. The same is ideal when the smartphone is displayed in landscape mode.
I need help with one of the following two solutions ・Maintain the default look and feel in portrait mode. ・Fix the landscape screen.
The environment is using vue.js, no single page components or vuerouter.
<v-main id="main" class="blue-grey lighten-4">
<v-container fluid fill-height>
<v-card>
<v-card-title>
DELE - A1
<v-spacer></v-spacer>
<v-text-field v-model="search" append-icon="mdi-magnify" label="Búsqueda" single-line
hide-details multi-sort show-select dense></v-text-field>
</v-card-title>
<v-data-table :headers="headers" :items="desserts" :search="search"></v-data-table>
</v-card>
</v-container>
</v-main>
let vue = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
search: '',
headers: [
{ text: 'Español', value: 'spanish', },
{ text: 'Japonés', value: 'japanese' },
],
desserts: [
{
spanish: "Español",
japanese: "スペイン語",
},
{
spanish: "Japonés",
japanese: "日本語",
},
],
},
})
Yes, you can. Just disable the switch between regular table and mobile view using mobile-breakpoint
prop.
Default value is 600, but you can change it to 0:
<v-data-table
:headers="headers"
:items="desserts"
:mobile-breakpoint="0"
></v-data-table>
Test this at CodePen.