React

The most flexible Kanban board

Bryntum Task Board for React is a web component with a range of built-in features to track tasks from idea to completion. Optimize your users’ workflow in a beautiful interface that’s easy to customize.

View Examples

Download Trial

Clear and concise documentation

Quick start

Guide

Widgets

A feature-rich React Kanban board

Customize how cards, columns, and swimlanes are rendered and styled to suit your needs and brand aesthetic. Autogenerate columns, enable inline editing, and quickly display thousands of tasks.

You can even toggle features on or off at runtime, thanks to our rich API. Try it out in the demo!

View all features

Kanban board code example for React

Get Bryntum React Task Board up and running in just a few minutes using TypeScript or JavaScript. The App.jsx code example below shows configuration and sample data.

import { useState } from 'react';
import { BryntumTaskBoard } from '@bryntum/taskboard-react';
import './App.scss';

const taskboardConfig = {
  columns : [
      { id : 'todo', text : 'Todo', color : 'orange' },
      { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
      { id : 'done', text : 'Done' }
  ],
  // Field used to pair a task to a column
  columnField : 'status',
};

const resourcesData = [
  {
    "id": 1,
    "name": "Angelo"
  },
  {
    "id": 2,
    "name": "Celia"
  },
  {
    "id": 3,
    "name": "Dave"
  },
];

const tasksData = [
  {
    "id": 1,
    "name": "Book flight",
    "status": "done",
    "prio": "medium"
  },
  {
    "id": 2,
    "name": "Book hotel",
    "status": "done",
    "prio": "medium"
  },
  {
    "id": 3,
    "name": "Pack bags",
    "status": "doing",
    "prio": "low"
  },
];

const assignmentsData = [
  {
    "id": 1,
    "event": 1,
    "resource": 1
  },
  {
    "id": 2,
    "event": 2,
    "resource": 2
  },
  {
    "id": 3,
    "event": 3,
    "resource": 3
  }
];

function App() {
  const [resources, setResources] = useState(resourcesData);
  const [tasks, setTasks] = useState(tasksData);
  const [assignments, setAssignments] = useState(assignmentsData);
    
  return (
      <BryntumTaskBoard 
        resources={resources} 
        tasks={tasks} 
        assignments={assignments}
        {...taskboardConfig} 
      />
    );
}

export default App;

Structure and filter Task Board cards

Create order out of chaos. Group tasks into swimlanes and any number of columns. Collapse swimlanes and columns to hide less important tasks. Find the tasks that matter most with filters.

Try demo

Create stunning modern interfaces

Choose from five themes or create your own using our Sass variables.
Use the taskRenderer method to easily display text and markup.
Control which elements a card shows using bodyItems: Display content like icons, tags, images, and progress bars.
Customize the task editor for quick access to your most-used features.

Themes demo

JSX support for rendering content

Dynamically produce visually rich cell content using inline JSX and custom React components with Bryntum React Task Board.

View docs

Looks great at any size

Bryntum React Task Board is responsive right out of the box. Less important details are filtered out on smaller screen widths to keep the focus on what’s critical while you’re on the go.

Try demo