Customization

You can customize the Kanban appearance and behavior with the following properties:

• cardTemplate — render cards with a custom HTML template
• cardShape.menu, columnShape.menu, rowShape.menu — modify the context menu for cards, columns, and rows
• columnShape.headerTemplate, columnShape.collapsedTemplate — replace column header templates
• cardShape.css, columnShape.css, rowShape.css — apply CSS classes conditionally
• items — rearrange Toolbar structure and add custom controls
• CSS variables — adjust visual styles (see the Stylization section)

Custom cards

Use the cardTemplate property to render cards with a custom HTML template. The callback returns the markup for each card.

The callback receives an object with the following parameters:

• cardFields — card data
• selected — whether the card is selected
• dragging — whether the card is being dragged
• cardShape — card configuration

To embed a context menu trigger in a custom card template, wrap the menu icon in a <div> with the data-menu-id=${cardFields.id} attribute (the same structure as the built-in card). The widget binds the menu to the wrapper through this attribute.

The following demo applies a custom card template:

Custom context menu

Configure the context menu for cards, columns, and rows through the cardShape.menu, columnShape.menu, and rowShape.menu properties. Each menu.items entry can use a built-in action ID to invoke a default operation, or define a custom onClick handler for any other behavior.

cardShape.menu

By default the card menu shows Duplicate and Delete options. Available built-in action IDs:

• "duplicate-card" — duplicate the card
• "delete-card" — delete the card

columnShape.menu

• "add-card" — add a new card to the column
• "set-edit" — rename the column
• "move-column:left", "move-column:right" — move the column left or right
• "delete-column" — delete the column

rowShape.menu

• "set-edit" — rename the row
• "move-row:up", "move-row:down" — move the row up or down
• "delete-row" — delete the row

Set menu.items to a function to render a different menu per card, column, or row. Return null or false from the function to hide the menu for a specific item.

The following demo applies a custom context menu:

Custom column headers

The columnShape property provides templates and behavior for column headers:

• columnShape.headerTemplate — HTML template of the column header in the expanded state
• columnShape.collapsedTemplate — HTML template of the column header in the collapsed state
• columnShape.fixedHeaders — freeze column headers during vertical scroll (default: true)

The following code snippet sets a custom header template with a collapse icon, label with card count, and menu trigger:

new kanban.Kanban("#root", {
    columns,
    cards,
    columnShape: {
        headerTemplate: kanban.template(({ column, columnState }) => {
            return `<div className="wx-collapse-icon" data-action="collapse">
                        <i className="${column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}"></i>
                    </div>
                    ${!column.collapsed
                        ? `<div className="wx-label" data-action="rename">
                                ${column.label} (${columnState.cardsCount})
                            </div>
                            <div className="wx-menu" data-menu-id="${column.id}">
                                <i className="wxi-dots-h"></i>
                            </div>`
                        : ""}`;
        }),
        collapsedTemplate: kanban.template(({ column }) => `<div className="wx-collapsed-label">${column.label}</div>`)
    }
});

tip

For fixedHeaders to take effect, set a fixed height on the Kanban container so the board scrolls vertically.

Conditional CSS classes

To apply a CSS class conditionally, pass a function to the css parameter of cardShape, columnShape, or rowShape. The function returns a class name based on the current data:

• cardShape.css: (card) => string — class applied to a card
• columnShape.css: (column, cards) => string — class applied to a column
• rowShape.css: (row, cards) => string — class applied to a row

The following code snippet highlights overdue cards and underloaded columns:

new kanban.Kanban("#root", {
    columns,
    cards,
    cardShape: {
        css: (card) => card.end_date < new Date() ? "overdue" : ""
    },
    columnShape: {
        css: (column, cards) => cards.length < 5 ? "low-load" : ""
    }
});

Custom Toolbar

Use the items property to customize the Toolbar structure. The array defines which controls appear, their order, and their behavior. An entry can be:

• a built-in control: "search", "sort", "undo", "redo", "addColumn", "addRow", "spacer"
• an object that overrides the searchbar or sort control with custom options
• a custom control passed as a string identifier or a function

The following demo customizes the order of controls, the searchbar, the sort control, and a custom control:

Custom styles

Change the values of CSS variables to customize the Kanban appearance. See the Stylization section for the full list.

The following snippet applies custom styles to Kanban: