In case you need to set a definite number of columns and subcolumns with headers in Kanban Board, use the programming example below. You can get the coding samples by Webix for free.
webix.ready(function(){ if (!webix.env.touch && webix.env.scrollSize) webix.CustomScroll.init(); webix.ui({ view:"kanban", cols:[ { header:"Backlog", body:{ view:"kanbanlist", status:"new" }}, { header:"In Progress", body:{ view:"kanbanlist", status:"work" }}, { header:"Testing", gravity: 1.3, body:{ type:"wide", css:"sections_with_bg", cols:[ { paddingY:10, rows:[ { view:"kanbanheader", type:"sub", label: "Ready to test"}, { view:"kanbanlist", status:"ready"} ] }, { paddingY:10, rows:[ { view:"kanbanheader", type:"sub", label: "In test"}, { view:"kanbanlist", status:"test"} ] } ] }}, { header:"Done", body:{ view:"kanbanlist", status:"done" }} ], data:base_task_set }); });
<script src="//docs.webix.com/samples/63_kanban/common/data.js?v=6.1.2"></script> <link rel="stylesheet" type="text/css" href="//docs.webix.com/samples/63_kanban/common/style.css?v=6.1.2">