How to programmatically scrollTo a row in a QTable



  • Hi,

    After adding an item to a table I want to jump to that row.
    I have tried to use the scrollTo method, like described in the QTableAPI, but I don’t get it working.

    I think it should work when you there is a table with a ref in the template like this:

    <q-table ref="table">
    

    Jumping to row 9 of a table from a script method must be done by this:

    this.$refs.table.scrollTo(9)
    

    But this does not work.

    I have made I codepen app to show my approach. https://codepen.io/olafxso/pen/gOpmvZJ

    Any idea’s what I am doing wrong?



  • somebody any idea’s?



  • I think you need to use a virtual scroll for this.

    Codepen - https://codepen.io/Pratik__007/pen/gOpxwbO?editors=1010



  • hi @Pratik-Patel

    Thanks for your solution. There is one issue now.
    I actually have got a full height table with a fixed header. I have add the css for that in you codepen approach.

    I have update the scrollto method to jump to row 60.
    When you scroll down beyond row 60 and press the button it scrolls to row 61. Row 60 is behind the table header.

    It also does not update the table repaints correct. The table has got some blurred lines. Scroll to row 0. Then press to the button. You will see it jumps to row 60 as last row, but the first 4 rows are blurred.

    Do you (or somebody else) have got an idea how to fix this?


Log in to reply