No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to programmatically scrollTo a row in a QTable

    Help
    2
    4
    889
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • O
      olaf last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • O
        olaf last edited by

        somebody any idea’s?

        1 Reply Last reply Reply Quote 0
        • Pratik Patel
          Pratik Patel last edited by

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

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

          1 Reply Last reply Reply Quote 0
          • O
            olaf last edited by olaf

            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?

            1 Reply Last reply Reply Quote 0
            • First post
              Last post