VirtualList

Generic virtual-scrolling list. Used internally by CommandPalette for result sets larger than 50 items, and also exported for building custom lists.

Props

items

T[]

The full list to virtualize. T is inferred from the array you pass.

itemHeight

number

Fixed height of each row, in pixels.

containerHeight

number

Height of the scrollable viewport, in pixels.

overscan

number · default: 3

Extra items rendered above and below the visible range, to reduce blank flashes during fast scrolling.

activeIndex

number · default: -1

Index (into items) that should always be scrolled into view — set this to the keyboard-active row.

Slots

#default

{ item, index }

Renders each visible row. item is the value from items, index its position in the full (non-virtualized) array.

<VirtualList :items="results" :item-height="40" :container-height="400" :active-index="activeIndex">
  <template #default="{ item, index }">
    <div :class="{ active: index === activeIndex }">{{ item.label }}</div>
  </template>
</VirtualList>