← Back to Examples

⚡ Virtual Scrolling

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

🌐 client — runs in the browser (element JS API) 🖥️ server — LiveView round-trip

VS01 · Large Dataset — Performance & Scroll-to API

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 — and lets you jump anywhere in that list with the scroll-to API.

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.

Scroll-to API

In virtual mode scrollToIndex / scrollToValue scroll by fixed-height index math — the target row need not be rendered, so jumping to item #14,999 in this 15,000-row list is instant. Pair with open() for an "open + jump" gesture. Default alignment is start (target at the top); pass { block: 'center' } to center it. The buttons below drive the same picker.

The log shows the resulting scrollTop and which rows landed in view.
scrollTo* results log here…
el.open();
el.scrollToIndex(14999);              // instant — row 14,999 isn't rendered yet
el.scrollToValue(12345);             // resolves value → index
el.scrollToIndex(7500, { block: 'center' });
💡 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"

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