Virtualization ​

Benefits of Using Virtualization ​

• Improved Performance: Render thousands of items without lag
• Reduced Memory Usage: Only mount DOM nodes for visible items
• Better User Experience: Fast initial load times and responsive interactions

Customization Options ​

All virtualizer (Combobox, Listbox, and Tree) components offer the following props and customization:

• Custom item rendering: Flexibility to render complex item structures
• estimateSize: Set estimate item heights for static or dynamic item
• overscan: Control the number of items rendered outside the visible area
• textContent: Text content for each item to achieve type-ahead feature

Usage ​

Here's a few important note to make sure virtualization works!

1. A fixed height/max-height wrapping <Virtualizer />.
2. Consistent item height, and set the estimateSize props appropriately.
3. Set textContent props to make sure type-ahead acceessibility.

Example ​

<script setup>
import { ComboboxContent, ComboboxItem, ComboboxRoot, ComboboxViewport, ComboboxVirtualizer } from 'radix-vue'

const items = [
  // … large array of items
]
</script>

<template>
  <ComboboxRoot>
    …
    <ComboboxContent>
      <!-- Make sure to set a height for Virtualizer's parent element -->
      <ComboboxViewport class="max-h-80 overflow-y-auto">
        <ComboboxVirtualizer
          v-slot="{ option }"
          :options="items"
          :estimate-size="25"
          :text-content="(opt) => opt.label"
        >
          <ComboboxItem :value="option">
            {{ option.label }}
          </ComboboxItem>
        </ComboboxVirtualizer>
      </ComboboxViewport>
    </ComboboxContent>
  </ComboboxRoot>
</template>