Vuetify v-data-table fixed-header not working

user_4832189 0
Viewed 19355

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?

vuejs2 vuetify.js vue.js css html
3 Answers

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

user_62826040

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

user_91292200

I found a solution if you don't want a fixed height and expect your table to take all the space available.

Just use flexbox with flex-grow: 1; overflow: hidden; on the container, and set a class to the table itself with display: flex; flex-grow: 1;

Here is the codepen demo : https://codepen.io/esquilax76/pen/gOoGyPb

Hope it helps !

user_186297280
Related