2

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

Dedey
  • 247
  • 1
  • 8

1 Answers1

0

I finally used refs to access in my methods the DOM and modify it from the code. It works but it's garbage code...

Dedey
  • 247
  • 1
  • 8