Bryntum TaskBoard

Features

Auto generate columns

This example shows auto generating columns from task values

Filtering tasks per column

This example shows the filtering per column feature of the TaskBoard

Searching in tasks per column

This example demonstrates simple searching for tasks in columns using the FilterBar feature

Column toolbars

This example shows how to customize column toolbars

Configuration panel

This example has a configuration panel that lets you try different TaskBoard settings

Dragging columns

This example shows how to use events to control dragging columns

Dragging tasks

Uses drag events to show a dialog to verify dropping tasks

Filtering tasks, columns & swimlanes

This example shows how to filter columns, swimlanes and tasks on the TaskBoard

Group-by

This example shows how to which field is used to assign a task to a column

Inline task editing

This example shows how to use inline editing in task cards

Responsive layout

This example uses responsive breakpoints to reconfigure the TaskBoard based on its dimensions

Remotely loaded columns

This example shows how to load columns configuration as part of the Project data

Scrolling to tasks, columns & swimlanes

This example shows how to programmatically scroll to tasks, columns and swimlanes

Sorting tasks

This example shows how to sort tasks in the TaskBoard

Sorting tasks per column

This example shows the sorting per column feature of the TaskBoard

Todo list

This example shows how to add a todo list to cards

Undo/redo support

This example shows how to use the undo/redo widget to set up basic undo/redo support

Zooming

This example shows how emulate zooming by changing number of cards per row

Locked column

This example shows how to programmatically lock a column

Charts

Displaying a chart

thin

This example shows how to put small charts inside task board cards, and also a large chart next to it

Basics

Basic setup

This example shows basic setup of the TaskBoard

Big data set

This example has a lot of tasks, and uses partially virtualized rendering to display them quicker

Column for non-matching tasks

This example demonstrates using a special column for tasks not matching any other column

Handling columns

This example shows how to manipulate columns

Handling swimlanes

This example shows basic setup of the TaskBoard using swimlanes

Theme browser

This demo lets you switch between the different themes

Customization

Customized column header menu

This example shows how customize the column header menu

Custom theme

This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done

Customized swimlane content

This example shows how to use a swimlaneRenderer to populate swimlane headers with custom content

Customized task contents using task items

This example shows how to use task items to add additional content to the cards

Customized task editor

This example shows how to customize the task editor, adding a rich text editor for the task description field

Customized task menu

This example shows how to customize the task menu

Customized tooltips

This example shows how to customize the task tooltip

Localization

Shows how to preload a specific locale and localize the application

Integration

Syncing with backend

Shows how to sync with a backend using the built-in crud manager functionality

Web component

This example shows how to use the Custom elements version of the task board

Integrate with Salesforce Lightning

This demo shows how to embed Bryntum Task Board into the Lightning Web Component to use in your salesforce org

Custom build using WebPack

WebPack 5

This very basic demo shows how to use TaskBoardBase and webpack to do a custom build from our sources

Custom thin build using WebPack

WebPack 5

thin

This very basic demo shows how to use TaskBoardBase and webpack to do a custom build from our thin packages

Integrate with Ionic

Ionic 5

Angular 10

TypeScript 3

This demo is based on the Ionic framework and uses the Bryntum wrappers for Angular

Angular

examples/frameworks/angular

Angular 11

Angular 11

TypeScript 4

This demo contains an Angular View Engine component that wraps the Bryntum Kanban board component

Auto generate columns

Angular 13

TypeScript 4

This example shows auto generating columns from task values

Basic thin setup

Angular 18

TypeScript 5

thin

This example shows basic thin setup of the Bryntum TaskBoard

Dragging columns

Angular 13

TypeScript 4

This example shows how to use events to control dragging columns

Locked Column

Angular 18

TypeScript 5

This example shows how to programmatically lock a column in TaskBoard

Customized column header menu

Angular 13

TypeScript 4

This example shows how customize the column header menu

Inline data

Angular 15

TypeScript 4

Shows how to bind inline data to the Angular TaskBoard component

Customized task menu

Angular 17

TypeScript 5

This example shows how to customize the task menu

Undo/redo support

Angular 13

TypeScript 4

This example shows how to use the undo/redo widget to set up basic undo/redo support

React + Vite

examples/frameworks/react-vite

Basic thin setup

React 18

Vite 5

TypeScript 4

thin

This example shows basic thin setup of the Bryntum TaskBoard

Redux data store

React 18

Vite 4

TypeScript 5

This example shows how to use Redux to manage data

JSX Task items

React 18

Vite 4

TypeScript 5

This example shows how to use task items to add additional content to the cards

Customized task menu

React 18

Vite 5

TypeScript 4

This example shows how to customize the task menu

React

examples/frameworks/react

Auto generate columns

React 18

This example shows auto generating columns from task values

Dragging columns

React 16

This example shows how to use events to control dragging columns

Customized column header menu

React 16

This example shows how customize the column header menu

Inline data

React 16

Shows how to bind inline data to the React TaskBoard component

Simple setup

React 16

This demo contains a simple React app which shows a few columns and Kanban tasks

Undo/redo support

React 18

This example shows how to use the undo/redo widget to set up basic undo/redo support

Basic setup with TypeScript

React 17

TypeScript 3

This demo contains the React TaskBoard wrapper and the demo is written in TypeScript

SharePoint Workbench with TypeScript

React 17

TypeScript 4

thin

This demo includes a SPFx web part that uses TypeScript and React

React + Remix

Basic setup

React 18

Remix 2

Vite 5

TypeScript 5

This demo contains the React TaskBoard wrapper and the demo is written in Remix using Typescript

Vue 3 + Vite

examples/frameworks/vue-3-vite

Basic setup

Vue 3

Vite 5

TypeScript 5

This example shows basic setup of the Bryntum TaskBoard

Basic thin setup

Vue 3

Vite 5

TypeScript 5

thin

This example shows basic setup of the Bryntum TaskBoard

Customized task menu

Vue 3

Vite 5

TypeScript 4

This example shows how to customize the task menu

Vue 3

examples/frameworks/vue-3

Auto generate columns

Vue 3

This example shows auto generating columns from task values

Dragging columns

Vue 3

This example shows how to use events to control dragging columns

Customized column header menu

Vue 3

This example shows how customize the column header menu

Inline data

Vue 3

Shows how to bind inline data to the React TaskBoard component

Simple setup

Vue 3

Shows a very basic integration of the Kanban TaskBoard component into a Vue 3 app

Undo/redo support

Vue 3

This example shows how to use the undo/redo widget to set up basic undo/redo support