Vuetify.js data-table fixed-header scrolling via CSS

Question

The Vuetify's v-data-table component has a fixed-header feature, which makes the header sticky when the height is less than the table height.

It is working when the height is set explicitly.

HTML:

    <v-content id="mycontent">
      <v-container fluid id="mycontainer">
        <h2>Header</h2>
        <div id="outer">
          <v-data-table id="mytable" :headers="headers" :items="items" :height="height"
                        fixed-header disable-pagination disable-sort hide-default-footer>
          </v-data-table>
        </div>
      </v-container>
    </v-content>

CSS:

#mycontent {
}
#mycontainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#outer {
  flex: 1;
}
#mytable {
}
#mytable table {
  width: auto;
}

JS:

  data: () => ({
    headers: [
      { text: "Header A", value: "a" },
      { text: "Header B, longer", value: "b" },
      { text: "Header C", value: "c" }
    ],
    height: 100
  }),
  computed: {
    items() {
      var items = [];
      for (var i = 1; i <= 50; i++) {
        items.push({ a: "Row " + i, b: "Column B", c: "Column C" });
      }
      return items;
    }
  },
  methods: {
    onResize() {
      this.height = document.getElementById("outer").clientHeight;
    }
  },
  mounted() {
    window.addEventListener("resize", this.onResize);
    this.$nextTick(this.onResize);
  }

Live demo

But is it possible to achieve the same effect with pure CSS, or at least without setting height explicitly?

Sumit Patel · Accepted Answer · 2020-09-18 09:10:15Z

5

Try using height clac

.v-data-table__wrapper{height:calc(100vh - 150px) !important;}

edited Sep 18, 2020 at 9:10

answered Aug 29, 2019 at 10:15

Sumit Patel

4,6481 gold badge13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rustyx Over a year ago

Thanks but I don't want to hardcode the 150px part.

Sumit Patel Over a year ago

Those 150px is the your header and footer size. so based on screen size your table will different.

rustyx Over a year ago

In my case the header size is dynamic, so no couldn't use this.

loomchild · Accepted Answer · 2024-02-09 19:05:33Z

3

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 <th> 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://github.com/loomchild/sticky-vuetify-table-header

edited Feb 9, 2024 at 19:05

answered Jun 7, 2020 at 11:12

loomchild

7881 gold badge9 silver badges17 bronze badges

4 Comments

vintprox Over a year ago

Oh, that's right! Special highlight is that you have to unset both overflow-x and overflow-y (for what overflow is shortcut), not just overflow-y.

Fred Over a year ago

The /deep/ directive is depreciated and not respected anymore on modern browsers. Hence, the solution fails.

loomchild Over a year ago

As far as I know, in this particular case /deep/ selector is compiled by Vue and not exposed to the browser (vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors). Could you confirm that the solution doesn't work for you (the demo can be found here: 3o0km.sse.codesandbox.io, it works correctly for me on latest FF and Chrome).

rustyx Over a year ago

The working example doesn't work anymore.

Edgarasne · Accepted Answer · 2020-04-14 06:24:38Z

0

If you don't want your table to always take fixed size in a page you should set max-height and remove height attribute from v-data-table.

#mytable .v-data-table__wrapper {
  max-height: 300px;
}

edited Apr 14, 2020 at 6:24

answered Apr 14, 2020 at 6:11

Edgarasne

1392 bronze badges

Collectives™ on Stack Overflow

Vuetify.js data-table fixed-header scrolling via CSS

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related