Bryntum TaskBoard Thin (Trial)

Bryntum TaskBoard is a Kanban board component supporting a wide range of functionality.. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.

For more information about all features, visit the Bryntum TaskBoard site.

What is the Thin Package?

The Thin package contains only product-specific code and styling, making it ideal for:

• Combining multiple Bryntum products in a single application
• Reducing bundle size - no duplicated code when using multiple products
• Avoiding runtime conflicts - prevents duplicate class registrations

Thin vs Regular Package

| Package Type | Contains | Best For | |------------------------------------|-----------------------------------------------------------------------|--------------------------------------------------------| | Regular (@bryntum/taskboard) | Product + all dependencies(e.g., Scheduler includes Grid + Core) | Single product apps | | Thin (@bryntum/taskboard-thin) | Product-specific code only | Multiple product apps or optimized single product apps |

When to Use Thin Package?

Use Thin if:

• Combining multiple Bryntum products (e.g., Grid + Scheduler + Gantt)
• Using thin framework wrappers (@bryntum/taskboard-react-thin)
• Want smallest possible bundle size
• Building with modern build tools (Webpack 5+, Vite, Rollup)

Use Regular if:

• Building a single product application with standard setup
• Using direct <script> tag inclusion
• Prefer simpler dependency management

Highlights

• Kanban-style columns organize tasks into workflow stages with locked priority sections
• Swimlane organization groups tasks horizontally by team, project, or custom categories
• Flexible task cards with icons, tags, progress bars, and images using renderers
• Drag-and-drop workflow moves tasks between columns with optional confirmation dialogs
• Inline and modal editing with quick edits or rich dialog editor
• Filtering and sorting to focus on priorities with dynamic options
• Big data performance efficiently renders thousands of tasks using virtual rendering
• Custom column content renders markup in column headers and swimlane bodies
• Context menus provide quick actions for tasks and columns
• Responsive design automatically adjusts layout for mobile and tablet screens
• Six built-in themes or create custom ones with CSS variables
• React, Vue, and Angular wrappers with native framework patterns

Package Contents

| Path | Description | |---------------------------------------|------------------------------------------------| | taskboard.module.js, taskboard.umd.js | JavaScript bundles (ES module and UMD formats) | | taskboard.css | Structural CSS (required) | | *.d.ts | TypeScript type definitions | | *.css | Theme stylesheets |

Note: Trial packages do not include minified bundles or source maps.

Supported Versions

• NodeJS: >= 20.0.0
• TypeScript: >= 3.6.0
• Angular: >= 9.0.0
• React: >= 16.0.0
• Vue: >= 3.0.0
• Ionic: >= 5.0.0
• Vite: >= 4.0.0
• Webpack: >= 4.0.0

Try Bryntum Online Demos

Explore our comprehensive collection of demos:

• View Online Demos
• JavaScript Demos
• React Demos
• Vue Demos
• Angular Demos

Installation

This is a trial package with limited functionality.

Why Use npm Aliasing?

Trial packages use npm aliasing to install @bryntum/taskboard-thin-trial under the @bryntum/taskboard-thin name. This approach provides a seamless upgrade path - when you purchase a license, you only need to update the alias in package.json without changing any application code.

Install using npm:

npm install @bryntum/taskboard-thin@npm:@bryntum/taskboard-thin-trial@latest

Or using yarn:

yarn add @bryntum/taskboard-thin@npm:@bryntum/taskboard-thin-trial@latest

Alternatively, add to package.json dependencies:

"dependencies": {
  "@bryntum/taskboard-thin": "npm:@bryntum/taskboard-thin-trial@latest"
}

Visit our npm repository guide to learn more about installation and migrating from trial to licensed packages.

Combining Multiple Products

When combining multiple Bryntum products, install all needed thin packages with aliasing:

# Example: Using Grid and Scheduler together
npm install @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@latest
npm install @bryntum/scheduler-thin@npm:@bryntum/scheduler-thin-trial@latest
npm install @bryntum/scheduler-react-thin@latest

Required Dependencies

Thin packages contain only product-specific code and do not automatically install dependencies. You must manually install all required API packages for the underlying products.

API Packages (Required)

{
  "dependencies": {
    "@bryntum/core-thin": "latest",
    "@bryntum/engine-thin": "latest",
    "@bryntum/taskboard-thin": "latest"
  }
}

Dependency Chain Overview

The following table shows which thin API packages are required for each Bryntum product:

| Product | Core | Engine | Grid | Scheduler | Scheduler Pro | Product Package | |-------------------|:----:|:------:|:----:|:---------:|:-------------:|:----------------------------:| | Grid | ✓ | | ✓ | | | @bryntum/grid-thin | | Scheduler | ✓ | ✓ | ✓ | ✓ | | @bryntum/scheduler-thin | | Scheduler Pro | ✓ | ✓ | ✓ | ✓ | ✓ | @bryntum/schedulerpro-thin | | Gantt | ✓ | ✓ | ✓ | ✓ | ✓ | @bryntum/gantt-thin | | Calendar | ✓ | ✓ | ✓ | ✓ | | @bryntum/calendar-thin | | TaskBoard | ✓ | ✓ | | | | @bryntum/taskboard-thin |

