A row in a list: media, title and description, actions.
Installation
Default
ItemContent · ItemTitle in an ItemList, in a card.
With description
With media
ItemMedia variant='icon'; an Avatar for people.
With actions
A status and a ghost menu button on the right.
Long titles
One line, then an ellipsis. Beside a badge or an icon, the text goes in a span.
Header and footer
ItemHeader and ItemFooter span the full width.
Link
render={<a />}, or a router link: the row highlights on hover and ends in an ItemChevron, which nudges right.
Selected
A selected row takes a quiet fill.
Loading
ItemListSkeleton stands in for the ItemList: the same rows, so the card keeps its height. Reload to see it.
Skeleton rows
description={false} for a title alone; media icon · avatar as the real rows carry.
Virtualized
ItemList virtualized items itemKey: 1,000 rows, only those in view render. Give it a height.
Scrolls with the page
scrollElement: the rows virtualize against what holds the list (the page's scroll panel, a dialog body), so the page keeps one scrollbar.
Loading more
hasMore + onLoadMore; isLoadingMore shows a spinner. Scroll down.