Sortable groups
Rows in labelled groups: reorder by drag, move between groups, and drag in from a separate list.
When to use it
The Kanban’s vertical sibling, for editors such as a menu builder or fields in sections. Pointer, touch (press and hold) and keyboard (Space on the handle, arrows, Space) all work. An id appears once across the groups, so dropping one that is already placed moves it. Give each row buttons for the same moves (up, down, remove) as well: a drag should never be the only way.
Options
Everything you can pass to Sortable groups.
| Prop | Type | Default | What it does |
|---|---|---|---|
| groups | SortableGroup[] | — | Provider. { id, label, items } per group; item ids unique across groups. |
| onChange | (groups) => void | — | Provider. The groups after a drop; not called when nothing moved. |
| renderOverlay | (id) => ReactNode | — | Provider. What follows the pointer while dragging. |
| getItemLabel | (id) => string | the id | Provider. Names for screen-reader announcements. |
| renderItem | (id, groupId) => ReactNode | — | List. A row’s content; the drag handle is the component’s. |
| renderItemActions | (id, groupId) => ReactNode | — | List. Row buttons; pressing them never starts a drag. |
| renderGroupHeader | (group, index) => ReactNode | group.label | List. Name, rename field, group buttons. |
| emptyLabel | string | 'Drop here' | List. Shown in an empty group and in every group while dragging. |
| placeInGroups | (groups, id, groupId, index) => groups | — | Pure helper for moving an item with a button instead of a drag. |