Components
Virtual List
A ledger that only mounts the rows on stage: the viewport keeps its scroll length by a spacer sized from the row height, the rows themselves are positioned against it — a ten-thousand-row list costs the DOM a window, not the ledger. Fixed-height rows keep the arithmetic honest without measurement passes.
#Basic usage
<script setup lang="ts">
import { VirtualList } from "@bysages/vue";
const rows = Array.from({ length: 10000 }, (_, index) => `Row ${index + 1}`);
</script>
<template>
<VirtualList :items="rows" :item-height="36" :height="216" class="w-full">
<template #item="{ item, index }">
<div
class="flex h-full items-center border-b border-border px-4 text-sm"
:class="index % 2 ? 'text-secondary' : ''"
>
{{ item }}
</div>
</template>
</VirtualList>
</template>
#Props
#VirtualList
A ledger that only mounts the rows on stage: the viewport keeps its scroll length by a spacer sized from the row height, the rows themselves are positioned against it — a ten-thousand-row list costs the DOM a window, not the ledger. Fixed-height rows keep the arithmetic honest without measurement passes.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array as PropType<unknown[]> | — | |
itemHeight | Number as PropType<number> | 40 | The height every row occupies — fixed rows keep it simple. |
height | [Number, String] as PropType<number | string> | 320 | The viewport height the ledger scrolls within. |