Content can wrap across lines without an application-owned height calculator.
Changes before the viewport preserve the item currently being read.
Linear lists
Use linear layout for feeds, messages, search results, and other surfaces ordered along one axis. It supports vertical and horizontal flow, gaps, variable sizes, and ID-based scrolling.
Example
These 50,000 rows repeat four different heights. Vue and DOM environments measure the rendered elements automatically. Core and Terminal environments show the same viewport query as data.
Changes before the viewport preserve the item currently being read.
Measured content updates the position of every item that follows it.
Content can wrap across lines without an application-owned height calculator.
Measured content updates the position of every item that follows it.
Content can wrap across lines without an application-owned height calculator.
Changes before the viewport preserve the item currently being read.
<script setup lang="ts">
import { VirtualList } from '@sectile/vue/virtual/list'
const rows = Array.from({ length: 50_000 }, (_, index) => ({
id: `row-${index}`,
title: `Row ${index + 1}`,
lines: Array.from(
{ length: 1 + (index % 3) },
() => 'Content determines this row height.',
),
}))
</script>
<template>
<VirtualList
:items="rows"
:get-key="row => row.id"
>
<template v-slot="{ value: row }">
<article>
<h3>{{ row.title }}</h3>
<p v-for="(line, lineIndex) in row.lines" :key="lineIndex">
{{ line }}
</p>
</article>
</template>
</VirtualList>
</template>Choose a size mode
| Available information | Vue prop | Behavior |
|---|---|---|
| Actual DOM size only | Omit both | Measure the initial render range, then create the virtual layout from that sample |
| Approximate starting size | estimateSize | Start from the estimate and replace it with real measurements |
| Exact fixed size for every item | itemSize | Skip measurement and calculate from the fixed size |
For DOM, pass createAxisMeasurementResolver('vertical') or 'horizontal' to createVirtualizer. Core represents the same choice with unknown, estimated, and exact extents.
Collection changes
Keep stable IDs when inserting, removing, or moving items. Sectile retains measurements for IDs that remain and corrects the anchor position by the amount that changed before the viewport.
Use Vue's scrollTo(), the DOM connection's scrollTo(), or Core's linearScrollTarget() to move to an item by ID.