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?

Solution 1

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

Solution 2

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 :)

Comments

[Kavachaj]

yes, I got it - I forget to set a height of table, thanks!

[Cato Minor]

This works, but I find it troublesome to have to set a specific height, when I want the data table to basically take up the entirety of the screen.

[Karsai Péter]

If you are using a v-simple-table instead of a v-data-table, you should also make sure that you are using th tags in the header instead of regular td tags, otherwise it will not work.

[Purple Lady]

Using Vuetify v2.5.7 and setting height="100%" does not work for me. Setting an explicit height does, however.

[Augustin Riedinger]

@ellisdod can you update your answer,: height="100%" doesn't work :( I tried to change it with your codepen and it really doesn't.