Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - Virtualizer
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
<li><strong>Selection</strong> – Works with React Aria's selection system</li> </ul> <div class="notice"> <h4>Important: Virtualized components must have a defined size</h4> <p>This may be an explicit CSS width and height, or an implicit size bounded by an ancestor element. Without a bounded size, all items will be rendered, negating the performance benefits.</p> </div> <h2>Examples</h2> <div class="layout-tabs"> <button class="tab-button active" onclick="showTab('list')">List Layout</button> <button class="tab-button" onclick="showTab('grid')">Grid Layout</button> <button class="tab-button" onclick="showTab('waterfall')">Waterfall Layout</button> <button class="tab-button" onclick="showTab('table')">Table Layout</button> <button class="tab-button" onclick="showTab('horizontal')">Custom Horizontal</button> </div> <div id="list-tab" class="tab-content"> <h3>List Layout <span class="badge">5000 items</span></h3> <p>Supports layout of items in a vertical stack with fixed or variable height rows.</p> <div class="controls"> <label> <input type="checkbox" id="list-multiselect" checked onchange="toggleListMultiselect()"> Multiple selection </label> <label> <input type="checkbox" id="list-variable-height" onchange="toggleListVariableHeight()"> Variable height </label> </div> <div class="stats"> <div class="stat"> <div class="stat-value" id="list-visible-count">0</div> <div class="stat-label">Visible Items</div> </div> <div class="stat"> <div class="stat-value" id="list-selected-count">0</div> <div class="stat-label">Selected Items</div> </div> <div class="stat"> <div class="stat-value">5000</div> <div class="stat-label">Total Items</div> </div> </div> <div class="example-section"> <div class="virtualizer-container"> <div class="virtual-list" id="virtual-list"> <!-- Items will be dynamically generated --> </div> </div> </div> </div> <div id="grid-tab" class="tab-content" style="display: none;"> <h3>Grid Layout <span class="badge">1000 items</span></h3> <p>Supports layout of items in an equal size grid. Items are sized between minimum and maximum based on container width.</p> <div class="controls"> <label> <input type="checkbox" id="grid-multiselect" checked onchange="toggleGridMultiselect()"> Multiple selection </label> </div> <div class="stats"> <div class="stat"> <div class="stat-value" id="grid-visible-count">0</div> <div class="stat-label">Visible Items</div> </div> <div class="stat"> <div class="stat-value" id="grid-selected-count">0</div> <div class="stat-label">Selected Items</div> </div> <div class="stat"> <div class="stat-value">1000</div> <div class="stat-label">Total Items</div> </div> </div> <div class="example-section"> <div class="resizable-container"> <div class="virtualizer-container"> <div class="virtual-grid" id="virtual-grid"> <!-- Items will be dynamically generated --> </div> </div> </div> </div> </div> <div id="waterfall-tab" class="tab-content" style="display: none;"> <h3>Waterfall Layout <span class="badge">500 items</span></h3> <p>Arranges variable height items in a column layout. Columns are sized between minimum and maximum based on container width.</p> <div class="controls"> <label> <input type="checkbox" id="waterfall-multiselect" checked onchange="toggleWaterfallMultiselect()"> Multiple selection </label> </div> <div class="stats"> <div class="stat"> <div class="stat-value" id="waterfall-visible-count">0</div> <div class="stat-label">Visible Items</div> </div> <div class="stat"> <div class="stat-value" id="waterfall-selected-count">0</div> <div class="stat-label">Selected Items</div> </div> <div class="stat"> <div class="stat-value">500</div> <div class="stat-label">Total Items</div> </div> </div> <div class="example-section"> <div class="virtualizer-container"> <div class="waterfall-container" id="waterfall-container"> <div class="waterfall-columns" id="waterfall-columns"> <!-- Columns will be dynamically generated --> </div> </div> </div> </div> </div> <div id="table-tab" class="tab-content" style="display: none;"> <h3>Table Layout <span class="badge">1000 rows</span></h3> <p>Provides layout of items in rows and columns, supporting virtualization of both horizontal and vertical scrolling.</p> <div class="controls"> <label> <input type="checkbox" id="table-multiselect" checked onchange="toggleTableMultiselect()"> Multiple selection </label> </div> <div class="stats"> <div class="stat"> <div class="stat-value" id="table-visible-count">0</div> <div class="stat-label">Visible Rows</div> </div> <div class="stat"> <div class="stat-value" id="table-selected-count">0</div> <div class="stat-label">Selected Rows</div> </div> <div class="stat"> <div class="stat-value">1000</div> <div class="stat-label">Total Rows</div> </div> </div> <div class="example-section"> <div class="virtualizer-container"> <div class="virtual-table" id="virtual-table"> <div class="virtual-table-header"> <div class="virtual-table-cell"> <input type="checkbox" id="table-select-all" onchange="toggleTableSelectAll()"> </div> <div class="virtual-table-cell">ID</div> <div class="virtual-table-cell">Name</div> <div class="virtual-table-cell">Email</div> <div class="virtual-table-cell">Status</div> </div> <div id="virtual-table-body"> <!-- Rows will be dynamically generated --> </div> </div> </div> </div> </div> <div id="horizontal-tab" class="tab-content" style="display: none;"> <h3>Custom Horizontal Layout <span class="badge">200 items</span></h3> <p>Example of a custom layout implementation with horizontally scrolling fixed-size items.</p> <div class="controls"> <label> <input type="checkbox" id="horizontal-multiselect" checked onchange="toggleHorizontalMultiselect()"> Multiple selection </label> </div> <div class="stats"> <div class="stat"> <div class="stat-value" id="horizontal-visible-count">0</div> <div class="stat-label">Visible Items</div> </div> <div class="stat"> <div class="stat-value" id="horizontal-selected-count">0</div> <div class="stat-label">Selected Items</div> </div> <div class="stat"> <div class="stat-value">200</div> <div class="stat-label">Total Items</div> </div> </div> <div class="example-section"> <div class="virtualizer-container"> <div class="horizontal-list" id="horizontal-list"> <!-- Items will be dynamically generated --> </div> </div> </div> </div> <h2>Layout Options</h2> <div class="example-section"> <h3>ListLayout Options</h3> <ul> <li><span class="code">rowHeight</span> - Fixed height for all rows</li> <li><span class="code">estimatedRowHeight</span> - Estimated height for variable height rows</li> <li><span class="code">padding</span> - Padding around the list</li> <li><span class="code">gap</span> - Gap between items</li> </ul> <h3>GridLayout Options</h3> <ul> <li><span class="code">minItemSize</span> - Minimum size for grid items</li> <li><span class="code">maxItemSize</span> - Maximum size for grid items</li> <li><span class="code">minSpace</span> - Minimum space between items</li> </ul> <h3>WaterfallLayout Options</h3> <ul> <li><span class="code">minItemSize</span> - Minimum size for waterfall items</li> <li><span class="code">maxItemSize</span> - Maximum size for waterfall items</li> <li><span class="code">minSpace</span> - Minimum space between items</li> </ul> <h3>TableLayout Options</h3> <ul> <li><span class="code">rowHeight</span> - Fixed height for table rows</li> <li><span class="code">headingHeight</span> - Height for table header</li> <li><span class="code">padding</span> - Padding around the table</li> <li><span class="code">gap</span> - Gap between rows</li> </ul> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> </div> </sp-theme> <script> // Data generation const generateListItems = (count, variableHeight = false) => { const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.'.split(' '); const items = []; for (let i = 0; i < count; i++) { if (variableHeight) { const words = Math.max(2, Math.floor(Math.random() * 25)); const name = lorem.slice(0, words).join(' '); items.push({ id: i, name, height: Math.max(32, words * 2) }); } else { items.push({ id: i, name: `Item ${i}`, height: 32 }); } } return items; }; const generateGridItems = (count) => { const albumOptions = [ { image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60', title: 'Euphoric Echoes', artist: 'Luna Solstice' }, { image: 'https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60', title: 'Neon Dreamscape', artist: 'Electra Skyline' }, { image: 'https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60', title: 'Cosmic Serenade', artist: 'Orion </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> s Symphony' }, { image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60', title: 'Melancholy Melodies', artist: 'Violet Mistral' }, { image: 'https://images.unsplash.com/photo-1608433319511-dfe8ea4cbd3c?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60', title: 'Rhythmic Illusions', artist: 'Mirage Beats' } ]; const items = []; for (let i = 0; i < count; i++) { items.push({ id: i, ...albumOptions[i % albumOptions.length] }); } return items; }; const generateWaterfallItems = (count) => { const images = [ { image: 'https://images.unsplash.com/photo-1580133318324-f2f76d987dd8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=200&q=80', aspectRatio: 0.6666, title: 'Ficus Lyrata Leaf', user: 'Clay Banks' }, { image: 'https://images.unsplash.com/photo-1737100522891-e8946ac97fd1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=200&q=80', aspectRatio: 0.6666, title: 'Beach of Italy', user: 'Alan Bajura' }, { image: 'https://images.unsplash.com/photo-1738249034651-1896f689be58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=200&q=80', aspectRatio: 1.3333, title: 'Winding Forest Road', user: 'Artem Stoliar' }, { image: 'https://images.unsplash.com/photo-1738189669835-61808a9d5981?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=200&q=80', aspectRatio: 0.6669, title: 'Aurora Over Forest', user: 'Janosch Diggelmann' }, { image: 'https://images.unsplash.com/photo-1738168601630-1c1f3ef5a95a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=200&q=80', aspectRatio: 1.3353, title: 'Blue Firework', user: 'Janosch Diggelmann' } ]; const items = []; for (let i = 0; i < count; i++) { const baseImage = images[i % images.length]; items.push({ id: i, ...baseImage, title: `${baseImage.title} ${i + 1}` }); } return items; }; const generateTableItems = (count) => { const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']; const items = []; for (let i = 0; i < count; i++) { items.push({ id: i, name: `User ${i + 1}`, email: `user${i + 1}@example.com`, status: statuses[i % statuses.length] }); } return items; }; // Virtual scrolling implementation class VirtualScroller { constructor(container, itemHeight, renderItem, totalItems) { this.container = container; this.itemHeight = itemHeight; this.renderItem = renderItem; this.totalItems = totalItems; this.visibleItems = []; this.selectedItems = new Set(); this.multiselect = true; this.container.addEventListener('scroll', () => this.updateVisibleItems()); this.container.addEventListener('click', (e) => this.handleClick(e)); this.container.addEventListener('keydown', (e) => this.handleKeydown(e)); this.updateVisibleItems(); } updateVisibleItems() { const scrollTop = this.container.scrollTop; const containerHeight = this.container.clientHeight; const startIndex = Math.floor(scrollTop / this.itemHeight); const endIndex = Math.min(this.totalItems - 1, Math.ceil((scrollTop + containerHeight) / this.itemHeight)); this.visibleItems = []; for (let i = startIndex; i <= endIndex; i++) { this.visibleItems.push(i); } this.render(); this.updateStats(); } render() { const fragment = document.createDocumentFragment(); this.visibleItems.forEach(index => { const item = this.renderItem(index, this.selectedItems.has(index)); item.style.position = 'absolute'; item.style.top = `${index * this.itemHeight}px`; item.dataset.index = index; fragment.appendChild(item); }); this.container.innerHTML = ''; this.container.appendChild(fragment); this.container.style.height = `${this.totalItems * this.itemHeight}px`; this.container.style.position = 'relative'; } handleClick(e) { const item = e.target.closest('[data-index]'); if (!item) return; const index = parseInt(item.dataset.index); if (this.multiselect && (e.ctrlKey || e.metaKey)) { if (this.selectedItems.has(index)) { this.selectedItems.delete(index); } else { this.selectedItems.add(index); } } else { this.selectedItems.clear(); this.selectedItems.add(index); } this.render(); this.updateStats(); } handleKeydown(e) { if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const direction = e.key === 'ArrowDown' ? 1 : -1; const currentIndex = Math.max(...this.selectedItems) || 0; const newIndex = Math.max(0, Math.min(this.totalItems - 1, currentIndex + direction)); if (!this.multiselect || !e.shiftKey) { this.selectedItems.clear(); } this.selectedItems.add(newIndex); // Scroll to keep item visible const itemTop = newIndex * this.itemHeight; const itemBottom = itemTop + this.itemHeight; const scrollTop = this.container.scrollTop; const containerHeight = this.container.clientHeight; if (itemTop < scrollTop) { this.container.scrollTop = itemTop; } else if (itemBottom > scrollTop + containerHeight) { this.container.scrollTop = itemBottom - containerHeight; } this.render(); this.updateStats(); } } updateStats() { // Override in subclasses } setMultiselect(enabled) { this.multiselect = enabled; if (!enabled && this.selectedItems.size > 1) { const first = this.selectedItems.values().next().value; this.selectedItems.clear(); if (first !== undefined) { this.selectedItems.add(first); } this.render(); this.updateStats(); } } } // List implementation class ListVirtualizer extends VirtualScroller { constructor(container, items, variableHeight = false) { const itemHeight = variableHeight ? 50 : 32; // Average height for variable super(container, itemHeight, (index, selected) => this.renderListItem(index, selected), items.length); this.items = items; this.variableHeight = variableHeight; } renderListItem(index, selected) { const item = this.items[index]; const element = document.createElement('div'); element.className = `virtual-item ${selected ? 'selected' : ''}`; element.textContent = item.name; element.tabIndex = 0; if (this.variableHeight) { element.style.height = `${item.height}px`; element.style.whiteSpace = 'normal'; element.style.wordWrap = 'break-word'; } return element; } updateStats() { document.getElementById('list-visible-count').textContent = this.visibleItems.length; document.getElementById('list-selected-count').textContent = this.selectedItems.size; } } // Grid implementation class GridVirtualizer { constructor(container, items) { this.container = container; this.items = items; this.selectedItems = new Set(); this.multiselect = true; this.container.addEventListener('click', (e) => this.handleClick(e)); this.render(); } render() { const fragment = document.createDocumentFragment(); this.items.forEach((item, index) => { const element = this.renderGridItem(item, index, this.selectedItems.has(index)); element.dataset.index = index; fragment.appendChild(element); }); this.container.innerHTML = ''; this.container.appendChild(fragment); this.updateStats(); } renderGridItem(item, index, selected) { const element = document.createElement('div'); element.className = `virtual-grid-item ${selected ? 'selected' : ''}`; element.innerHTML = ` <img src="${item.image}" alt="${item.title}" loading="lazy"> <div class="title">${item.title}</div> <div class="description">${item.artist}</div> `; return element; } handleClick(e) { const item = e.target.closest('[data-index]'); if (!item) return; const index = parseInt(item.dataset.index); if (this.multiselect && (e.ctrlKey || e.metaKey)) { if (this.selectedItems.has(index)) { this.selectedItems.delete(index); } else { this.selectedItems.add(index); } } else { this.selectedItems.clear(); this.selectedItems.add(index); } this.render(); } updateStats() { const visibleItems = this.container.querySelectorAll('.virtual-grid-item').length; document.getElementById('grid-visible-count').textContent = visibleItems; document.getElementById('grid-selected-count').textContent = this.selectedItems.size; } setMultiselect(enabled) { this.multiselect = enabled; if (!enabled && this.selectedItems.size > 1) { const first = this.selectedItems.values().next().value; this.selectedItems.clear(); if (first !== undefined) { this.selectedItems.add(first); } this.render(); } } } // Waterfall implementation class WaterfallVirtualizer { constructor(container, items) { this.container = container; this.items = items; this.selectedItems = new Set(); this.multiselect = true; this.columns = 3; this.container.addEventListener('click', (e) => this.handleClick(e)); this.render(); } render() { const columnsContainer = this.container.querySelector('.waterfall-columns'); columnsContainer.innerHTML = ''; // Create columns const columns = []; for (let i = 0; i < this.columns; i++) { const column = document.createElement('div'); column.className = 'waterfall-column'; columns.push(column); columnsContainer.appendChild(column); } // Distribute items to columns this.items.forEach((item, index) => { const columnIndex = index % this.columns; const element = this.renderWaterfallItem(item, index, this.selectedItems.has(index)); element.dataset.index = index; columns[columnIndex].appendChild(element); }); this.updateStats(); } renderWaterfallItem(item, index, selected) { const element = document.createElement('div'); element.className = `waterfall-item ${selected ? 'selected' : ''}`; element.innerHTML = ` <img src="${item.image}" alt="${item.title}" loading="lazy" style="aspect-ratio: ${item.aspectRatio}"> <div class="content"> <div class="title">${item.title}</div> <div class="description">${item.user}</div> </div> `; return element; } handleClick(e) { const item = e.target.closest('[data-index]'); if (!item) return; const index = parseInt(item.dataset.index); if (this.multiselect && (e.ctrlKey || e.metaKey)) { if (this.selectedItems.has(index)) { this.selectedItems.delete(index); } else { this.selectedItems.add(index); } } else { this.selectedItems.clear(); this.selectedItems.add(index); } this.render(); } updateStats() { const visibleItems = this.container.querySelectorAll('.waterfall-item').length; document.getElementById('waterfall-visible-count').textContent = visibleItems; document.getElementById('waterfall-selected-count').textContent = this.selectedItems.size; } setMultiselect(enabled) { this.multiselect = enabled; if (!enabled && this.selectedItems.size > 1) { const first = this.selectedItems.values().next().value; this.selectedItems.clear(); if (first !== undefined) { this.selectedItems.add(first); } this.render(); } } } // Table implementation class TableVirtualizer extends VirtualScroller { constructor(container, items) { const bodyContainer = container.querySelector('#virtual-table-body'); super(bodyContainer, 32, (index, selected) => this.renderTableRow(index, selected), items.length); this.items = items; this.allSelected = false; // Handle header checkbox const selectAllCheckbox = document.getElementById('table-select-all'); selectAllCheckbox.addEventListener('change', () => this.toggleSelectAll()); } renderTableRow(index, selected) { const item = this.items[index]; const element = document.createElement('div'); element.className = `virtual-table-row ${selected ? 'selected' : ''}`; element.innerHTML = ` <div class="virtual-table-cell"> <input type="checkbox" ${selected ? 'checked' : ''} data-row-checkbox> </div> <div class="virtual-table-cell">${item.id + 1}</div> <div class="virtual-table-cell">${item.name}</div> <div class="virtual-table-cell">${item.email}</div> <div class="virtual-table-cell">${item.status}</div> `; return element; } handleClick(e) { if (e.target.hasAttribute('data-row-checkbox')) { const item = e.target.closest('[data-index]'); if (item) { const index = parseInt(item.dataset.index); if (this.selectedItems.has(index)) { this.selectedItems.delete(index); } else { this.selectedItems.add(index); } this.render(); this.updateStats(); this.updateSelectAllState(); } return; } super.handleClick(e); this.updateSelectAllState(); } toggleSelectAll() { const selectAllCheckbox = document.getElementById('table-select-all'); if (selectAllCheckbox.checked) { for (let i = 0; i < this.totalItems; i++) { this.selectedItems.add(i); } } else { this.selectedItems.clear(); } this.render(); this.updateStats(); } updateSelectAllState() { const selectAllCheckbox = document.getElementById('table-select-all'); selectAllCheckbox.checked = this.selectedItems.size === this.totalItems; selectAllCheckbox.indeterminate = this.selectedItems.size > 0 && this.selectedItems.size < this.totalItems; } updateStats() { document.getElementById('table-visible-count').textContent = this.visibleItems.length; document.getElementById('table-selected-count').textContent = this.selectedItems.size; } } // Horizontal implementation class HorizontalVirtualizer { constructor(container, items) { this.container = container; this.items = items; this.selectedItems = new Set(); this.multiselect = true; this.container.addEventListener('click', (e) => this.handleClick(e)); this.render(); } render() { const fragment = document.createDocumentFragment(); this.items.forEach((item, index) => { const element = this.renderHorizontalItem(item, index, this.selectedItems.has(index)); element.dataset.index = index; fragment.appendChild(element); }); this.container.innerHTML = ''; this.container.appendChild(fragment); this.updateStats(); } renderHorizontalItem(item, index, selected) { const element = document.createElement('div'); element.className = `horizontal-item ${selected ? 'selected' : ''}`; element.textContent = item.name; return element; } handleClick(e) { const item = e.target.closest('[data-index]'); if (!item) return; const index = parseInt(item.dataset.index); if (this.multiselect && (e.ctrlKey || e.metaKey)) { if (this.selectedItems.has(index)) { this.selectedItems.delete(index); } else { this.selectedItems.add(index); } } else { this.selectedItems.clear(); this.selectedItems.add(index); } this.render(); } updateStats() { const visibleItems = this.container.querySelectorAll('.horizontal-item').length; document.getElementById('horizontal-visible-count').textContent = visibleItems; document.getElementById('horizontal-selected-count').textContent = this.selectedItems.size; } setMultiselect(enabled) { this.multiselect = enabled; if (!enabled && this.selectedItems.size > 1) { const first = this.selectedItems.values().next().value; this.selectedItems.clear(); if (first !== undefined) { this.selectedItems.add(first); } this.render(); } } } // Initialize virtualizers let listVirtualizer, gridVirtualizer, waterfallVirtualizer, tableVirtualizer, horizontalVirtualizer; function initializeVirtualizers() { // List const listItems = generateListItems(5000); listVirtualizer = new ListVirtualizer(document.getElementById('virtual-list'), listItems); // Grid const gridItems = generateGridItems(1000); gridVirtualizer = new GridVirtualizer(document.getElementById('virtual-grid'), gridItems); // Waterfall const waterfallItems = generateWaterfallItems(500); waterfallVirtualizer = new WaterfallVirtualizer(document.getElementById('waterfall-container'), waterfallItems); // Table const tableItems = generateTableItems(1000); tableVirtualizer = new TableVirtualizer(document.getElementById('virtual-table'), tableItems); // Horizontal const horizontalItems = generateListItems(200); horizontalVirtualizer = new HorizontalVirtualizer(document.getElementById('horizontal-list'), horizontalItems); } // Tab functionality function showTab(tabName) { // Hide all tabs document.querySelectorAll('.tab-content').forEach(tab => { tab.style.display = 'none'; }); // Remove active class from all buttons document.querySelectorAll('.tab-button').forEach(button => { button.classList.remove('active'); }); // Show selected tab document.getElementById(`${tabName}-tab`).style.display = 'block'; // Add active class to clicked button event.target.classList.add('active'); } // Control functions function toggleListMultiselect() { const enabled = document.getElementById('list-multiselect').checked; listVirtualizer.setMultiselect(enabled); } function toggleListVariableHeight() { const enabled = document.getElementById('list-variable-height').checked; const listItems = generateListItems(5000, enabled); listVirtualizer = new ListVirtualizer(document.getElementById('virtual-list'), listItems, enabled); } function toggleGridMultiselect() { const enabled = document.getElementById('grid-multiselect').checked; gridVirtualizer.setMultiselect(enabled); } function toggleWaterfallMultiselect() { const enabled = document.getElementById('waterfall-multiselect').checked; waterfallVirtualizer.setMultiselect(enabled); } function toggleTableMultiselect() { const enabled = document.getElementById('table-multiselect').checked; tableVirtualizer.setMultiselect(enabled); } function toggleTableSelectAll() { // Handled by TableVirtualizer } function toggleHorizontalMultiselect() { const enabled = document.getElementById('horizontal-multiselect').checked; horizontalVirtualizer.setMultiselect(enabled); } // Initialize when page loads document.addEventListener('DOMContentLoaded', initializeVirtualizers); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">