Virtual List
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’s used to render each individual data item. The height of an item is determined by its content and can change dynamically.
const data = Array.from(Array(100).keys()).map((i) => "◯".repeat(i));
return (
<VirtualList items={data}>{({ item }) => <span>{item}</span>}</VirtualList>
);|
Important
| You can find more information in the corresponding article on vaadin.com. |