MoonUI

Virtual List

PRO

A high-performance virtualized list component that efficiently renders large datasets by only rendering visible items. Perfect for handling thousands of items with smooth scrolling and minimal memory usage.

Pro Features

Unlock advanced capabilities with the Pro version

Blazing Fast Performance

Render millions of items without performance degradation

Memory Efficient

Only render visible items, minimal memory footprint

Infinite Scrolling

Built-in support for infinite scroll and lazy loading

Dynamic Heights

Support for variable height items with estimation

Selection Support

Single and multi-select with click, Shift/Ctrl range selection, and keyboard navigation

Filter-Friendly

Feed VirtualList your filtered or searched subset — it renders large filtered lists efficiently (see the Search example for the client-side filtering pattern)

Installation

Install via CLI

npx @moontra/moonui-cli add virtual-list

Usage

Pro Required
1
Item 1
Description for item 1
Tech
2
Item 2
Description for item 2
Design
3
Item 3
Description for item 3
Business
4
Item 4
Description for item 4
Tech
5
Item 5
Description for item 5
Design
6
Item 6
Description for item 6
Business
7
Item 7
Description for item 7
Tech
8
Item 8
Description for item 8
Design
9
Item 9
Description for item 9
Business
10
Item 10
Description for item 10
Tech
11
Item 11
Description for item 11
Design
12
Item 12
Description for item 12
Business
13
Item 13
Description for item 13
Tech
No more items to load
0%

Examples

Basic Virtual List

PRO

Simple virtual list rendering 10,000 items efficiently

Pro Required
Rendering 10,000 items efficiently
1
Item 1
Description for item 1
Tech
2
Item 2
Description for item 2
Design
3
Item 3
Description for item 3
Business
4
Item 4
Description for item 4
Tech
5
Item 5
Description for item 5
Design
6
Item 6
Description for item 6
Business
7
Item 7
Description for item 7
Tech
8
Item 8
Description for item 8
Design
9
Item 9
Description for item 9
Business
10
Item 10
Description for item 10
Tech
11
Item 11
Description for item 11
Design
12
Item 12
Description for item 12
Business
13
Item 13
Description for item 13
Tech
No more items to load
0%

Virtual List with Search

PRO

Searchable virtual list with 50,000 users

Pro Required
Showing 50,000 of 50,000 users
U1
User 1
user1@example.com
active
Admin
U2
User 2
user2@example.com
active
Editor
U3
User 3
user3@example.com
active
Viewer
U4
User 4
user4@example.com
active
Admin
U5
User 5
user5@example.com
active
Editor
U6
User 6
user6@example.com
active
Viewer
U7
User 7
user7@example.com
active
Admin
U8
User 8
user8@example.com
inactive
Editor
U9
User 9
user9@example.com
inactive
Viewer
U1
User 10
user10@example.com
inactive
Admin
U1
User 11
user11@example.com
active
Editor
U1
User 12
user12@example.com
active
Viewer
U1
User 13
user13@example.com
active
Admin
No more items to load
0%

Infinite Scrolling

PRO

Infinite scroll with a custom loader, a custom end message, and an earlier fetch trigger via loadMoreThreshold

Pro Required
Loaded 100 articles (scroll to load more)

Article 1

This is the excerpt for article 1. It provides a brief overview of the content.

By Author 11/1/20241 min read

Article 2

This is the excerpt for article 2. It provides a brief overview of the content.

By Author 11/2/20242 min read

Article 3

This is the excerpt for article 3. It provides a brief overview of the content.

By Author 11/3/20243 min read

Article 4

This is the excerpt for article 4. It provides a brief overview of the content.

By Author 11/4/20244 min read

Article 5

This is the excerpt for article 5. It provides a brief overview of the content.

By Author 11/5/20245 min read

Article 6

This is the excerpt for article 6. It provides a brief overview of the content.

By Author 11/6/20246 min read

Article 7

This is the excerpt for article 7. It provides a brief overview of the content.

By Author 11/7/20247 min read

Article 8

This is the excerpt for article 8. It provides a brief overview of the content.

By Author 11/8/20248 min read

Article 9

This is the excerpt for article 9. It provides a brief overview of the content.

By Author 11/9/20249 min read

Article 10

This is the excerpt for article 10. It provides a brief overview of the content.

By Author 11/10/202410 min read

Article 11

This is the excerpt for article 11. It provides a brief overview of the content.

By Author 21/11/20241 min read

Article 12

This is the excerpt for article 12. It provides a brief overview of the content.

By Author 21/12/20242 min read

Dynamic Height Items

PRO

Variable-height items measured at runtime via variableHeight + estimatedItemHeight

Pro Required
Message 1
12:00:00 AM

This is line 0.

— User 1
Message 2
1:07:00 AM

This is line 7. This is line 8.

— User 2
Message 3
2:14:00 AM

This is line 14. This is line 15. This is line 16.

— User 3
Message 4
3:21:00 AM

This is line 21. This is line 22. This is line 23. This is line 24.

— User 4
Message 5
4:28:00 AM

This is line 28.

— User 5
Message 6
5:35:00 AM

This is line 35. This is line 36.

— User 6
Message 7
6:42:00 AM

This is line 42. This is line 43. This is line 44.

— User 7
Message 8
7:49:00 AM

This is line 49. This is line 50. This is line 51. This is line 52.

— User 8
Message 9
8:56:00 AM

This is line 56.

— User 9
Message 10
9:03:00 AM

This is line 63. This is line 64.

— User 10
Message 11
10:10:00 AM

This is line 70. This is line 71. This is line 72.

— User 11
No more items to load
0%

Selectable List with Keyboard Selection

PRO

SelectableVirtualList with multi-select, Ctrl/Cmd+A select-all, Escape to clear, and a live selection summary

Pro Required
0 selected

Click a row to select it. Tab into a row, then press Enter or Space to toggle, Ctrl/Cmd+A to select every item, Escape to clear the selection.

1
Member 1
member1@example.com
Engineering
2
Member 2
member2@example.com
Design
3
Member 3
member3@example.com
Sales
4
Member 4
member4@example.com
Engineering
5
Member 5
member5@example.com
Design
6
Member 6
member6@example.com
Sales
7
Member 7
member7@example.com
Engineering
8
Member 8
member8@example.com
Design
9
Member 9
member9@example.com
Sales
10
Member 10
member10@example.com
Engineering
11
Member 11
member11@example.com
Design
12
Member 12
member12@example.com
Sales
No more items to load
0%

Animated Entry with Stagger

PRO

enableAnimations with custom itemEnterAnimation, listAnimation, staggerDelay, a tighter overscan window, and a live onScroll readout

Pro Required
800 items · scrollTop 0px
Notification 1
info
Notification 2
warning
Notification 3
critical
Notification 4
info
Notification 5
warning
Notification 6
critical
Notification 7
info
Notification 8
warning
Notification 9
critical
No more items to load
0%