Vuetify data table add horizontal stroller bar

Question

My vuetify v-data-table has many columns. Right now it automatically compact to the screen size. Instead of that what I want is add horizontal scroll bar to my v-data-tale. That was there before in version 1.5 But in the version 2 it is not there.

Answer 1

You can set the width of the columns in the headers like in the code pen. With this you can force the scroll bars, see added codepen

codepen

 data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
          width: "500px"
        },
        { text: 'Calories', value: 'calories', width: "500px" },
        { text: 'Fat (g)', value: 'fat', width: "500px" },
        { text: 'Carbs (g)', value: 'carbs', width: "500px"  },
        { text: 'Protein (g)', value: 'protein', width: "500px" },
        { text: 'Iron (%)', value: 'iron', width: "500px" },
      ],