Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

VirtualList

Renders only visible rows of a long list for better scroll performance. Use VirtualList for feeds and catalogs with thousands of items.

#
Usage

Basic example with common props.

Item 1
Item 2
Item 3
Item 4

#
Dynamic Height

Rows with variable heights while scrolling.

➖0:Lorem ipsum dolor sit amet, consectetur adipiscing elit.
➖1:Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
➖2:Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
➖3:Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

#API

VirtualList

props

Name
Description
Type
Default
Values
Required
class
CSS class name on the root element.
String
defaultHeight
Initial list height before measure; important for SSR.
Number
0
onResize
Called when the list root resizes.
Function
onRowsRendered
Called when the visible or overscan row range changes.
Function
overscanCount
Extra rows rendered outside the visible area to reduce scroll flicker.
Number
3
rowCount
Total number of rows in the list.
Number
true
rowHeight
Row height as px, percent string, function, or `useDynamicRowHeight` cache.
Number
String
Function
Object
true
rowProps
Extra props passed to the row slot as `props`.
Object
style
Inline styles; the list fills the height defined here.
Object
tag
Root element tag.
String
div

slots

Name
Description
row
Render a single row. Receives index, style, ariaAttributes, and props.
default
Optional content rendered after the virtualized rows.

methods

Name
Description
scrollToRow
Scroll so the given row index is visible.
element
Root HTML element when mounted, otherwise null.