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.

[zwiebel_s]

@metalsadman
i’ve tried to use the scrollto method in another use case - i want to scroll to the first row on each page change. unfortunately this doesn’t work like i aspected. Any ideas?

watch: {
'initialPagination.page' () {
      const indexTop = (this.initialPagination.page - 1) * this.initialPagination.rowsPerPage
      this.$refs.table.scrollTo(indexTop)
    }
}

[metalsadman]

@zwiebel_s please make a codepen.

[zwiebel_s]

@metalsadman

i’ve put it in the Codepen for the first problem:

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

[lazaroofarrill]

@zwiebel_s If you have that problem still, here is the codepen

I added the listener @update:pagination='goToTop'

That is the event that triggers on pagination change. I guess that’s what you wanted.