← Back to Examples

⚡ Virtual Scrolling

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

🚀 Large Dataset Performance

enable_virtual_scroll={true} · virtual_scroll_threshold={100} · option_height={50} · virtual_scroll_buffer={10}

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)
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

badge_height={50} sizes popover rows · option_height={70} · enable_virtual_scroll={true}

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

Select 100+ items to see virtual scroll in the popover with custom rendering. Uses renderSelectionBadgeContentCallback and getSelectionBadgeClassCallback for rich badge styling.
🔌 Server round-trip
0
The LiveView server saw 0 event(s) from the wrapper. 
(pick an option anywhere on this page)