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" >
                <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: "日本語",
                    },
                ],
            },
        })

enter image description here

CodePudding user response：

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.