My Design System

My Design System

Virtual List

Source: TypeScript / Java

Virtual List allows you to render a long list of items inside a scrollable container without sacrificing performance. Each item is rendered on the fly as the user scrolls the list.

To use the component, you need to assign it a set of data items and a renderer that is used for rendering each individual data item. The height of an item is determined by its content and can change dynamically.

Open in a
new tab
<vaadin-virtual-list
  .items="${this.people}"
  .renderer="${this.personCardRenderer}"
></vaadin-virtual-list>