Bryntum Task Board

A super flexible Kanban board component

Bryntum Task Board is a flexible Kanban web component that helps you visualize and manage your work.

Easy integration with your stack

The Task Board is extremely flexible and allows you to completely customize the rendering & styling of the cards, columns and swimlanes. You can even flip features on or off at runtime thanks to the rich API. Use the link below to try it out!

Try demo

Organize Tasks Into Swimlanes And Columns

Keeping track of tasks in a busy team can be daunting. The Task Board lets you organize tasks by grouping them into swimlanes and any number of columns. Both swimlanes and columns can be collapsed to hide less important tasks and you can use filters to quickly find the tasks that matter the most.

Try demo

Fully Customizable

Bryntum Task Board can be visually customized and styled in many ways.

Ships with five themes and you can easily create your own using our SASS variables
Use the taskRenderer method to show any text or markup inside a card
Configure bodyItems to manage which elements should be shown in a card. Support for showing icons, tags, images and progress bars.

Try demo

Try it out below

Drag the slider to zoom or try the built-in filtering.

To do Doing Done .b-taskboardbase { \-\-taskboard-background : #fff; \-\-taskboard-body-padding : 2em; \-\-taskboard-column-gap : 2em; \-\-taskboard-card-border-top : 5px solid currentColor; \-\-taskboard-column-background : #eee; \-\-taskboard-column-border-radius : 0 0 3px 3px; \-\-taskboard-column-header-border-radius : 3px 3px 0 0; \-\-taskboard-column-header-border-top : var(\-\-taskboard-card-border-top); } .b-taskboard-column.b-inline .b-taskboard-card { min-height : 3em; } .b-micro-cards .b-taskboard-card { background : currentColor; border-top : none; } .b-taskboard-card-body .b-taskboard-text { font-weight : 300; } .b-micro-cards .b-taskboard-resource-avatar-overflow::after, .b-micro-cards .b-resource-avatar { border : 1px solid #fff; } .b-taskboard-card-header { font-weight:bold !important; } .b-taskboard-column:not(.b-large-cards,.b-medium-cards) [data-ref=tags], .b-micro-cards [data-ref=tags] { display : none; }