Virtual list displays a vertically aligned set of items inside a scrollable container. Each item is rendered on the fly as the user scrolls the list, which makes the component especially suitable for displaying long lists of items without sacrificing performance.

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.

<vaadin-virtual-list
  .items="${this.people}"
  .renderer="${this.personCardRenderer}"
></vaadin-virtual-list>