I have the same problem but with Vuejs2 : Vuetify v1.5 data table, how to determine column widths when the header is hidden
Here is what I have:
<v-data-table
:headers="headers"
:items="items"
item-key="id"
hide-default-footer
disable-pagination
:hide-default-header="false"
>
For the headers:
headers: [
{ text: 'a', value: 'a', width: "4%" },
{ text: 'b', value: 'b', width: "4%" },
{ text: 'c', value: 'c', width: "7%" },
{ text: 'd', value: 'd', width: "10%" },
{ text: 'e', value: 'e', width: "8%" },
{ text: 'f', value: 'f', width: "13%" },
{ text: 'g', value: 'g', width: "10%" },
{ text: 'h', value: 'h', width: "13%" },
{ text: 'i', value: 'i', width: "31%" }
]
The sum of widths is 100% so no weird behavior should be expected.
When I set :hide-default-header="true" all the columns change the width.
How can I force the width of the column ??
I finally used refs to access in my methods the DOM and modify it from the code. It works but it's garbage code...