Kanban Component

<Kanban

    defaultColumns={ [ { id , title , items : [...] } , ... ] }

    renderCard={ card => <KanbanCard title={ card.title } /> }

/>

// cards reorder within a column and move across columns, even empty ones

<Kanban

    reorderableColumns

    defaultColumns={ columns }

    onChange={ ( next , change ) => ... }

/>

// change.type : 'card' | 'column' — column moves carry { column , fromIndex , toIndex }

// renderCard composes freely with the library components

renderCard={ card => (

    <KanbanCard><Avatar ... /><Badge ... /></KanbanCard>

)}

<Kanban

    columns={ board } onChange={ next => setBoard( next ) }

    renderFooter={ column => <Button onClick={ () => addCard( column.id ) }>Add</Button> }

/>

// adding / removing cards is plain setState — the board is your data

<Kanban

    columns={ board }

    onChange={ ( next , change ) => setBoard( next ) }

    renderCard={ card => <KanbanCard ... /> }

/>

// change = { item , fromColumn , toColumn , fromIndex , toIndex }

<Kanban

    defaultColumns={ columns }

    onChange={ ( next , change ) => api.moveCard( change ) }

/>

// onChange may return a promise : a rejection restores the previous board