Bryntum TaskBoard Examples
Features
This example shows auto generating columns from task values
This example shows the filtering per column feature of the TaskBoard
This example demonstrates simple searching for tasks in columns using the FilterBar feature
This example shows how to customize column toolbars
This example has a configuration panel that lets you try different TaskBoard settings
This example shows how to use events to control dragging columns
Uses drag events to show a dialog to verify dropping tasks
This example shows how to filter columns, swimlanes and tasks on the TaskBoard
This example shows how to change which field is used to assign a task to a column
This example shows how to use inline editing in task cards
This example uses responsive breakpoints to reconfigure the TaskBoard based on its dimensions
Uses `direction : rtl` to adjust TaskBoard for right-to-left environments
This example shows how to load columns configuration as part of the Project data
This example shows how to programmatically scroll to tasks, columns and swimlanes
This example shows how to sort tasks in the TaskBoard
This example shows the sorting per column feature of the TaskBoard
This example shows how to add a todo list to cards
This example shows how to use the undo/redo widget to set up basic undo/redo support
This example shows how to emulate zooming by changing the number of cards per row
This example shows how to programmatically lock a column
This example shows how to work with sparse index in the TaskBoard
AI
Demonstrates the Bryntum AI Assistant integrated with the TaskBoard
Charts
thin
This example shows how to put small charts inside task board cards, and also a large chart next to it
Basics
This example shows basic setup of the TaskBoard
This example has a lot of tasks, and uses partially virtualized rendering to display them quicker
This example demonstrates using a special column for tasks not matching any other column
This example shows how to manipulate columns
This example shows basic setup of the TaskBoard using swimlanes
This demo lets you switch between the different themes
Customization
This example shows how customize the column header menu
This demo has a custom theme, to showcase how you can create your own. Check the resources/ folder to see how it is done
This example shows how to use a swimlaneRenderer to populate swimlane headers with custom content
This example shows how to use task items to add additional content to the cards
This example shows how to customize the task editor, adding a rich text editor for the task description field
This example shows how to customize the task menu
This example shows how to customize the task tooltip
Shows how to preload a specific locale and localize the application
Misc
thin
Comprehensive showcase of all the widgets included in the Bryntum package. Browse through text fields, date pickers, buttons, layouts, and more
Integration
Shows how to sync with a backend using the built-in crud manager functionality
This example shows how to use the Custom elements version of the task board
This demo shows how to embed Bryntum Task Board into the Lightning Web Component to use in your salesforce org
WebPack 5
This very basic demo shows how to use TaskBoardBase and webpack to do a custom build from our sources
WebPack 5
thin
This very basic demo shows how to use TaskBoardBase and webpack to do a custom build from our thin packages
Angular
examples/frameworks/angular
Angular 11
TypeScript 4
This demo contains an Angular View Engine component that wraps the Bryntum Kanban board component
Angular 20
TypeScript 5
This example shows auto generating columns from task values
Angular 22
TypeScript 6
Shows how to sync with a backend using the built-in crud manager functionality
Angular 19
TypeScript 5
thin
This example shows basic thin setup of the Bryntum TaskBoard
Angular 22
TypeScript 6
This example has a lot of tasks, and uses partially virtualized rendering to display them quicker
Angular 22
TypeScript 6
This example demonstrates using a special column for tasks not matching any other column
Angular 22
TypeScript 6
thin
This example shows how to put small charts inside task board cards, and also a large chart next to it
Angular 13
TypeScript 4
This example shows how to use events to control dragging columns
Angular 22
TypeScript 6
This example shows the filtering per column feature of the TaskBoard
Angular 22
TypeScript 6
thin
This example demonstrates simple searching for tasks in columns using the FilterBar feature
Angular 22
TypeScript 6
thin
This example shows the sorting per column feature of the TaskBoard
Angular 22
TypeScript 6
thin
This example shows how to customize column toolbars
Angular 22
TypeScript 6
thin
This example shows how to manipulate columns
Angular 22
TypeScript 6
thin
This example shows how to load columns configuration as part of the Project data
Angular 22
TypeScript 6
thin
This example has a configuration panel that lets you try different TaskBoard settings
Angular 22
TypeScript 6
thin
This demo has a custom theme, to showcase how you can create your own. Check the src/custom.css file to see how it is done
Angular 19
TypeScript 5
This example shows how to programmatically lock a column in TaskBoard
Angular 13
TypeScript 4
This example shows how customize the column header menu
Angular 22
TypeScript 6
This example shows how to filter columns, swimlanes and tasks on the TaskBoard
Angular 22
TypeScript 6
This example shows how to change which field is used to assign a task to a column
Angular 15
TypeScript 4
Shows how to bind inline data to the Angular TaskBoard component
Angular 22
TypeScript 6
Shows how to preload a specific locale and localize the application
Angular 22
TypeScript 6
This example uses responsive breakpoints to reconfigure the TaskBoard based on its dimensions
Angular 22
TypeScript 6
thin
This example shows how to programmatically scroll to tasks, columns and swimlanes
Angular 22
TypeScript 6
thin
This example shows how to use inline editing in task cards
Angular 22
TypeScript 6
thin
This example shows how to sort tasks in the TaskBoard
Angular 22
TypeScript 6
thin
This example shows basic setup of the TaskBoard using swimlanes
Angular 22
TypeScript 6
thin
This example shows how to use a swimlaneRenderer to populate swimlane headers with custom content
Angular 22
TypeScript 6
thin
Uses drag events to show a dialog to verify dropping tasks
Angular 20
TypeScript 5
This example shows how to use Angular components as task items to add content to the cards
Angular 19
TypeScript 5
This example shows how to customize the task menu
Angular 13
TypeScript 4
This example shows how to use the undo/redo widget to set up basic undo/redo support
Angular 22
TypeScript 6
This example shows how to customize the task editor, adding a rich text editor for the task description field
Angular 22
TypeScript 6
This demo lets you switch between the different themes
Angular 22
TypeScript 6
This example shows how to add a todo list to cards
Angular 22
TypeScript 6
This example shows how to customize the task tooltip
Angular 22
TypeScript 6
This example shows how to emulate zooming by changing the number of cards per row
Angular 22
TypeScript 6
Uses `direction : rtl` to adjust TaskBoard for right-to-left environments
React + Vite
examples/frameworks/react-vite
React 19
Vite 8
TypeScript 6
Shows how to sync with a backend using the built-in crud manager functionality
React 18
Vite 5
TypeScript 4
thin
This example shows basic thin setup of the Bryntum TaskBoard
React 19
Vite 8
TypeScript 6
This example has a lot of tasks, and uses partially virtualized rendering to display them quicker
React 19
Vite 8
TypeScript 6
This example demonstrates using a special column for tasks not matching any other column
React 19
Vite 8
TypeScript 6
thin
This example shows how to put small charts inside task board cards, and also a large chart next to it
React 19
Vite 8
TypeScript 6
This example shows the filtering per column feature of the TaskBoard
React 19
Vite 8
TypeScript 6
thin
This example demonstrates simple searching for tasks in columns using the FilterBar feature
React 19
Vite 8
TypeScript 6
thin
This example shows the sorting per column feature of the TaskBoard
React 19
Vite 8
TypeScript 6
thin
This example shows how to customize column toolbars
React 19
Vite 8
TypeScript 6
thin
This example shows how to manipulate columns
React 19
Vite 8
TypeScript 6
thin
This example shows how to load columns configuration as part of the Project data
React 19
Vite 8
TypeScript 6
thin
This example has a configuration panel that lets you try different TaskBoard settings
React 19
Vite 8
TypeScript 6
thin
This demo has a custom theme, to showcase how you can create your own. Check the src/custom.css file to see how it is done
React 19
Vite 8
TypeScript 6
This example shows how to filter columns, swimlanes and tasks on the TaskBoard
React 19
Vite 8
TypeScript 6
This example shows how to change which field is used to assign a task to a column
React 19
Vite 8
TypeScript 6
Shows how to preload a specific locale and localize the application
React 19
Vite 8
TypeScript 6
This example shows how to programmatically lock a column
React 18
Vite 4
TypeScript 5
This example shows how to use Redux to manage data
React 19
Vite 8
TypeScript 6
This example uses responsive breakpoints to reconfigure the TaskBoard based on its dimensions
React 19
Vite 8
TypeScript 6
thin
This example shows how to programmatically scroll to tasks, columns and swimlanes
React 19
Vite 8
TypeScript 6
thin
This example shows how to use inline editing in task cards
React 19
Vite 8
TypeScript 6
thin
This example shows how to sort tasks in the TaskBoard
React 19
Vite 8
TypeScript 6
thin
This example shows basic setup of the TaskBoard using swimlanes
React 19
Vite 8
TypeScript 6
thin
This example shows how to use a swimlaneRenderer to populate swimlane headers with custom content
React 19
Vite 8
TypeScript 6
thin
Uses drag events to show a dialog to verify dropping tasks
React 18
Vite 4
TypeScript 5
This example shows how to use task items to add additional content to the cards
React 18
Vite 5
TypeScript 4
This example shows how to customize the task menu
React 19
Vite 8
TypeScript 6
This example shows how to customize the task editor, adding a rich text editor for the task description field
React 19
Vite 8
TypeScript 6
This demo lets you switch between the different themes
React 19
Vite 8
TypeScript 6
This example shows how to add a todo list to cards
React 19
Vite 8
TypeScript 6
This example shows how to customize the task tooltip
React 19
Vite 8
TypeScript 6
This example shows how to emulate zooming by changing the number of cards per row
React 19
Vite 8
TypeScript 6
Uses `direction : rtl` to adjust TaskBoard for right-to-left environments
React
examples/frameworks/react
React 18
This example shows auto generating columns from task values
React 16
This example shows how to use events to control dragging columns
React 16
This example shows how customize the column header menu
React 16
Shows how to bind inline data to the React TaskBoard component
React 16
This demo contains a simple React app which shows a few columns and Kanban tasks
React 18
This example shows how to use the undo/redo widget to set up basic undo/redo support
React 17
TypeScript 3
This demo contains the React TaskBoard wrapper and the demo is written in TypeScript
React 17
TypeScript 4
thin
This demo includes a SPFx web part that uses TypeScript and React
React + Remix
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 + Nuxt
Vue 3
NuxtJS 4
Vite 5
This example shows basic setup of the TaskBoard in Nuxt
Vue 3 + Vite
examples/frameworks/vue-3-vite
Vue 3
Vite 8
TypeScript 6
Shows how to sync with a backend using the built-in crud manager functionality
Vue 3
Vite 5
TypeScript 5
This example shows basic setup of the Bryntum TaskBoard
Vue 3
Vite 5
TypeScript 5
thin
This example shows basic setup of the Bryntum TaskBoard
Vue 3
Vite 8
TypeScript 6
This example has a lot of tasks, and uses partially virtualized rendering to display them quicker
Vue 3
Vite 8
TypeScript 6
This example demonstrates using a special column for tasks not matching any other column
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to put small charts inside task board cards, and also a large chart next to it
Vue 3
Vite 8
TypeScript 6
This example shows the filtering per column feature of the TaskBoard
Vue 3
Vite 8
TypeScript 6
thin
This example demonstrates simple searching for tasks in columns using the FilterBar feature
Vue 3
Vite 8
TypeScript 6
thin
This example shows the sorting per column feature of the TaskBoard
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to customize column toolbars
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to manipulate columns
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to load columns configuration as part of the Project data
Vue 3
Vite 8
TypeScript 6
thin
This example has a configuration panel that lets you try different TaskBoard settings
Vue 3
Vite 8
TypeScript 6
thin
This demo has a custom theme, to showcase how you can create your own. Check the src/custom.css file to see how it is done
Vue 3
Vite 8
TypeScript 6
This example shows how to filter columns, swimlanes and tasks on the TaskBoard
Vue 3
Vite 8
TypeScript 6
This example shows how to change which field is used to assign a task to a column
Vue 3
Vite 8
TypeScript 6
Shows how to preload a specific locale and localize the application
Vue 3
Vite 8
TypeScript 6
This example shows how to programmatically lock a column
Vue 3
Vite 8
TypeScript 6
This example uses responsive breakpoints to reconfigure the TaskBoard based on its dimensions
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to programmatically scroll to tasks, columns and swimlanes
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to use inline editing in task cards
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to sort tasks in the TaskBoard
Vue 3
Vite 8
TypeScript 6
thin
This example shows basic setup of the TaskBoard using swimlanes
Vue 3
Vite 8
TypeScript 6
thin
This example shows how to use a swimlaneRenderer to populate swimlane headers with custom content
Vue 3
Vite 8
TypeScript 6
thin
Uses drag events to show a dialog to verify dropping tasks
Vue 3
Vite 5
TypeScript 4
This example shows how to customize the task menu
Vue 3
Vite 8
TypeScript 6
This example shows how to use Vue components as task items to add content to the cards
Vue 3
Vite 8
TypeScript 6
This example shows how to customize the task editor, adding a rich text editor for the task description field
Vue 3
Vite 8
TypeScript 6
This demo lets you switch between the different themes
Vue 3
Vite 8
TypeScript 6
This example shows how to add a todo list to cards
Vue 3
Vite 8
TypeScript 6
This example shows how to customize the task tooltip
Vue 3
Vite 8
TypeScript 6
This example shows how to emulate zooming by changing the number of cards per row
Vue 3
Vite 8
TypeScript 6
Uses `direction : rtl` to adjust TaskBoard for right-to-left environments
Vue 3
examples/frameworks/vue-3
Vue 3
This example shows auto generating columns from task values
Vue 3
This example shows how to use events to control dragging columns
Vue 3
This example shows how customize the column header menu
Vue 3
Shows how to bind inline data to the React TaskBoard component
Vue 3
Shows a very basic integration of the Kanban TaskBoard component into a Vue 3 app
Vue 3
This example shows how to use the undo/redo widget to set up basic undo/redo support