vuetify data table mobile view

0
votes

i need a solution to style vuetify's data table in mobile vue to add some margin between rows to look like the image below

enter image description here

and this is how it looks like per default on vuetify

enter image description here

this is codepen link for the vuetify example

 <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>

https://codepen.io/ThugMa/pen/BaWpBbj?editors=1010

1
cssvue.jsvuetify.js

1 Answers

1
votes

Not sure if it is the way to do it but twisting the css can do what you want.

https://codepen.io/michael-vascue/pen/KKWaKZo

.v-data-table>.v-data-table__wrapper .v-data-table__mobile-table-row {
  margin: 10px; // add margin between each row
  border: 1px solid #ededed; // add border color
  display: block; // display table row as block
}