IssueList

A dense issue list in the shape of Linear's "My Issues": no header row and no borders, one line per issue, under tinted group bars that fold away (icon, label, count and a trailing action). You map each item to a set of row slots with renderRow, and crisp owns the layout, truncation, the done styling, the selection checkbox and the keyboard.

A row reads left to right: priority, id, state, title, labels (the first maxLabels, then a MoreCount), then estimate (EstimateChip), due (DueDate in the linear appearance) and assignees. Every slot is optional except title, and the marks (a PriorityIcon, a StateBadge) are yours to supply, so each can be its own picker. The key is drawn as a RecordKey.

Installation

npm install @crisp-ui-kit/crisp

Props

IssueList also accepts every <div> attribute except children and onSelect.

IssueRowSlots

What renderRow returns for one item.

Notes

• Groups. groupBy returns a string (the key) or { key, label, icon, color }. groupOrder fixes the order, and a key with no items still shows its heading. collapsedGroups and onCollapsedGroupsChange control which groups are folded, with the same contract as DataTable's grouping. The group bars are inset 8px from each side with a 2px gap; set --crisp-issuelist-group-inset and --crisp-issuelist-group-gap on the list to change that, and 0 makes them flush.
• Keyboard. Each row is a focus stop. ArrowUp and ArrowDown move between rows, Enter calls onRowClick, and Space toggles selection when selectable. A click on a button, link or checkbox inside a row belongs to that control and does not open the row. The focused row draws a 2px inset ring on :focus-visible.
• Identifier width. The key column is 72px (--crisp-issuelist-key-width), which holds TASK-9999; raise it for longer keys. A string id also becomes the key's title.
• Density. comfortable rows are 44px tall (default), compact rows 36px.