revido kit
Start building
← All components
data-display / stable

ListView

Work-item list (GridList) with 36px rows and trailing property slots.

LIVE PREVIEW
Loading preview…

When to use

  • Issue / task / lead lists with inline status and assignee.
  • Keyboard-navigable selectable rows (J/K in the app layer).

Consider an alternative

  • Dense multi-column data — use DataTable.
  • Kanban — use the board patterns.

Import

import { ListView } from '@revido-llc/kit';

Keyboard interaction

  • ↑ / ↓ — move between rows
  • Enter / Space — activate the focused row
  • Shift+↑ / ↓ — extend selection (multi)

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

children (required)ReactNode | ((item: T) => ReactNode)—
classNamestring—
density"default" | "compact""default"Dense 36px rows (default) matching DESIGN.md list density.
autoFocusboolean | FocusStrategy—Whether to auto focus the gridlist or an option.
defaultSelectedKeys"all" | Iterable<Key>—The initial selected keys in the collection (uncontrolled).
dependenciesreadonly any[]—Values that should invalidate the item cache when using dynamic collections.
disabledBehaviorDisabledBehavior'all'Whether `disabledKeys` applies to all interactions, or only selection.
disabledKeysIterable<Key>—The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
disallowEmptySelectionboolean—Whether the collection allows empty selection.
disallowTypeAheadbooleanfalseWhether typeahead navigation is disabled.
dragAndDropHooksDragAndDropHooks<NoInfer<T>>—The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the GridList.
escapeKeyBehavior"clearSelection" | "none"'clearSelection'Whether pressing the escape key should clear selection in the grid list or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
itemsIterable<T>—Item objects in the collection.
keyboardNavigationBehavior"arrow" | "tab"'arrow'Whether keyboard navigation to focusable elements within grid list items is via the left/right arrow keys or the tab key.
onAction((key: Key) => void)—Handler that is called when a user performs an action on an item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.
orientationOrientation'vertical'The primary orientation of the items. Usually this is the direction that the collection scrolls.
renderDOMRenderFunction<"div", GridListRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
renderEmptyState((props: GridListRenderProps) => ReactNode)—Provides content to display when there are no items in the list.
selectedKeys"all" | Iterable<Key>—The currently selected keys in the collection (controlled).
selectionBehaviorSelectionBehavior'toggle'How multiple selection should behave in the collection.
selectionModeSelectionMode"single"The type of selection that is allowed in the collection.
shouldSelectOnPressUpboolean—Whether selection should occur on press up instead of press down.
UNSTABLE_focusOnEntry"first" | "last"—Which item in the collection to focus when tabbing into the collection. Overrides default roving tab index like behavior.

Related exports

ListRow, ListRowGroup

Examples

With property slots

<ListView aria-label="Tasks" items={tasks} selectionMode="single">
  {(item) => (
    <ListRow
      id={item.id}
      title={item.title}
      trailing={<StatusLabel category={item.category}>{item.category}</StatusLabel>}
    />
  )}
</ListView>

Grouped

<ListRowGroup label="In progress" count={3} />
<ListView aria-label="In progress" items={inProgress}>…</ListView>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<ListView aria-label="Drafts"><ListRow id="draft" title="Draft proposal" /></ListView>

Related components