<br>
<br>

<p align="center">
  <a href="https://bryntum.com/" rel="noopener" target="_blank"><img height="50" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo"></a>
</p>

<br>

# 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](https://bryntum.com/products/taskboard/).

<p align="center">
    <img src="https://bryntum.com/products/taskboard/examples/meta/thumb.2048.png" alt="Bryntum TaskBoard Screenshot" width="600">
</p>

## 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<br/>(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](https://bryntum.com/products/taskboard/examples/locked-column) organize tasks into workflow stages with locked priority sections
* [Swimlane organization](https://bryntum.com/products/taskboard/examples/swimlanes) groups tasks horizontally by team, project, or custom categories
* [Flexible task cards](https://bryntum.com/products/taskboard/examples/task-items) with icons, tags, progress bars, and images using renderers
* [Drag-and-drop workflow](https://bryntum.com/products/taskboard/examples/task-drag) moves tasks between columns with optional confirmation dialogs
* [Inline and modal editing](https://bryntum.com/products/taskboard/examples/simple-task-edit) with quick edits or [rich dialog editor](https://bryntum.com/products/taskboard/examples/task-edit)
* [Filtering](https://bryntum.com/products/taskboard/examples/filtering) and [sorting](https://bryntum.com/products/taskboard/examples/sorting) to focus on priorities with dynamic options
* [Big data performance](https://bryntum.com/products/taskboard/examples/bigdataset) efficiently renders thousands of tasks using virtual rendering
* [Custom column content](https://bryntum.com/products/taskboard/examples/swimlanes-content) renders markup in column headers and swimlane bodies
* [Context menus](https://bryntum.com/products/taskboard/examples/task-menu) provide quick actions for tasks and columns
* [Responsive design](https://bryntum.com/products/taskboard/examples/responsive) automatically adjusts layout for mobile and tablet screens
* [Six built-in themes](https://bryntum.com/products/taskboard/examples/themes) or create custom ones with CSS variables
* [React](https://bryntum.com/products/taskboard/examples/?framework=react), [Vue](https://bryntum.com/products/taskboard/examples/?framework=vue), and [Angular](https://bryntum.com/products/taskboard/examples/?framework=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](https://nodejs.org/en): `>= 20.0.0`
* [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
* [Angular](https://angularjs.org/): `>= 9.0.0`
* [React](https://react.dev/): `>= 16.0.0`
* [Vue](https://vuejs.org/): `>= 3.0.0`
* [Ionic](https://ionicframework.com/): `>= 5.0.0`
* [Vite](https://vite.dev/): `>= 4.0.0`
* [Webpack](https://webpack.js.org/): `>= 4.0.0`

## Try Bryntum Online Demos

Explore our comprehensive collection of demos:

* [View Online Demos](https://bryntum.com/products/taskboard/examples/)
* [JavaScript Demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)
* [React Demos](https://bryntum.com/products/taskboard/examples/?framework=react)
* [Vue Demos](https://bryntum.com/products/taskboard/examples/?framework=vue)
* [Angular Demos](https://bryntum.com/products/taskboard/examples/?framework=angular)

## 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`:

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

Or using `yarn`:

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

Alternatively, add to `package.json` dependencies:

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

Visit our [npm repository guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/npm-repository) 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:

```shell
# 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)

```json
{
  "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

```typescript
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                                                                                     |
|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=svalbard-light"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.svalbard-light.png" alt="Svalbard Light" width="300"></a> | <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=svalbard-dark"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.svalbard-dark.png" alt="Svalbard Dark" width="300"></a> |

### Stockholm

| Light                                                                                        | Dark                                                                                       |
|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=stockholm-light"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.stockholm-light.png" alt="Stockholm Light" width="300"></a> | <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=stockholm-dark"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.stockholm-dark.png" alt="Stockholm Dark" width="300"></a> |

### Visby

| Light                                                                                | Dark                                                                               |
|--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=visby-light"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.visby-light.png" alt="Visby Light" width="300"></a> | <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=visby-dark"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.visby-dark.png" alt="Visby Dark" width="300"></a> |

### Material 3

| Light                                                                                         | Dark                                                                                        |
|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=material3-light"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.material3-light.png" alt="Material 3 Light" width="300"></a> | <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=material3-dark"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.material3-dark.png" alt="Material 3 Dark" width="300"></a> |

### High Contrast

| Light                                                                                                | Dark                                                                                               |
|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=high-contrast-light"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.high-contrast-light.png" alt="High Contrast Light" width="300"></a> | <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=high-contrast-dark"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.high-contrast-dark.png" alt="High Contrast Dark" width="300"></a> |

### Fluent 2

| Light                                                                                     | Dark                                                                                    |
|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
| <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=fluent2-light"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.fluent2-light.png" alt="Fluent 2 Light" width="300"></a> | <a href="https://bryntum.com/products/taskboard/examples/tooltips/?theme=fluent2-dark"><img src="https://bryntum.com/products/taskboard/docs/data/TaskBoard/images/themes/thumb.fluent2-dark.png" alt="Fluent 2 Dark" width="300"></a> |

For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/customization/styling).

## 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

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

For details, see [React Multiple Products](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/react/multiple-products).

### Angular

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

For details, see [Angular Multiple Products](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/angular/multiple-products).

### Vue 3

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

For details, see [Vue Multiple Products](https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/vue/multiple-products).

## Explore All Bryntum Products

* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management

Explore our comprehensive collection of demos:

| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |

## Online references

* [Bryntum TaskBoard documentation](https://bryntum.com/products/taskboard/docs/)
* [Bryntum TaskBoard examples](https://bryntum.com/products/taskboard/examples/)

* [Bryntum Support Forum](https://forum.bryntum.com/)
* [Contact us](https://bryntum.com/contact/)

## License and copyright

Bryntum TaskBoard is commercial software and requires a paid license.
Please visit the [Bryntum TaskBoard End User License](https://bryntum.com/products/taskboard/license/) for the full text of the license.

Copyright © 2009-2026, Bryntum
All rights reserved.

