CODEWITHSUNDEEP
vue.jsvuetify.js
Reimond
Reimond

Reputation: 121

How can I make sticky header in Vuetify table?

I want to make sticky header, I've tried "fixed:true" it doesn't work. When I scrolling table, action column's header isn't fixed, I've marked it on screenshot.

This is my table tag :

 <v-data-table
    :headers="headers"
    :items="rooms"
    sort-by="calories"
    class="elevation-1"
    fix-header
  >

and this is my headers data: headers: [{ text: "test", value: "action",fixed:true}, { text: "test1", value: "action"}]

enter image description here enter image description here

Upvotes: 2

Views: 6323

Answers (2)

loomchild
loomchild

Reputation: 778

The fixed-header property only works if table height is defined.

I wrote a little article explaining my solution to this problem using position: sticky: https://medium.com/@jareklipski/sticky-table-header-in-vuetify-js-fab39988dc3

The overall idea is to set the position to sticky and top value to 0 (or height of your fixed site header). Only one obstacle is that Vuetify.js data table has overflow, which can be addressed by /deep/ selector:

    .v-data-table /deep/ .v-data-table__wrapper {
        overflow: unset;
    }

Here's a complete working example: https://codesandbox.io/s/sticky-vuetify-table-header-3o0km

Upvotes: 5

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3167

Try using position: fixed as shown below:

.v-data-table .v-data-table__wrapper table thead tr {
      position: fixed;
}

Upvotes: 0

Related Questions