Changes before the viewport preserve the item currently being read.
Grid, masonry, and spatial layouts
Choose the layout that matches the structure already present in the surface. Every code tab follows the Usage environment selected in the top navigation.
Track grid
Use a track grid when rows and columns are both independently large. This example contains 300 rows × 300 columns, or 90,000 cells with equal axis counts. Scrolling in either direction keeps only the cells inside the viewport and overscan in the DOM.
R7 · C1
R7 · C2
R7 · C3
R7 · C4
R7 · C5
R7 · C6
R7 · C7
R7 · C8
R7 · C9
R7 · C10
R7 · C11
R7 · C12
R7 · C13
R7 · C14
R8 · C1
R8 · C2
R8 · C3
R8 · C4
R8 · C5
R8 · C6
R8 · C7
R8 · C8
R8 · C9
R8 · C10
R8 · C11
R8 · C12
R8 · C13
R8 · C14
R9 · C1
R9 · C2
R9 · C3
R9 · C4
R9 · C5
R9 · C6
R9 · C7
R9 · C8
R9 · C9
R9 · C10
R9 · C11
R9 · C12
R9 · C13
R9 · C14
R10 · C1
R10 · C2
R10 · C3
R10 · C4
R10 · C5
R10 · C6
R10 · C7
R10 · C8
R10 · C9
R10 · C10
R10 · C11
R10 · C12
R10 · C13
R10 · C14
R11 · C1
R11 · C2
R11 · C3
R11 · C4
R11 · C5
R11 · C6
R11 · C7
R11 · C8
R11 · C9
R11 · C10
R11 · C11
R11 · C12
R11 · C13
R11 · C14
R12 · C1
R12 · C2
R12 · C3
R12 · C4
R12 · C5
R12 · C6
R12 · C7
R12 · C8
R12 · C9
R12 · C10
R12 · C11
R12 · C12
R12 · C13
R12 · C14
R13 · C1
R13 · C2
R13 · C3
R13 · C4
R13 · C5
R13 · C6
R13 · C7
R13 · C8
R13 · C9
R13 · C10
R13 · C11
R13 · C12
R13 · C13
R13 · C14
R14 · C1
R14 · C2
R14 · C3
R14 · C4
R14 · C5
R14 · C6
R14 · C7
R14 · C8
R14 · C9
R14 · C10
R14 · C11
R14 · C12
R14 · C13
R14 · C14
R15 · C1
R15 · C2
R15 · C3
R15 · C4
R15 · C5
R15 · C6
R15 · C7
R15 · C8
R15 · C9
R15 · C10
R15 · C11
R15 · C12
R15 · C13
R15 · C14
R16 · C1
R16 · C2
R16 · C3
R16 · C4
R16 · C5
R16 · C6
R16 · C7
R16 · C8
R16 · C9
R16 · C10
R16 · C11
R16 · C12
R16 · C13
R16 · C14
R17 · C1
R17 · C2
R17 · C3
R17 · C4
R17 · C5
R17 · C6
R17 · C7
R17 · C8
R17 · C9
R17 · C10
R17 · C11
R17 · C12
R17 · C13
R17 · C14
R18 · C1
R18 · C2
R18 · C3
R18 · C4
R18 · C5
R18 · C6
R18 · C7
R18 · C8
R18 · C9
R18 · C10
R18 · C11
R18 · C12
R18 · C13
R18 · C14
R19 · C1
R19 · C2
R19 · C3
R19 · C4
R19 · C5
R19 · C6
R19 · C7
R19 · C8
R19 · C9
R19 · C10
R19 · C11
R19 · C12
R19 · C13
R19 · C14
R20 · C1
R20 · C2
R20 · C3
R20 · C4
R20 · C5
R20 · C6
R20 · C7
R20 · C8
R20 · C9
R20 · C10
R20 · C11
R20 · C12
R20 · C13
R20 · C14
R21 · C1
R21 · C2
R21 · C3
R21 · C4
R21 · C5
R21 · C6
R21 · C7
R21 · C8
R21 · C9
R21 · C10
R21 · C11
R21 · C12
R21 · C13
R21 · C14
R22 · C1
R22 · C2
R22 · C3
R22 · C4
R22 · C5
R22 · C6
R22 · C7
R22 · C8
R22 · C9
R22 · C10
R22 · C11
R22 · C12
R22 · C13
R22 · C14
R23 · C1
R23 · C2
R23 · C3
R23 · C4
R23 · C5
R23 · C6
R23 · C7
R23 · C8
R23 · C9
R23 · C10
R23 · C11
R23 · C12
R23 · C13
R23 · C14
R24 · C1
R24 · C2
R24 · C3
R24 · C4
R24 · C5
R24 · C6
R24 · C7
R24 · C8
R24 · C9
R24 · C10
R24 · C11
R24 · C12
R24 · C13
R24 · C14
R25 · C1
R25 · C2
R25 · C3
R25 · C4
R25 · C5
R25 · C6
R25 · C7
R25 · C8
R25 · C9
R25 · C10
R25 · C11
R25 · C12
R25 · C13
R25 · C14
R26 · C1
R26 · C2
R26 · C3
R26 · C4
R26 · C5
R26 · C6
R26 · C7
R26 · C8
R26 · C9
R26 · C10
R26 · C11
R26 · C12
R26 · C13
R26 · C14
R27 · C1
R27 · C2
R27 · C3
R27 · C4
R27 · C5
R27 · C6
R27 · C7
R27 · C8
R27 · C9
R27 · C10
R27 · C11
R27 · C12
R27 · C13
R27 · C14
R28 · C1
R28 · C2
R28 · C3
R28 · C4
R28 · C5
R28 · C6
R28 · C7
R28 · C8
R28 · C9
R28 · C10
R28 · C11
R28 · C12
R28 · C13
R28 · C14
<script setup lang="ts">
import { createUniformExtentIndex } from '@sectile/virtual/extent-index'
import { createDenseTrackGridLayout, trackGridLayoutStrategy } from '@sectile/virtual/track-grid-layout'
import { VirtualizerContent, VirtualizerItem, VirtualizerRoot } from '@sectile/vue/virtual/core'
const count = 300
const ids = Array.from({ length: count * count }, (_, index) =>
`cell-${Math.floor(index / count)}-${index % count}`,
)
const grid = createDenseTrackGridLayout(
createUniformExtentIndex(count, { kind: 'exact', value: 28 }),
createUniformExtentIndex(count, { kind: 'exact', value: 72 }),
ids,
)
</script>
<template>
<VirtualizerRoot
:default-state="grid"
:strategy="trackGridLayoutStrategy"
>
<template v-slot="{ placements }">
<VirtualizerContent>
<VirtualizerItem
v-for="cell in placements"
:key="cell.id"
:placement="cell"
size="both"
>
{{ cell.id }}
</VirtualizerItem>
</VirtualizerContent>
</template>
</VirtualizerRoot>
</template>A track grid manages row heights and column widths separately. Spanning regions can occupy multiple tracks in the same coordinate system. In Vue, connect trackGridLayoutStrategy to VirtualizerRoot.
For a product-card grid that only flows vertically and changes its column count with viewport width, VirtualGrid is the smaller API. minLaneSize derives its responsive column count.
Masonry
Masonry places variable-height cards across lanes while reducing empty space. This example measures the actual DOM height of 30,000 cards and creates only those around the viewport.
Measured content updates the position of every item that follows it.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Changes before the viewport preserve the item currently being read.
Measured content updates the position of every item that follows it.
<script setup lang="ts">
import { VirtualMasonry } from '@sectile/vue/virtual/masonry'
const cards = Array.from({ length: 30_000 }, (_, index) => ({
id: `card-${index}`,
lines: 1 + (index % 5),
}))
</script>
<template>
<VirtualMasonry
:items="cards"
:get-key="card => card.id"
:min-lane-size="104"
:lane-gap="8"
:item-gap="8"
>
<template v-slot="{ value: card }">
<article>
<h3>{{ card.id }}</h3>
<p v-for="lineIndex in card.lines" :key="lineIndex">
Content
</p>
</article>
</template>
</VirtualMasonry>
</template>VirtualMasonry derives its lane count from viewport width and minLaneSize. Once a card is measured, only the affected tail of the layout is updated.
Spatial
Use spatial layout when a diagram or editor already owns each item's x-y coordinates and size. This example arranges 40,000 service nodes in irregular clusters. With no row-column rule or fixed node size, moving in either direction queries only nodes intersecting the viewport.
<script setup lang="ts">
import { VirtualSpatial } from '@sectile/vue/virtual/spatial'
const nodes = Array.from({ length: 40_000 }, (_, index) => {
const cluster = Math.floor(index / 180)
const local = index % 180
const angle = local * 2.4
const radius = Math.sqrt(local) * 26
return {
id: `service-${index}`,
x: 480 + (cluster % 15) * 1_000 + Math.cos(angle) * radius,
y: 450 + Math.floor(cluster / 15) * 800 + Math.sin(angle) * radius,
width: 72 + (index % 4) * 12,
height: 40 + (index % 3) * 8,
layer: local === 0 ? 2 : 0,
}
})
</script>
<template>
<VirtualSpatial
:items="nodes"
:get-key="node => node.id"
:get-rect="node => node"
:get-z-index="node => node.layer"
:measure-size="false"
>
<template v-slot="{ value: node }">
{{ node.id }}
</template>
</VirtualSpatial>
</template>Pass x, y, width, and height through getRect. Sectile keeps those coordinates and performs the viewport intersection query.
Choose by data shape
| Structure already present in the data | Layout |
|---|---|
| Order and item size | Linear |
| Independent rows and columns | Track grid |
| Order and variable card heights | Masonry |
| Existing x-y rectangles | Spatial |