List
Compact records with leading and trailing slots, named row parts, loading skeletons and optional virtualization. Import from @flabbergasted-ai/react for desktop, or /mobile for touch targets.
Records
- MigrationPlatform
- Capacity reviewDraft
<List aria-label="Projects"> <ListItem primary="Migration" secondary="Platform" render={<a href="/projects/migration" />} /> <ListItem primary="Capacity review" trailing={<Badge>Draft</Badge>} /></List>Virtualized · 10,000 records
Use items, renderItem and a stable getItemKey for lazy row rendering. Only the visible rows and buffer mount. Heights are measured, including wrapped labels. Arrow keys, Home and End move between interactive rows; the focused row stays mounted during scrolling. renderItem returns a ListItem or inner content, not an additional li or SwipeAction wrapper.
10,000 records · Selected: None
<List items={records} getItemKey={(record) => record.id} virtualized maxHeight={320} estimatedRowHeight={44} overscan={6} renderItem={(record) => <ListItem primary={record.label} onClick={() => open(record)} />}/>Loading, empty, error and stale
No projects yet
Create a project to start tracking work.
Could not load projects
Reload the view to try again.
- MigrationLast updated 10 minutes agoStale
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
items / renderItem / getItemKey | T[] / function / function | — | Lazy record rendering with stable row identity; children remain supported. |
virtualized | boolean | false | Window rows using TanStack Virtual. |
maxHeight | number | 480 | Scroll viewport in px; defaults to 480 only when virtualized. |
estimatedRowHeight / overscan | number | 44 / 8 | Initial row-height estimate and buffer rows; actual heights are measured. |
loading / skeletonCount | boolean / number | false / 6 | Loading skeletons with aria-busy. |
ListItem.primary / secondary | ReactNode | — | Record title and supporting text. |
ListItem.leading / trailing | ReactNode | — | Icons, avatars, labelled status or actions. |
ListItem.render / onClick | ReactElement / function | — | Link or button row with keyboard focus and optional chevron. |