NEURALNG
DATABETA

VirtualScroller

Deterministic fixed-size windowing for large vertical and horizontal collections with Signals, typed templates and lazy ranges.

10,000+ recordsSSR safeHeadless ready

GET STARTED

Import

Import the canonical standalone component and only the template directives you use.

app.ts TypeScript
import {
  NeuralVirtualScroller,
  NeuralVirtualScrollerItemTemplate,
  NeuralVirtualScrollerEmptyTemplate,
  NeuralVirtualScrollerLoadingTemplate,
} from '@neural-ng/core/virtual-scroller';

@Component({
  imports: [
    NeuralVirtualScroller,
    NeuralVirtualScrollerItemTemplate,
    NeuralVirtualScrollerEmptyTemplate,
    NeuralVirtualScrollerLoadingTemplate,
  ],
})

10,000 records

Only the visible window and overscan exist in the DOM. The end index is always exclusive.

Visible 1–6 · rendered 1–9
#1Agent task 00001Ready
#2Agent task 00002Running
#3Agent task 00003Queued
#4Agent task 00004Ready
#5Agent task 00005Running
#6Agent task 00006Queued
#7Agent task 00007Ready
#8Agent task 00008Running
#9Agent task 00009Queued

Horizontal orientation

The same range engine windows a horizontal card rail without changing its event contract.

Agent task 00001Research · 1
Agent task 00002Build · 2
Agent task 00003Review · 3
Agent task 00004Research · 4
Agent task 00005Build · 5

Controlled position and imperative scrolling

[(first)], native scrolling and imperative methods remain synchronized.

First: 1
1Agent task 00001
2Agent task 00002
3Agent task 00003
4Agent task 00004
5Agent task 00005
6Agent task 00006

Lazy ranges and loading

lazyLoad emits each distinct overscanned range for race-safe data sources.

Requested [0, 8) · visible [0, 5)
1Agent task 00001
2Agent task 00002
3Agent task 00003
4Agent task 00004
5Agent task 00005
6Agent task 00006
7Agent task 00007
8Agent task 00008

Typed empty and loading templates

State templates receive both the implicit localized label and its named label property.

No queued work
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
Streaming records

Unstyled and typed slots

Windowing, dimensions and list semantics remain while consumer classes own every visual choice.

1Agent task 00001Ready
2Agent task 00002Running
3Agent task 00003Queued
4Agent task 00004Ready
5Agent task 00005Running