Plugin Overview #
vlist v2 ships 15 plugins. Each plugin is tree-shaken — only what you import is bundled.
Base (createVList only): 8.1 KB gzipped.
Quick Reference #
| Plugin | Import | Gzipped Delta | Description |
|---|---|---|---|
| a11y | a11y() |
+1.1 KB | Baseline keyboard nav + single-select |
| selection | selection() |
+2.4 KB | Single/multi selection + keyboard nav |
| data | data() |
+4.6 KB | Async data loading + pagination |
| scrollbar | scrollbar() |
+2.0 KB | Custom scrollbar UI |
| sortable | sortable() |
+2.9 KB | Drag-and-drop reordering |
| groups | groups() |
+3.8 KB | Grouped lists with sticky headers |
| scale | scale() |
+3.9 KB | 1M+ items via scroll compression |
| page | page() |
+0.8 KB | Document/window scroll mode |
| snapshots | snapshots() |
+1.3 KB | Scroll save/restore |
| transition | transition() |
+1.8 KB | FLIP-based enter/exit animations |
| autosize | autosize() |
+0.9 KB | Dynamic item measurement |
| Layout | |||
| grid | grid() |
+2.7 KB | 2D grid layout |
| table | table() |
+6.1 KB | Virtualized data table |
| masonry | masonry() |
+3.7 KB | Pinterest-style layout |
| tree | tree() |
+5.4 KB | Virtualized tree view |
Usage #
import { createVList, grid, selection, scrollbar } from "vlist";
const list = createVList(config, [
grid({ columns: 3 }),
selection({ mode: "multiple" }),
scrollbar(),
]);
Plugins are passed as the second argument to createVList. Order in the array does not matter — priorities are fixed internally per plugin.
Compatibility #
Not all plugins can be combined. Layout plugins are mutually exclusive, and some plugins only support flat lists.
| grid | masonry | table | tree | scale | transition | sortable | |
|---|---|---|---|---|---|---|---|
| grid | — | ❌ | ❌ | ❌ | — | ❌ | ❌ |
| masonry | ❌ | — | ❌ | ❌ | — | ❌ | ❌ |
| table | ❌ | ❌ | — | ❌ | — | ❌ | ❌ |
| tree | ❌ | ❌ | ❌ | — | — | — | — |
| scale | — | — | — | — | — | — | ❌ |
| transition | ❌ | ❌ | ❌ | — | — | — | — |
| sortable | ❌ | ❌ | ❌ | — | ❌ | — | — |
All combinations not listed above are ✅ compatible.
Incompatibility reasons:
- grid + masonry / grid + table / masonry + table / tree + any layout — only one layout plugin can be active at a time.
- tree + groups — tree manages its own hierarchy; groups is for flat grouped lists.
- transition + grid/table/masonry — transition uses FLIP animations designed for flat lists only.
- sortable + grid/masonry/table/scale — drag-and-drop reordering requires a flat, fixed-height list.
Priority Order #
Plugins run in a fixed internal priority order (lower number = runs earlier). You do not need to think about this — it is handled automatically regardless of the order you pass plugins to createVList.