[Vuejs]-How to disable horizontal scrolling in Vuetify DataTable?

by

1👍

The scroll is set on the v-data-table__wrapper CSS class, so you can disable it there:

.v-data-table .v-data-table__wrapper{
    overflow-x: hidden;
}

In the snippet, you can switch it on and off using this class:

const headers = [{
    text: 'Dessert (100g serving)',
    align: 'start',
    sortable: false,
    value: 'name',
  },
  {
    text: 'Calories',
    value: 'calories'
  },
  {
    text: 'Fat (g)',
    value: 'fat'
  },
  {
    text: 'Carbs (g)',
    value: 'carbs'
  },
  {
    text: 'Protein (g)',
    value: 'protein'
  },
  {
    text: 'Iron (%)',
    value: 'iron'
  },
]

const desserts = [{
    name: 'Frozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    iron: 1,
  },
]

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    headers, desserts, noScroll: false,
  },
})
.no-scroll .v-data-table__wrapper{
    overflow-x: hidden;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <div>
          <v-switch v-model="noScroll" label="disable scroll"/>
        </div>
        <div :class="{'no-scroll': noScroll}" style="width: 300px;">
          <v-data-table
            :headers="headers"
            :items="desserts"
            :items-per-page="5"
            mobile-breakpoint="0"
            class="elevation-1"
          ></v-data-table>
        </div>
        
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
👤Moritz Ringler

Leave a comment