Scrolling inside a q-table

[zwiebel_s]

Hello all,

I have a Quasar layout with a q-table that resizes as the window expands. The table also has a fixed table header. My requirement is that you can scroll the table using the 3 sticky buttons (I am not sure if it is right to work with “q-page-sticky” elements.). The scroll-to-top button should only be visible when the user scrolls in the table.

Here a codepen:
https://codepen.io/tbr2021/pen/xxEaaRY

I tried out methods like:

scrollUp () {
  var table = document.getElementsByClassName('test')
  table.scrollTop = 500
},

or with a ref

scrollTop () {
  this.$nextTick(function () {
    this.$refs.testDiv.scrollTop = 0
  })
},

but both didn’t work.

Maybe someone can help me out with this…

[Hawkeye64]

@zwiebel_s Are you more or less thinking about something like this? https://quasar.dev/layout/page-scroller#Example--Basic

[zwiebel_s]

@Hawkeye64 yes but the scrolling in my example is in the q-table and not on the page

[metalsadman]

@zwiebel_s qtable has a scrollTo(rowindex) method.