Skip to main content

Configuration

You can adjust the desired settings of JS Kanban to meet your needs. The available configuration properties allow you to load data for columns, rows and cards, as well as configure the Cards, Editor and Toolbar appearance.

Cards#

The board of JS Kanban consists of the cards distributed into columns and rows. You can configure the cards appearance using the cardShape configuration property:

const users = [ // user data    { id: 1, label: "John Smith", path: "../assets/user.jpg" },    { id: 2, label: "Aaron Short" }];
const  cardPriority = [ // card priority data    { id: 1, color: "#FF5252", label: "high" },    { id: 2, color: "#FFC975", label: "medium" },    { id: 3, color: "#0AB169", label: "low" }];
const cardShape = { // card configs    label: true,    description: true,    progress: true,    start_date: true,    end_date: true,    menu: true,    attached: true,    priority: {        show: true,        values: cardPriority    },    users: {        show: true,        values: users    },    headerFields: [        {            key: "sprint",            type: "text",            label: "Custom field"        }    ]};
new kanban.Kanban("#root", {    // data    columns,    cards,    rows,    // cards settings    cardShape});
note

Unless you specify the cards settings via the cardShape property, the widget will apply a defaultCardShape set of parameters!

Editor#

The editor of JS Kanban consists of the fields to manage the cards data. You can configure the editor fields using the editorShape configuration property:

const users = [ // user data    { id: 1, label: "John Smith", path: "../assets/user.jpg" },    { id: 2, label: "Aaron Short" }];
const editorShape = [ // editor configs    ...kanban.defaultEditorShape, // include default configs    { // add custom configs        type: "multiselect",        key: "users",        label: "Users",        options: users    }];
new kanban.Kanban("#root", {    // data    columns,    cards,    rows,    // editor settings    editorShape});
note

Unless you specify the editor settings via the editorShape property, the widget will apply a defaultEditorShape set of parameters!

Toolbar#

The toolbar of JS Kanban consists of the search bar and controls for adding columns and rows. To display the toolbar, you need to initialize it in a separate container using the kanban.Toolbar constructor.

// create JS Kanbanconst board = new kanban.Kanban("#root", {    // data    columns,    cards,    rows,    // cards settings    cardShape,    // editor settings    editorShape});
new kanban.Toolbar("#toolbar", { api: board.api });

You can also manage (hide/show) the toolbar controls using the items array:

// create JS Kanbanconst board = new kanban.Kanban("#root", {...});
new kanban.Toolbar("#toolbar", {    api: board.api,    items: [        "search", // search bar        "controls", // controls for adding new columns and rows        // custom elements    ]});
tip

To hide some of the toolbar controls, remove the "search" or/and "controls" string(s) from the items array

info

Unless you specify the rowKey property, the toolbar will hide the control for adding rows!

Example#

In this snippet you can see how to configure the Cards, Editor and Toolbar of JS Kanban: