---
title: VirtualList
description: VirtualList
element: vaadin-virtual-list
---

## Description

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

```html
<vaadin-virtual-list></vaadin-virtual-list>
```

```js
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:

Attribute        | Description
-----------------|--------------------------------------------
`overflow`       | Set to `top`, `bottom`, both, or none.

### Built-in Theme Variants

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

Theme variant                            | Description
-----------------------------------------|---------------
`theme="overflow-indicators"`            | Shows visual indicators at the top and bottom when the content is scrolled
`theme="overflow-indicator-top"`         | Shows the visual indicator at the top when the content is scrolled
`theme="overflow-indicator-top-bottom"`  | Shows the visual indicator at the bottom when the content is scrolled

### Custom CSS Properties

The following custom CSS properties are available for styling:

Custom CSS property                    | Description
---------------------------------------|-------------
`--vaadin-virtual-list-padding-block`  | The CSS padding applied to top and bottom edges
`--vaadin-virtual-list-padding-inline` | The CSS padding applied to left and right edges

See [Styling Components](https://vaadin.com/docs/latest/styling/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](#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

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

### VirtualListRenderer

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