Virtual List

Data

Virtualized list: only visible elements are rendered in the DOM. Optimal performance for large collections.

Props

Prop	Type	Default	Description
`items`*	`T[]`	—	Array of data to virtualize.
`itemHeight`*	`number`	—	Fixed height of each item (px).
`containerHeight`	`number`	`400`	Height of the scrollable container (px).
`overscan`	`number`	`3`	Number of additional items rendered outside the viewport.
`keyField`	`string`	—	Field used as unique key.

Examples

10 000 items — only visible rows renderedScroll to see virtualization

Item 1

Index 0

Item 2

Index 1

Item 3

Index 2

Item 4

Index 3

Item 5

Index 4

Item 6

Index 5

Item 7

Index 6

Item 8

Index 7

Item 9

Index 8

Item 10

Index 9

vue

<DsVirtualList
  :items="myItems"
  :item-height="56"
  :container-height="320"
  key-field="id"
>
  <template #default="{ item, index }">
    <div class="flex items-center gap-3 px-4 h-14">
      {{ item.label }}
    </div>
  </template>
</DsVirtualList>

Skeleton

Use DsVirtualListSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsVirtualListSkeleton />

Accessibility

Use aria-rowcount and aria-rowindex on items to indicate position in the total list.
Add role="list" on the container and role="listitem" on each item.

Table

Accordion