vue.jsvuetify.jsv-data-table

Use regular v-data-table layout in mobile version

I've created a v-data-table, the behavior that is expected is not to put all the headers for every row of the table, (by default vuetify render as I said) I show the actual behavior:

this is how vuetify show the v-data-table by default

What I need is to show the v-data-table headers as it does in normal size, one row for headers and the rest for items of the v-data-table. Any approach?

Solution

  • This is Vuetify 2, right? Have a look at the :mobile-breakpoint property, set it to 0 to disable mobile display:

    <v-data-table
  :mobile-breakpoint="0"
  ...
/>