Getting Started with Bryntum TaskBoard in JavaScript with npm package manager

Try JavaScript demos

Bryntum TaskBoard is delivered with a variety of JavaScript demo applications showing its functionality.

Version requirements

Minimum supported:

• JavaScript: `` or higher
• TypeScript: 3.6.0 or higher (for TypeScript application)
• Vite 4.0.0 or higher (for application build with Vite)

Recommended:

• JavaScript: `` or higher
• TypeScript: 4.0.0 or higher (for TypeScript application)
• Vite 5.0.0 or higher (for application build with Vite)

Create JavaScript application

In this guide we will explain how to get started using the npm CLI. If you prefer to not use npm, please visit the dedicated Quick Start here.

To get started, the broad steps are as follows:

1. Access to npm registry
2. Create Application
3. Bryntum bundles
4. Install component
5. Add component to Application
6. Apply styles
7. Run the application

The application we are about to build together is pretty simple, and will look like the live demo below:

Access to npm registry

You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

Create Application

To create an application, we will use Vitejs and choose vanilla JavaScript.

First, execute the vite command:

npm create vite@latest my-taskboard-app -- --template vanilla

It will generate a vanilla JavaScript boilerplate. Next, install dependencies:

cd my-taskboard-app
npm install

Open the project folder and delete counter.js, we don't need it in our case.

Install component

From your terminal, update project dependencies using the following commands:

npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial@7.3.0

npm install @bryntum/taskboard@7.3.0 

Add component to Application

Once you have project set up, you can proceed with configuring your TaskBoard.

Delete the counter.js and replace your main.js with the following code:

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

const taskBoard = new TaskBoard({
    appendTo    : 'app',
    columnField : 'status',
    columns     : [
        'todo',
        'doing',
        'done'
    ],
    project : {
        tasks : [
            { id : 1, name : 'My first task', status : 'doing' },
            { id : 2, name : 'My second task', status : 'todo' }
        ]
    }
});

Here we are providing inline data, you can learn more about how we manage data using Store in this guide.

Bryntum Task Board organizes project tasks and allows you to assign resources to them. For an in-depth introduction to tasks, please refer to the tasks guide.

Learn more about how to use EcmaScript modules here.

If you want to discover how flexible the Bryntum TaskBoard Component is, please explore the API documentation.

Apply styles

Stylesheets

The following CSS files are provided with the Bryntum npm packages:

You'll need to import the structural CSS and the preferred theme into your project for the Bryntum TaskBoard to render correctly, and if you are not replacing the icons used by the component, you will also need to include Font Awesome.

Remove the content of style.css and replace it with the following:

/* FontAwesome is used for icons */
@import "@bryntum/taskboard/fontawesome/css/fontawesome.css";
@import "@bryntum/taskboard/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/taskboard/taskboard.css";
/* Bryntum theme of your choice */
@import "@bryntum/taskboard/svalbard-light.css";

Sizing the component

By default, the Bryntum TaskBoard component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

#app {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-size      : 14px;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

Run the application by executing:

npm run dev

What to do next?

Tutorial

Now it is time to customize your application. To get familiar with the most common tasks developers perform, we have designed an engaging tutorial that we are excited to see you follow.

Learn about Data

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to tasks in Bryntum TaskBoard.