svelte<script lang="ts">
  import { VirtualList } from 'svelte-widgets'

  const items = Array.from({ length: 10000 }, (_value, idx) => `Item ${idx + 1}`)
</script>

<VirtualList
  {items}
  item_size={32}
  style="height: 192px"
  tabindex="0"
  aria-label="Ten thousand items"
>
  {#snippet children(item, idx)}
    <div style="height: 32px; display: flex; align-items: center">{idx + 1}: {item}</div>
  {/snippet}
</VirtualList>

10000 results

svelte<script lang="ts">
  import { tick } from 'svelte'
  import { VirtualList } from 'svelte-widgets'

  const items = Array.from({ length: 10000 }, (_value, idx) => ({
    id: idx,
    name: `Record ${idx + 1}`,
  }))
  let query = $state(``)
  let list = $state<{ scroll_to_index: (idx: number) => void }>()
  const filtered = $derived(items.filter((item) => item.name.includes(query)))
</script>

<label
  >Filter records <input
    bind:value={query}
    oninput={async () => {
      await tick()
      list?.scroll_to_index(0)
    }}
  /></label
>
<button
  disabled={!filtered.length}
  onclick={() => list?.scroll_to_index(filtered.length - 1)}>Jump to last result</button
>
<p>{filtered.length} results</p>
{#if filtered.length}
  <VirtualList
    bind:this={list}
    items={filtered}
    key={(item) => item.id}
    item_size={32}
    style="height: 192px"
    tabindex="0"
    aria-label="Filtered records"
  >
    {#snippet children(item)}
      <div style="height: 32px; display: flex; align-items: center">{item.name}</div>
    {/snippet}
  </VirtualList>
{:else}
  <p role="status">No records match your filter.</p>
{/if}