'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
VirtualList
A list that only renders what is on screen, for thousands of rows.
Ant Design: List virtual
import { VirtualList } from '@alea/ui';
Examples
Ten thousand rows
Only the visible rows are in the page; scrolling and typeahead still work.
Props
VirtualList props
A list that only renders what is on screen, for thousands of rows (MUI/Mantine virtualized lists).
| Prop | Type | Default | Description |
|---|---|---|---|
aria-labelrequired | string | - | Name for screen readers when there is no visible label. |
childrenrequired | (item: T) => ReactNode | - | Renders the text of an item. |
itemsrequired | T[] | - | The items; each needs an id. |
textValuerequired | (item: T) => string | - | Text for typeahead and screen readers. |
height | number | 360 | Visible height in px. Default 360. |
onAction | ((key: Key) => void) | - | Called with the id when an item is opened (Enter or click). |
rowHeight | number | 44 | Row height in px. Default 44. |
selectionMode | "single" | "multiple" | "none" | 'none' | none (default), single or multiple. |
Accessibility
- A listbox that keeps the full count (aria-setsize) even when rows are not in the page.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Move between items |
| Home / End | First or last item |
| Typing | Jumps to a matching item |
Do and don't
Do
- Use it from a few hundred items on.
- Keep rows the same height (rowHeight).
Don't
- Don't use it for short lists: a normal ListView is simpler.
- Don't put expanding content in rows.