Skip to main content

DHTMLX Kanban. Initialization example

Getting a Kanban board up and running requires just two things: a list of columns that represent workflow stages, and a set of cards placed into those columns. This minimal setup gives you a functional board with drag-and-drop, card editing, and column management out of the box.

Live example​

new kanban.Kanban("#root", {
    columns,
    cards,
});
<!-- component container -->
<div style="height: 100%; width: 100%" id="root"></div>

<!-- dataset -->

<script>
const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];
    
    const cards = [
		{
			label: "Integration with Angular/React",
			column: "backlog",
		},
		{
			label: "Archive the cards/boards ",
			column: "backlog",
		},
		{
			label: "Searching and filtering",
			column: "backlog",
		},
		{
			label: "Set the tasks priorities",
			column: "inprogress",
		},
		{
			label: "Custom icons",
			column: "inprogress",
		},
		{
			label: "Integration with Gantt",
			column: "inprogress",
		},
		{
			label: "Drag and drop",
			column: "testing",
		},
		{
			label: "Adding images",
			column: "testing",
		},
		{
			label: "Create cards and lists from the UI and from code",
			column: "done",
		},
		{
			label: "Draw swimlanes",
			column: "done",
		},
		{
			label: "Progress bar",
			column: "done",
		},
	];
</script>

The code creates a new Kanban instance by passing a container selector and a config object with columns and cards arrays. Each card references its column by column id. No toolbar, no card shape customization, no rows. This is the simplest possible configuration that still produces a fully interactive board.

Solution overview​

  1. Define columns as an array of objects with id and label properties
  2. Define cards as an array of objects with label and column (matching a column id)
  3. Create the board with new kanban.Kanban("#root", { columns, cards })

Key points​

  • Auto-generated card IDs: When cards don't have explicit id properties, the Kanban assigns them automatically
  • Column order matters: Cards appear in the column in the same order they are defined in the cards array
  • Container sizing: The board fills its container. Make sure the root element has a defined height

API reference​

Additional resources​