Skip to main content

columns

Description​

Optional. An array of objects containing the columns data

Usage​

columns?: [
    {
        id: string,
        label?: string,
        collapsed?: boolean,
        limit?: number | object,
        strictLimit?: boolean
    },
    {...} // other columns data
];

Parameters​

For each column you can specify the following parameters (data):

  • id - (required) a column ID. It is used for managing the column via the corresponding methods
  • label - (optional) a column label. It is displayed in the column section
  • collapsed - (optional) a current state of the column. If true, the column is collapsed initially. Default value is false (expanded state)
  • limit - (optional) this parameter may take one of the two types of values:
    • number - a limit of cards in the current column
    • object - an object with the limits of cards for each row (swimlane) by its ID
  • strictLimit - (optional) a strict limit mode. If true, a user will not be able to create new cards over the specified number via the limit parameter. Default value is false
info

If you want to load new data for columns dynamically, you can use the parse() method!

Example​

const columns = [
    { 
        label: "Backlog", 
        id: "backlog",
        collapsed: true,
        limit: 3,
        strictLimit: true 
    },
    { 
        label: "In progress", 
        id: "inprogress",
        collapsed: false,
        limit: {
            // limit the number of cards for the "Feature" and "Task" rows of the "In progress" column
            feature: 3, 
            task: 2
        },
        strictLimit: false
    },
    { label: "Done", id: "done" }
];

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

Change log:

  • Starting from v1.1 the columns property is optional
  • The collapsed parameter was added in v1.1
  • The limit parameter was added in v1.1
  • The strictLimit parameter was added in v1.1

Related sample: Kanban. Limits for columns and swimlanes