Kanban <Kanban> is a draggable board component with configurable columns and item cards. Used for status pipelines, dispatch boards, and any column-based workflow.
<Kanban> is a board component with configurable columns and draggable item cards. Items move between columns by drag-and-drop. Used for status pipelines (To Do → In Progress → Done), dispatch boards, order workflow boards, and any column-based UI.
< Kanban @ columns= {{ this.columns }} @ items= {{ this.items }} @ groupBy= "status" @ onItemDrop= {{ this.handleDrop }} @ onItemClick= {{ this.openItem }} > < :card as |item|> < div class= "font-semibold" > {{ item.title }} </ div > < div class= "text-xs text-gray-500" > {{ item.description }} </ div > </ :card > </ Kanban > Argument Type Description @columnsarray Column definitions — { id, label, color? } @itemsarray Items to render @groupBystring Property path on each item to determine its column @editableboolean Enable drag-and-drop (default true) @onItemDrop(item, fromColumn, toColumn)Called when an item is moved between columns @onItemClick(item)Called when an item is clicked @onColumnDrop(column, fromIndex, toIndex)Called when a column is reordered
Block Purpose :cardCustom item card renderer (yields the item) :column-headerCustom column header (yields the column)
{{!-- Order dispatch board --}} < Kanban @ columns= {{ array ( hash id = "created" label = "New" ) ( hash id = "dispatched" label = "Dispatched" ) ( hash id = "started" label = "In Transit" ) ( hash id = "completed" label = "Delivered" ) }} @ items= {{ this.orders }} @ groupBy= "status" @ onItemDrop= {{ this.advanceOrder }} @ onItemClick= {{ this.openOrder }} > < :card as |order|> < Pill @ resource= {{ order.driver }} /> < div class= "text-xs" > {{ order.public_id }} </ div > </ :card > </ Kanban >
