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.

Requested In Progress Completed Confirm Ports Availability Infrastructure Security Remove deprecated API Bug with rendering Biz Dev Design Add 'Call to Action' to header Help center configuration Strategy Kick off documents Biz Dev Upgrade babel Infrastructure Fix CSS classes QA/QC Write tests QA/QC

Feature Packed

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!

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.

Fully Customizable

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

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; }

Looks Great In Any Screen Size

Responsiveness is built into the core and you can filter out less important columns to focus on the relevant details on small screens.

Ready to get started?