Can I achieve full width of table on mobile screens using Vuetify

Question

Can I achieve table "shrinking" on small screens using Vue2 and Vuetify?

I have a task where the table needs to remain full width on mobile screens and can be enlarged. Basically implement img -like behavior.

I basically need to implement a second screen from this image, but using v-data-table .

Although "they are both equally bad", I need the second solution.

Does Vuetify have a dedicated solution?

Answer 1

In vuetify you can use v-data-table and use prop mobile-breakpoint="0"

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