VS01 Virtual Scrolling
Render only visible rows for 10,000+ item performance
Live Demo (10,000 rows)
Scroll through 10,000 rows with smooth performance.
Code
Configuration
How It Works
Only visible rows (plus buffer) are rendered to the DOM. As you scroll, rows are recycled.
Key Properties
virtualScroll - Enable manually
virtualScrollThreshold - Auto-enable threshold (default: 100)
virtualScrollRowHeight - Row height in px (default: 38)
virtualScrollBuffer - Extra rows to render (default: 10)
VS02 Infinite Scroll
Load more data on scroll with ondatarequest and hasMoreItems
Live Demo
Scroll to bottom to load more rows.
Code
Configuration
Infinite Scroll
Load data progressively as user scrolls to bottom.
Properties
infiniteScroll - Enable infinite scroll
hasMoreItems - More data available
infiniteScrollThreshold - Pixels from bottom to trigger (default: 100)
Event
ondatarequest with trigger: 'loadMore'
Performance Tips
Use Fixed Row Height
Virtual scrolling requires knowing row heights upfront. Set virtualScrollRowHeight to match your actual row height for accurate scrollbar.
Avoid Complex Cell Rendering
Keep formatCallback and templateCallback fast. Avoid heavy computations in render paths.
Use Appropriate Buffer
The virtualScrollBuffer trades memory for smoother scrolling. Default of 10 works well for most cases.
Combine with Pagination
For extremely large datasets, consider server-side pagination with virtual scrolling for the current page.