If you look at this simple example for Vuetify 2 with (Vue 2) on Codepen and toggle the mobile view in F12 Dev Tools, you'll notice that it auto switches the v-data-table to a nice vertically listed, card style list of the data items:
https://codepen.io/michael-vascue/pen/KKWaKZo
`<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</v-app>
</div>`
In Vuetify 3 this behaviour seems to have been removed, or at least, no matter what I try I can't get it to work. Again toggle F12, but this time you'll see the (already somewhat ugly in desktop mode) v-data-table, looks a complete mess, with all the data items still listed across the page, just more squashed together. See my example on Codesandbox:
https://codesandbox.io/s/vigilant-elbakyan-84nf4w?file=/src/App.vue
What's going on here? Is it still in development, deprecated, buggy???
tia.
I've tried various different combinations of header attributes, leaving some things out to simplify the setup, as well as reducing the data and Vue 3 App to it's simplest form. The Codesandbox example is just about as simple as it gets tbh. All to no avail.
"Yes, the mobile view of VDataTable is currently not available in v3. There is an open feature request (see below), which also proposes some workarounds"
https://github.com/vuetifyjs/vuetify/issues/16784
Thanks to @Moritz Ringler (comments section).
This Codesandbox demo uses one of the hacks from the comments section on the Github page above:
(https://codesandbox.io/s/vigilant-elbakyan-84nf4w?file=/src/assets/main.css&resolutionWidth=320&resolutionHeight=675)