← Back to Examples

⚡ Virtual Scrolling

Blazing-fast performance with 15,000 options using virtual scrolling and real-time metrics

🚀 Large Dataset Performance

This demo tests the component with 15,000 randomly generated options to evaluate performance under heavy load.

15,000

Total Options

—

Init Time (ms)

—

Render Time (ms)

—

Search Time (ms)

Filter Mode - Type to search (try "item", "test", or any number)

Select 4+ items to see count badge. Click badge to see virtual scrolling in the selected items popover.

💡 Performance Tips

Type to search - the component uses efficient string matching
Filter mode performs better with large datasets (hides non-matches)
Navigate mode shows all items but uses Ctrl+arrows for match navigation
Virtual scrolling keeps rendering fast even with 15,000 options
Try selecting multiple items and using "Clear All"

🎨 Rich Rendering with Virtual Scroll

Testing custom rendering callbacks with 150 items to trigger virtual scrolling in the selected items popover (threshold: 100).

Select Products (150 items)

Select 100+ items to see virtual scroll in the popover with custom rendering. Uses renderSelectionBadgeContentCallback and getSelectionBadgeClassCallback for rich badge styling.