GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src / VirtualizerOptions

Interface: VirtualizerOptions<Item>

Type Parameters

Item

Item

Properties

ariaLabel

readonly ariaLabel: string

class?

readonly optional class?: string

columns?

readonly optional columns?: number

estimateSize

readonly estimateSize: number | ((item, index) => number)

gap?

readonly optional gap?: number

items

readonly items: readonly Item[]

key

readonly key: (item, index) => PropertyKey

Parameters

item

Item

index

number

Returns

PropertyKey

layout?

readonly optional layout?: VirtualizerLayout

overscan?

readonly optional overscan?: number

renderItem

readonly renderItem: (item, index) => TemplateValue

Parameters

item

Item

index

number

Returns

TemplateValue

ssrCount?

readonly optional ssrCount?: number

Example

Configure item identity, rendering, estimated sizing, layout, overscan, server window size, and accessible naming:

ts
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);