Skip to content

Virtual Scroller Kit

Виртуальные список, таблица, грид, дерево и select для Vue 3 — динамические высоты строк, группировка с анимацией, sticky-заголовки, бесконечная прокрутка, поддержка RTL.

Виртуализация с динамическими высотами и motion blur

VirtualList и VirtualGrid рендерят только видимые элементы, поддерживая списки с миллионом записей. ResizeObserver автоматически измеряет реальную высоту каждой строки, а опция motion blur добавляет размытие, пропорциональное скорости прокрутки, для визуальной плавности. Поддерживаются горизонтальная и вертикальная прокрутка, внешний контейнер и оконный режим.

Группировка, анимации и sticky-заголовки

GroupedVirtualList отображает секции с коллапсируемыми группами и плавными CSS-анимациями раскрытия/схлопывания. Опция stickyGroupHeaders фиксирует заголовок текущей группы поверх списка. Встроенный VirtualScrollbar даёт кастомный скроллбар с изменяемыми размерами и цветами через CSS-переменные, а RTL-поддержка адаптирует макет автоматически.

Виртуальная таблица, сетка, дерево и select

VirtualTable с фиксированными колонками, сортировкой (в том числе мульти-), изменяемым размером и порядком колонок, закреплёнными рядами и бесконечной подгрузкой. VirtualTree поддерживает ленивую загрузку дочерних узлов с настраиваемым отступом. VirtualSelect виртуализирует выпадающий список с поиском, асинхронной загрузкой и кастомными слотами.

Композаблы для клавиатуры, перетаскивания и выделения

useVirtualKeyboardNav добавляет навигацию стрелками, Home/End, PageUp/Down с фокусом и активацией по Enter. useDraggableList реализует drag‑to‑reorder с анимированным смещением соседних элементов, призрачной копией и автоскроллом. useRowSelection управляет выбором строк с поддержкой Shift+клик, полным выделением и сбросом.

SSR-безопасность, производительность и тонкая настройка

Компоненты безопасны для SSR: первые N строк рендерятся на сервере, а гидратация происходит без скачка. PositionManager с сегментным деревом обеспечивает O(log n) обновлений и запросов. Восстановление позиции прокрутки, anchor‑компенсация при изменении высоты строк, пул переиспользуемых DOM-узлов и кастомный скроллбар — всё для максимальной производительности.