Tasks - Board

These boards use UiDraggable (Sortable.js under the hood) with a shared group, so cards move between columns. Each board keeps a local copy of its typed initial prop, so dragging never changes the data you passed in. Replace the local state with calls to your API in the change event.

Drag and drop is a pointer gesture, so the classic board adds a move menu on every card as a keyboard and screen reader alternative. Do the same in your own boards. All names and tasks are fictional and the avatars are placeholders.

Style One

Classic three column board. Drag cards between columns, move them with the menu, add a card inline and see counts, labels, due dates and assignees.

Style Two

Swimlanes. Rows are priorities and columns are statuses, with a draggable list in every cell. Lanes can be collapsed.

Style Three

Compact board with fixed width columns in a keyboard scrollable region, dense cards with a priority bar, comment and file counts and a drag handle.

Style Four

Collapsible columns. Each column folds into a slim vertical strip with its count, so the columns you care about get more room.

Style Five

Work in progress limits. Headers show count and limit, columns turn amber when full and refuse more cards until something moves on.

Style Six

Board with search, assignee and label filters, a result count and an empty message. Cards that do not match are hidden but keep their place.