Note

This documentation describes the VirtualRepeat Vue component for native UI views for Xml templates see repeat with 'virtual=true'.

VirtualRepeat

A high-performance virtualized list that renders only the visible items in the viewport. Re-exported from the virtua library (VList).

Import

import { VirtualRepeat } from '@neos/design-system'

Key Props (from virtua VList)

Prop	Type	Description
data	T[]	Array of items to virtualize
overscan	number	Number of items to render outside the viewport
horizontal	boolean	Horizontal scrolling mode

Slots

Slot	Scope	Description
default	{ item: T, index: number }	Template for each virtualized item

Emits

Event	Description
scroll-end	Emitted when the user scrolls to the end of the list

Usage Examples

Virtualized item list

<VirtualRepeat :data="viewModel.datasource" style="height: 400px">
  <template v-slot="{ item }">
    <HorizontalLayout space="small" style="padding: 8px; border-bottom: 1px solid #eee">
      <Text>{{ item.name }}</Text>
      <Text size="small">{{ item.status }}</Text>
    </HorizontalLayout>
  </template>
</VirtualRepeat>

Infinite scrolling

<VirtualRepeat :data="items" @scroll-end="loadMore">
  <template v-slot="{ item, index }">
    <div>{{ index + 1 }}. {{ item.name }}</div>
  </template>
</VirtualRepeat>

Notes

• Requires a fixed or constrained height on the container for virtualization to work correctly.
• For ViewModel-integrated infinite scrolling, use ViewModelLoadDataOnScroll or LoadDataOnScroll instead.