Using scrollToIndex with sticky headers

[keedyc]

Background

I'd like to make a virtual table with a few characteristics:

1. a sticky header row
2. keyboard shortcuts (⬆️ and ⬇️) to change the selected row
3. auto-scroll to reveal a newly-focused row if it's partly offscreen

Attempts

I tried to implement this in two ways shown in this example code, but each had an issue 😅

1. Put the header in slot="header"

   • Auto-scrolling reveals only part of a row when navigating down. This seems to happen because the header row shifts the other rows down, and auto-scrolling based on scrollToIndex doesn't take that shift into consideration. Based on this comment about invisible elements, I think this is the expected behavior in this case.

2. Put the header in slot="item"

   • Auto-scrolling reveals only part of a row when navigating up. This seems to happen because the sticky header row hides the topmost row.

Questions

1. Is there another way to do what I have in mind?
2. If not, would you be open to a PR that tweaks existing behavior to fit this use case?

Thanks in advance for any insight you can offer! 🙏