Vuetify v-data-table fixed-header not working

Question

I using Vuetify v-data-table component, and set fixed-header property, but table header is scrolling together with table body. I using latest Chrome. Can any body tell how to fix that behavior to work correctly?

Answer 1

For me height="100%" did not work, but setting height in pixels also not an option for me, since i want table to consume whole page height, so i ended up with height="100vh". Hope it will be useful for some of you.

<v-data-table
    :headers="headers"
    :items="items"
    disable-pagination
    fixed-header
    hide-default-footer
    dark
    height="100vh">
</v-data-table>

PS: it could be a good idea to put it as comment under accepted answer, but i don't have enough reputation, so sorry guys :)

Answer 2

You need to specify the height attribute. It is even possible to pass in height="100%" and it will work.

<v-data-table
      height="400"
      v-model="selected"
      :headers="headers"
      fixed-header
      :items="desserts"
      item-key="name"
    >
</v-data-table>

https://codepen.io/ellisdod/pen/gOpzBmQ