MiHCM
data/@mihcm/ui·v0.21.0·stable

SortableList

Reorderable list powered by dnd-kit sortable primitives with pointer and keyboard sensors plus a renderItem slot for rich rows.

ConfiguratorExamplesUsageAccessibilityApi

Reorder workflow steps

Use renderItem to keep rows rich while @dnd-kit handles pointer and keyboard drag.

Profile completion

Required

Step 1

Document upload

Required

Step 2

Manager approval

Optional

Step 3
<SortableList items={items} onItemsChange={setItems} renderItem={(item, state) => <WorkflowRow />} />

Horizontal priority rail

Horizontal mode works for compact kanban-like priority ordering.

Required

Profile completion

Required

Document upload

Optional

Manager approval

<SortableList orientation="horizontal" items={items} onItemsChange={setItems} renderItem={renderCard} />