VirtualList

Description #

<vaadin-virtual-list> is a Web Component for displaying a virtual/infinite list of items.

<vaadin-virtual-list></vaadin-virtual-list>

const list = document.querySelector('vaadin-virtual-list');
list.items = items; // An array of data items
list.renderer = (root, list, {item, index}) => {
  root.textContent = `#${index}: ${item.name}`
}

Styling #

The following state attributes are available for styling:

Built-in Theme Variants #

<vaadin-virtual-list> supports the following theme variants:

Custom CSS Properties #

The following custom CSS properties are available for styling:

See Styling Components documentation.

Properties #

firstVisibleIndex #

Type: number

Gets the index of the first visible item in the viewport.

itemAccessibleNameGenerator #

Type: ((item: any) => string) | undefined

A function that generates accessible names for virtual list items. The function gets the item as an argument and the return value should be a string representing that item. The result gets applied to the corresponding virtual list child element as an aria-label attribute.

items #

Type: any[] | undefined

An array containing items determining how many instances to render.

lastVisibleIndex #

Type: number

Gets the index of the last visible item in the viewport.

renderer #

Type: VirtualListRenderer<any> | undefined

Custom function for rendering the content of every item. Receives three arguments:

• root The render target element representing one item at a time.
• virtualList The reference to the <vaadin-virtual-list> element.
• model The object with the properties related with the rendered item, contains:
  • model.index The index of the rendered item.
  • model.item The item.

See also: VirtualListRenderer

Methods #

requestContentUpdate #

Type: () => void

Requests an update for the content of the rows. While performing the update, it invokes the renderer passed in the renderer property for each visible row.

It is not guaranteed that the update happens immediately (synchronously) after it is requested.

scrollToIndex #

Type: (index: number) => void

Scroll to a specific index in the virtual list.

Types #

VirtualListItemModel #

export interface VirtualListItemModel<TItem> {
  index: number;
  item: TItem;
}

VirtualListRenderer #

export type VirtualListRenderer<TItem> = (
  root: HTMLElement,
  virtualList: VirtualList<TItem>,
  model: VirtualListItemModel<TItem>,
) => void;