Skip to main content

rows

Description​

Optional. An array of objects that holds the rows (swimlanes) data

Usage​

rows?: [
    {
        id: string,
        label?: string,
        collapsed?: boolean,
        css?: string,
    }, {...} // other row data
];
info

To set up Swimlanes, provide the relevant data in the rows array. You can collapse/expand, rename, delete, and move swimlanes either through the UI or by using the related API.

Parameters​

Each row (swimlane) can include the following parameters:

  • id - (required) the row (swimlane) ID used for handling the row through its methods
  • label - (optional) the label for the row (swimlane), shown in the row area
  • collapsed - (optional) indicates if the row (swimlane) starts collapsed. If true, it's collapsed initially. The default is false (expanded)
  • css - (optional) applies CSS styles to an individual row
info

To dynamically load new row (swimlane) data, the parse() method can be used.

Example​

const rows = [
    { label: "Feature", id: "feature", collapsed: false, css: "red" },
    { label: "Task", id: "task", collapsed: true }
];

new kanban.Kanban("#root", {
    columns,
    cards,
    rows, // swimlane data
    // other parameters
});

Change log: The css parameter was introduced in v1.4

Related articles:

Related sample: Kanban. Swimlanes