Virtual Scroller Kit
Virtual list, table, grid, tree, and select for Vue 3 — dynamic row heights, grouping with animated collapse, sticky headers, infinite scroll, and RTL support.
Virtualisation with dynamic heights and motion blur
VirtualList and VirtualGrid render only visible elements, supporting lists with a million records. ResizeObserver automatically measures each row’s real height, and the motion blur option adds blur proportional to scroll speed for visual smoothness. Supports horizontal and vertical scrolling, an external container, and window mode.
Grouping, animations, and sticky headers
GroupedVirtualList renders collapsible sections with smooth CSS expand/collapse animations. The stickyGroupHeaders option pins the current group header over the list. The built‑in VirtualScrollbar provides a custom scrollbar with resizable sizes and colours via CSS variables, and RTL support adapts the layout automatically.
Virtual table, grid, tree, and select
VirtualTable with fixed columns, sorting (including multi‑), resizable and reorderable columns, pinned rows, and infinite scrolling. VirtualTree supports lazy loading of children with configurable indentation. VirtualSelect virtualises the dropdown with search, async loading, and custom slots.
Composables for keyboard, drag‑to‑reorder, and selection
useVirtualKeyboardNav adds arrow‑key navigation, Home/End, PageUp/Down with focus and Enter activation. useDraggableList implements drag‑to‑reorder with animated neighbour offsets, a ghost element, and auto‑scroll. useRowSelection manages row selection with Shift+click support, select‑all, and clearing.
SSR safety, performance, and fine‑grained control
Components are SSR‑safe: the first N rows are rendered on the server, and hydration happens without layout shift. The PositionManager with a segment tree provides O(log n) updates and queries. Scroll‑position restoration, anchor compensation on row height changes, a DOM recycling pool, and a custom scrollbar — all for maximum performance.