@gluonjs/core / src / VirtualizerHandle

Interface: VirtualizerHandle<Item>

Type Parameters

Item

Item

Properties

range

readonly range: Readonly<Ref<VirtualizerRange>>

Reactive inclusive/exclusive item range currently represented in the DOM.

ref

readonly ref: (element) => void

Callback ref owning scroll, resize, focus, and measurement resources.

Parameters

element

HTMLElement | undefined

Returns

void

Methods

scrollToIndex()

scrollToIndex(index, options?): void

Scrolls the item into view and optionally moves keyboard focus to it.

Parameters

index

number

options?

ScrollToOptions & object

Returns

void

stop()

stop(): void

Permanently releases all observers, listeners, and queued animation frames.

Returns

void

update()

update(options): void

Updates the collection without replacing the controller.

Parameters

options

VirtualizerOptions<Item>

Returns

void

view()

view(): TemplateResult

Returns the accessible virtual viewport. SSR gets the deterministic initial window.

Returns

TemplateResult

Example

Own and update a virtual viewport, inspect its reactive range, navigate to logical items, and permanently release its resources:

import {
  createVirtualizer,
  html,
  type VirtualizerHandle,
  type VirtualizerLayout,
  type VirtualizerOptions,
  type VirtualizerRange,
} from '@gluonjs/core';

interface Product { readonly id: string; readonly name: string }
const inventory: readonly Product[] = Array.from({ length: 100 }, (_, index) => ({
  id: `sku-${index}` ,
  name: `Product ${index + 1}` ,
}));
const layout: VirtualizerLayout = 'grid';
const options: VirtualizerOptions<Product> = {
  items: inventory,
  key: (product) => product.id,
  renderItem: (product) => html`<a href=${`/products/${product.id}`}>${product.name}</a>`,
  estimateSize: 72,
  layout,
  columns: 2,
  overscan: 2,
  ssrCount: 8,
  ariaLabel: 'Product inventory',
};
const products: VirtualizerHandle<Product> = createVirtualizer(options);
const view = products.view();
const range: VirtualizerRange = products.range.value;
products.scrollToIndex(40, { behavior: 'smooth', focus: true });
console.log(view, range);