Ensure selected item is visible in Q-list or Q-table
When a list item or table row is selected programmatically, I need to make sure it scrolls into view if needed. I read the docs and have been trying to do that with a q-list, but not having any luck. Haven’t even tried it with q-table yet because I don’t know where to start.
I’m hoping someone can point me in the right direction, or show me a little code example.
I’ve created a playground with a simple list and table, and buttons to select an item or row. The selection works fine, but scrolling does not.
Here’s the code…
Any help will be appreciated. I think this will be an essential feature of my app.
@CWoodman I can not do it on Code sandbox just now too small of screen I have … but here is basic example for scrolling to element with the native
@CWoodman In your code
Then it works.
@turigeza Great! That works for the List. Thanks a bunch.
Any suggestion how to do it for a selected table row?
@CWoodman I guess the same idea as you were doing for the list.
@turigeza Can’t figure out where to assign the ref. If you put it on the <tr> I just get a single item. If I put it on <td> I get an array, but it doesn’t represent rows and I get an error saying Cannot read property ‘$el’ of undefined.
The only unique column in the table is the ‘name’ column - should be a way to put that in refs and scroll to it I hope.
@CWoodman You are right.
Did you know there is a built in function for this?
Sadly though no animation. And also I can not get the header not to cover the first row : ) Never mind … see if you can use it don’t have more time to spend on it just now. I don’t get why the sticky header covers the first element. The prop
:virtual-scroll-sticky-start="100"should deal with this I thought.
@turigeza OK it works! And by adding the ‘virtual-scroll-sticky-size-start’ and ‘virtual-scroll-sticky-size-end’ props, I got it to show both the first and last rows when selected.
Thanks again for your help!