Ensure selected item is visible in Q-list or Q-table

[CWoodman]

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…

https://codesandbox.io/s/scrolltest-with-list-and-table-b60iv?file=/src/layouts/MainLayout.vue

Any help will be appreciated. I think this will be an essential feature of my app.

[turigeza]

@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 scrollIntoView
https://codepen.io/turigeza/pen/zYqQrwY

[turigeza]

@CWoodman In your code

Instead of
this.scrollToItem(this.itemRef)

You should
this.scrollToItem(this.itemRef.$el)

Then it works.
https://codesandbox.io/s/scrolltest-with-list-and-table-forked-twgtu?file=/src/components/tabPanels/List.vue:1073-1108

[CWoodman]

@turigeza Great! That works for the List. Thanks a bunch.
Any suggestion how to do it for a selected table row?

[turigeza]

@CWoodman I guess the same idea as you were doing for the list.

[CWoodman]

@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.

[turigeza]

@CWoodman You are right.

Did you know there is a built in function for this?
https://pdanpdan.github.io/quasar-docs/vue-components/table#QTable-API
scrollTo

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.

https://codesandbox.io/s/scrolltest-with-list-and-table-forked-twgtu?file=/src/components/tabPanels/Table.vue:2078-2157

[CWoodman]

@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!