Sticky headers in the table2

Support
1

Stefan Münger:
Is there any way to have ‘sticky’ headers in the table2 component so that only the table body is scrollable?

Andrew Dam:
After some investigating, it’s definitely possible. vue-tables-2 seems to have some features locked behind a newer version or a premium paywall, so we’ll have to look at other solutions

This could easily be done by using a HTML v-for loop, but you may not want to redo your entire table for this, so I think CSS is our best bet.

In fact, I utilized ChatGPT to generate the CSS needed to make this work and tested it myself, you could give it a try:

.table-responsive {
    height: 400px;
    overflow: auto;
    position: relative;
  }
  table {
    overflow: auto !important;
  }
  thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
  }
  tbody {
    z-index: 0;
  }