Bryntum TaskBoard 7.0.0-alpha.1

Features

Auto generate columns

Auto generate columns

This example shows auto generating columns from task values

Filtering tasks per column

Filtering tasks per column

This example shows the filtering per column feature of the TaskBoard

Searching in tasks per column

Searching in tasks per column

This example demonstrates simple searching for tasks in columns

Column toolbars

Column toolbars

This example shows how to customize column toolbars

Configuration panel

Configuration panel

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

Dragging columns

Dragging columns

This example shows how to use events to control dragging columns

Uses drag events to show a dialog to verify dropping tasks

Filtering tasks, columns & swimlanes

Filtering tasks, columns & swimlanes

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

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

Inline task editing

Inline task editing

This example shows how to use inline editing in task cards

Responsive layout

Responsive layout

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

Remotely loaded columns

Remotely loaded columns

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

Scrolling to tasks, columns & swimlanes

Scrolling to tasks, columns & swimlanes

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

This example shows how to sort tasks in the TaskBoard

Sorting tasks per column

Sorting tasks per column

This example shows the sorting per column feature of the TaskBoard

This example shows how to add a todo list to cards

Undo/redo support

Undo/redo support

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

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

This example shows how to programmatically lock a column

Charts

Displaying a chart

Displaying a chart

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

Column for non-matching tasks

Column for non-matching tasks

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

Handling columns

Handling columns

This example shows how to manipulate columns

Handling swimlanes

Handling swimlanes

This example shows basic setup of the TaskBoard using swimlanes

This demo lets you switch between the different themes

Customization

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

Customized swimlane content

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

Customized task contents using task items

Customized task contents using task items

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

Customized task editor

Customized task editor

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

Customized tooltips

Customized tooltips

This example shows how to customize the task tooltip

Shows how to preload a specific locale and localize the application

Integration

Syncing with backend

Syncing with backend

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

Integrate with Salesforce Lightning

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

Custom build using WebPack

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

Custom thin build using WebPack

Custom thin build using WebPack

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

Integrate with Ionic

Integrate with Ionic

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

Angular
examples/frameworks/angular

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

Auto generate columns

Auto generate columns

This example shows auto generating columns from task values

Basic thin setup

Basic thin setup

This example shows basic thin setup of the Bryntum TaskBoard

Dragging columns

Dragging columns

This example shows how to use events to control dragging columns

This example shows how to programmatically lock a column in TaskBoard

Shows how to bind inline data to the Angular TaskBoard component

Undo/redo support

Undo/redo support

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

Basic thin setup

This example shows basic thin setup of the Bryntum TaskBoard

Redux data store

Redux data store

This example shows how to use Redux to manage data

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

React
examples/frameworks/react

Auto generate columns

Auto generate columns

This example shows auto generating columns from task values

Dragging columns

Dragging columns

This example shows how to use events to control dragging columns

Shows how to bind inline data to the React TaskBoard component

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

Undo/redo support

Undo/redo support

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

Basic setup with TypeScript

Basic setup with TypeScript

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

SharePoint Workbench with TypeScript

SharePoint Workbench with TypeScript

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

React + Remix

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

Vue 3 + Vite
examples/frameworks/vue-3-vite

This example shows basic setup of the Bryntum TaskBoard

Basic thin setup

Basic thin setup

This example shows basic setup of the Bryntum TaskBoard

Vue 3
examples/frameworks/vue-3

Auto generate columns

Auto generate columns

This example shows auto generating columns from task values

Dragging columns

Dragging columns

This example shows how to use events to control dragging columns

Shows how to bind inline data to the React TaskBoard component

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

Undo/redo support

Undo/redo support

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