Change the default width of a VuetifyJS DataTable cell
You can add another empty header and set width of every column to min value(1%), except empty to make it fill all free space. Also you need to add empty td to table body template to make grey row dividers visible.
See codepen: https://codepen.io/anon/pen/WKXwOR
You can set width with header like below
headers: [ { text: 'Dessert (100g serving)', value: 'name', width: '20%'}, { text: 'Calories', value: 'calories', width: '50%' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs', width: '200px' },],
Just add (width,align) in your header
<v-data-table :headers="headers" :items="desserts" class="elevation-1" > </v-data-table>header looks like
header:[ { text: 'Dessert ', align: 'center',<------------to align left/center/right/ value: 'name', width: "1%"//<-------------------asign width/ }, ]Vuetify header options:
{ text: string value: string align: 'left' | 'center' | 'right' sortable: boolean class: string[] | string width: string}