q-table height, virtual scroll and sticky headers

[amoss]

Hi

I read the docs and tried to do everything together but it looks like I’m missing something.

<q-table
   class="my-sticky-virtscroll-table"
   separator="cell"
   :data="data"
   :columns="columns"
   no-data-label="No data to show"
   virtual-scroll
   :pagination.sync="pagination"
   :rows-per-page-options="[0]"     
   :virtual-scroll-sticky-size-start="48"     
   hide-bottom/>
</q-table>

<style lang="sass">
.my-sticky-virtscroll-table
  /* height or max-height is important */
  height: 100px

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th /* bg color is important for th; just specify one */
    background-color: #fff

  thead tr th
    position: sticky
    z-index: 1
  /* this will be the loading indicator */
  thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
  thead tr:first-child th
    top: 0
</style>

data () {
  return {
    pagination: {
      rowsPerPage: 0
    },

What I want:
A table with height down to the bottom of the page (100%?) and if there are more rows than it can show, I should see a scrollbar and the scroll should be virtual.

The problems are:

1. I tried height: 100px to see if it has any effect. It’s not, the height is always as the number of rows (a lot) much down from where the page ends. I tried 100%, 300px etc… nothing changed that.
2. The headers are not sticky (using firefox 72/73 and Chrome 78).
3. The scroll works down to a certain point and then the data part of the grid becomes “blurry” with no data inside. It keeps scrolling down to the height as the number of rows but no data is shown below a certain row.

What am I missing? Thanks
(using quasar 1.8.5)

[amoss]

If I do

<q-table
        class="tableCss"

and

.tableCss {
    height: 80vh
  }

then the size of the grid is as expected and virtual scroll works as expected. The sticky headers doesn’t work, obviously.

I found a codepen for sticky headers and it says

thead tr:first-child th { 
  position: sticky; 
  top: 0; 
  background: cadetblue; 
  z-index: 1000
}

From what I gather, it seems that those css “commands” are not affecting the table in any way (even the color of the header is not changed), only the one that I put directly in class property of q-table or in headerStyle of the column.

[amoss]

This post is deleted!

[amoss]

If something is working in codepen but does not work in vscode/my project, what can I check? I’m confused

[amoss]

OK, after changing class to table-class (in qtable) in my project, sticky headers are working.