data-display / stable

WorkItemRow

Related work items with fixed estimate, progress, status, assignee and priority columns, inline rename and independent controls.

LIVE PREVIEW

Loading preview…

When to use

Child tasks, features, bugs or dependency records inside a record section.
Compact collections that open canonical records and allow quick edits.

Consider an alternative

Selectable collections: use ListView.
Sortable multi-column admin data: use DataTable.

Import

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

Keyboard interaction

↑/↓, Home/End move between record buttons in WorkItemList.
Enter/Space opens the record; Tab reaches sibling controls.
F2 or pencil renames; Enter/blur saves, Escape cancels.

Props

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


item (required)	T	—
actions	ReactNode	—	Quick controls. Use icon PropertySelect controls and actionsAlwaysVisible in compact rows.
actionsAlwaysVisible	boolean	false	Touch always reveals controls, regardless of this desktop override.
compact	boolean	—
identifier	ReactNode	—	Muted, tabular record identifier; kept separate from the title.
leading	ReactNode \| OptionLeading	—	Status, priority, type glyphs or icon pickers; siblings of the open button.
metadata	ReactNode	—	Quiet progress, story points, avatars and read-only status.
onNameChange	((id: string, name: string) => void \| Promise<void>)	—	Canonical rename adapter. Reject to retain the draft and expose retry.
onOpen	((item: T) => void)	—	Omit for a read-only summary without record-button semantics.
reviewer	ReactNode	—
children	ReactNode	—
className	string	—

Related exports

WorkItemList

Examples

Densities

<WorkItemList aria-label="Tasks" compact>
  <WorkItemRow item={task} identifier={task.display_id} onOpen={openTask}
    onNameChange={renameTask} leading={<PropertySelect label="Status" presentation="icon" size="xs" {...statusProps} />}
    metadata={<ProgressPill variant="ghost" value={40} />} actions={quickIconControls} actionsAlwaysVisible />
  <InlineAddRow label="Add task" onCreate={createTask} />
</WorkItemList>

Read-only summary

<WorkItemList aria-label="Feature summary" compact>
  <WorkItemRow item={feature} identifier="APP-1" leading={{ kind: "status", category: "done" }}
    metadata={<Badge size="sm" tone="success">Done</Badge>} />
</WorkItemList>

Always-visible quick actions

<WorkItemRow item={task} onOpen={openTask}
  leading={<PropertySelect label="Status" presentation="icon" size="xs" {...statusProps} />}
  actions={<><PropertySelect label="Priority" presentation="icon" size="xs" {...priorityProps} />
    <PropertySelect label="Assignee" presentation="icon" size="xs" {...assigneeProps} /></>}
  actionsAlwaysVisible />