search

jonasgeiler / svelte-tiny-virtual-list

A tiny but mighty list virtualization library for Svelte, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
https://svelte-tiny-virtual-list.jonasgeiler.com
MIT License
405 stars 23 forks source link

Using scrollToIndex with sticky headers #33

Open keedyc opened 5 months ago

keedyc commented 5 months ago

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