Important Notes

About Core Framework Wrappers:

@bryntum/core-[framework]-thin packages (e.g., @bryntum/core-react-thin) are optional and only needed if you use Bryntum Core UI widgets directly in your app, such as:

• BryntumButton
• BryntumCombo
• BryntumTextField
• Other Core widgets

If you only use the main product component (Grid, Scheduler, etc.), you don't need the Core framework wrapper.

Quick Start

import { TaskBoard } from '@bryntum/taskboard-thin';
import './style.css';

const taskBoard = new TaskBoard({
    appendTo    : 'app',
    columnField : 'status',
    columns     : [
        'todo',
        'doing',
        'done'
    ],
    project : {
        tasks : [
            { id : 1,  name : 'Design landing page', status : 'doing', description : 'Creating layout for the new landing page' },
            { id : 2,  name : 'Set up database schema', status : 'todo', description : 'Define tables and relationships for user data' },
            { id : 3,  name : 'Write API documentation', status : 'done', description : 'Document the REST endpoints for the project' },
            { id : 4,  name : 'Create login screen', status : 'doing', description : 'Implement authentication UI with validation' },
            { id : 5,  name : 'Integrate payment gateway', status : 'todo', description : 'Connect Stripe API to the backend' },
            { id : 6,  name : 'Fix navigation bugs', status : 'done', description : 'Resolve reported issues with navbar links' },
            { id : 7,  name : 'Build notification system', status : 'doing', description : 'Real-time push notifications for events' },
            { id : 8,  name : 'Add unit tests', status : 'todo', description : 'Write tests for services and components' },
            { id : 9,  name : 'Optimize image loading', status : 'done', description : 'Implement lazy loading for large images' },
            { id : 10, name : 'Deploy staging server', status : 'doing', description : 'Set up CI/CD pipeline for staging environment' },
            { id : 11, name : 'Create user profile page', status : 'todo', description : 'Design and implement profile management UI' },
            { id : 12, name : 'Implement role-based access control', status : 'todo', description : 'Restrict features based on user roles' },
            { id : 13, name : 'Set up error logging', status : 'todo', description : 'Integrate centralized error monitoring tool' },
            { id : 14, name : 'Improve form validation', status : 'todo', description : 'Enhance validation rules for all forms' },
            { id : 15, name : 'Add search functionality', status : 'todo', description : 'Implement search bar with filtering options' }
        ],
        resources : [
            { id : 1, name : 'Angelo' },
            { id : 2, name : 'Celia' },
            { id : 3, name : 'Dave' },
            { id : 4, name : 'Emilia' },
            { id : 5, name : 'Gloria' },
            { id : 6, name : 'Henrik' },
            { id : 7, name : 'Kate' }
        ],
        assignments : [
            { id : 1,  event : 1,  resource : 1 },
            { id : 2,  event : 2,  resource : 2 },
            { id : 3,  event : 3,  resource : 3 },
            { id : 4,  event : 4,  resource : 4 },
            { id : 5,  event : 5,  resource : 5 },
            { id : 6,  event : 6,  resource : 6 },
            { id : 7,  event : 7,  resource : 7 },
            { id : 8,  event : 8,  resource : 1 },
            { id : 9,  event : 9,  resource : 2 },
            { id : 10, event : 10, resource : 3 },
            { id : 11, event : 11, resource : 4 },
            { id : 12, event : 12, resource : 5 },
            { id : 13, event : 1,  resource : 5 },
            { id : 14, event : 2,  resource : 5 },
            { id : 15, event : 3,  resource : 5 },
            { id : 16, event : 4,  resource : 5 },
            { id : 17, event : 6,  resource : 5 },
            { id : 18, event : 7,  resource : 5 }
        ]
    }
});

Themes

Svalbard (default)

| Light | Dark | |--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------| | | |

Stockholm

| Light | Dark | |----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------| | | |

Visby

| Light | Dark | |--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | | |

Material 3

| Light | Dark | |-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------| | | |

High Contrast

| Light | Dark | |------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | | |

Fluent 2

| Light | Dark | |-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | | |

For more information on customizing themes, see the Styling guide.

Framework Integrations

Thin packages use thin framework wrappers. Each wrapper follows native framework patterns and lifecycle management.

Note: The framework wrappers are public and can be installed normally. They require the thin core package (installed above with aliasing) to be present.

React

npm install @bryntum/taskboard-react-thin@latest

For details, see React Multiple Products.

Angular

npm install @bryntum/taskboard-angular-thin@latest

For details, see Angular Multiple Products.

Vue 3

npm install @bryntum/taskboard-vue-3-thin@latest

For details, see Vue Multiple Products.

Explore All Bryntum Products

• Bryntum Grid - High-performance data grid
• Bryntum Scheduler - Resource scheduling component
• Bryntum Scheduler Pro - Advanced scheduling with dependencies
• Bryntum Gantt - Project planning and management
• Bryntum Calendar - Full-featured calendar component
• Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

• Bryntum TaskBoard documentation

• Bryntum TaskBoard examples

• Bryntum Support Forum

• Contact us

License and copyright

Bryntum TaskBoard is commercial software and requires a paid license. Please visit the Bryntum TaskBoard End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.