Virtual Scroller

Virtualizes long lists with fixed-height items.

Usage

<script setup>
import { ArchVirtualScroller } from "@archora/ui";

const items = Array.from({ length: 1000 }, (_, index) => ({ id: index, label: "Item " + index }));
</script>

<template>
  <ArchVirtualScroller :items="items" :item-height="40" style="height: 320px" v-slot="{ item }">
    {{ item.label }}
  </ArchVirtualScroller>
</template>

Live sandbox

Virtual Scroller can be tested directly on this page.

interactive

Virtual list loads in the browser.

<ArchVirtualScroller :items="items" :item-height="40" />

Props

Prop	Type	Default	Description
items	unknown[]	-	Item collection.
itemHeight	number	-	Fixed item height.

Slots

Slot	Props	Description
default		Renders a visible item.