Skip to main content

DHTMLX Kanban. Swimlanes, comments, votes, links example

A full-featured Kanban board goes beyond simple columns and cards. Swimlanes organize tasks by category, comments enable team discussion within cards, votes let team members signal priority, and links define dependencies between tasks. Together, these features transform a basic board into a collaborative project management tool.

Live example​

const { Kanban, Toolbar, defaultEditorShape } = kanban;
const { cards, links } = getData();

const cardShape = {
    label: true,
    description: true,
    progress: true,
    comments: true,
    votes: {
      show: true,
      clickable: true,
    },
    start_date: true,
    end_date: true,
    users: {
        show: true,
        values: users,
    },
    priority: {
        show: true,
        values: [
            { id: 1, color: "#FF5252", label: "High", value: 1 },
            { id: 2, color: "#FFC975", label: "Medium", value: 2 },
            { id: 3, color: "#65D3B3", label: "Low", value: 3 },
        ],
    },
    color: true,
    menu: true,
    cover: true,
    attached: false,
};

const board = new Kanban("#root", {
    columns,
    cards,
    rows,
    links,
    rowKey: "type",
    cardShape,
    editorShape: [
        ...defaultEditorShape,
        {
            type: "links",
            key: "links",
            label: "Links",
        },
        {
            type: "comments",
            key: "comments",
            label: "Comments",
            config: {
                placement: "editor",
            },
        },
    ],
    currentUser: 1,
});

new kanban.Toolbar("#toolbar", {
    api: board.api,
});

<!-- component containers -->
<div id="toolbar"></div>
<div id="root" style="height: calc(100% - 56px);"></div>

<!-- dataset -->
<script src="https://snippet.dhtmlx.com/codebase/data/kanban/01/dataset.js"></script>

<script>
const users = [
		{
			id: 1,
			label: "Steve Smith",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
		},
		{
			id: 2,
			label: "Aaron Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
		},
		{
			id: 3,
			label: "Angela Allen",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
		},
		{
			id: 4,
			label: "Angela Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
		},
		{
			id: 5,
			label: "John Doe",
		},
	];
    
    const editorShape = [
		{
			type: "multiselect",
			key: "users",
			label: "Users",
			options: users,
		},
	];
    
    const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];
    
    const rows = [
		{
			label: "Feature",
			id: "feature",
		},
		{
			label: "Task",
			id: "task",
		},
	];
</script>

The code enables all four features through configuration: rows with rowKey: "type" create swimlanes, comments: true in cardShape shows comment counts on cards, votes: { show: true, clickable: true } lets users upvote cards, and a links array passed to the constructor stores dependency relationships that users can manage from the card editor. The editor is extended with type: "links" and type: "comments" fields. Comments use config: { placement: "editor" } to render inline in the editor panel rather than in a separate view. The currentUser: 1 setting identifies which user is voting and commenting.

Solution overview​

  1. Pass rows and rowKey to create swimlanes
  2. Add links data array to the constructor for task dependencies
  3. Enable comments: true and votes: { show: true, clickable: true } in cardShape
  4. Extend editorShape with type: "comments" and type: "links" fields
  5. Set currentUser to identify the active user for votes and comments

Key points​

  • clickable votes: Set votes: { show: true, clickable: true }. Without clickable, vote counts display but users can't vote from the card
  • Comment placement: config: { placement: "editor" } renders comments inside the editor; without it, comments open in a separate panel
  • currentUser is required: Comments and votes need currentUser to track who performed the action
  • Links are data, not visual: The links array stores dependency relationships between cards. Users manage them in the card editor via the type: "links" field. There are no connecting lines drawn between cards on the board itself

API reference​

  • rows: Defines swimlanes
  • rowKey: Card property used to assign cards to swimlanes
  • links: Defines task dependencies
  • cardShape: Card appearance including comments, votes, users, priority
  • editorShape: Editor field configuration
  • currentUser: Active user for comments and votes

Additional resources​