First row not visible in QTable with virtual scroll and sticky header if scrollbar is visible



  • I’m using QTable with virtual scroll and sticky header. If the number of rows is to high for the initial viewport a scrollbar is shown and the first row is hidden by the sticky header.

    QTable_virtual_scroll.png

    <q-table
      :columns="columns"
      :data="tableData"
      :filter="filter"
      :pagination.sync="pagination"
      :selected.sync="selected"
      :selected-rows-label="getSelectedRowsLabel"
      :rows-per-page-options="[0]"
      @update:selected="changeSelected"
      @row-click="onRowClick"
      row-key="id"
      selection="single"
      table-style="max-height: 295px"
      table-header-class="text-primary"
      class="display-chronology-table"
      virtual-scroll
      binary-state-sort
      dense
    >
    
    ...
    
    <style lang="sass">
      .display-chronology-table
        /* max height is important */
        .q-table__middle
          max-height: 200px
    
        .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:first-child th
          position: sticky
          top: 0
          opacity: 1
          z-index: 1
    </style>
    

    I’ve tried different combinations and values for parmas like virtual-scroll-sticky-start and virtual-scroll-sticky-end and usage of resetVirtualScroll() but no result.



  • Problem was solved with upgrade to quasar v1.5.0


Log in to reply