Sortable
Drag-and-drop list built on @dnd-kit, usually paired with ListItem drag handles.
Drag-and-drop list built on @dnd-kit, usually paired with ListItem drag handles.
import { SortableList, SortableItem, arrayMove } from "@coss/ui/shared/sortable";Example
Composition matches the workflow list: ListItemSpanningTrigger carries sortableListeners, and the grip handle appears when you hover the row (same as product — handles stay hidden until hover). Reuse the same row component for renderOverlay, passing isOverlay on ListItem.
apps/web · workflow list · hover row to reveal drag handle
Booking reminder
Drag by the title or grip handle.
Follow-up SMS
Drag by the title or grip handle.
No-show follow-up
Drag by the title or grip handle.
Call sites
| File | Notes |
|---|---|
apps/web/modules/ee/workflows/components/WorkflowListPage.tsx | Workflows |
apps/web/modules/event-types/views/event-types-listing-view.tsx | Event types |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/event-types | Drag-reorder event types |
/workflows | Drag-reorder workflows |
Source
On This Page