DayPilot.Kanban.swimlanes.list

The swimlanes.list property (array) stores the Kanban swimlane data source.

If not specified, the Kanban board will not use swimlanes.

The array items are objects with the following structure:

• id (string | number) - swimlane ID

• name (string) - swimlane header text

• collapsed (boolean) - optional initial collapsed state

Declaration

DayPilot.Kanban.swimlanes.list

Notes

In Angular, React, and Vue components, assign the same data using the swimlanes input or prop.

You can also replace the current swimlane collection after initialization using kanban.update({ swimlanes }).

Examples

JavaScript

const swimlanes = [
  {name: "Swimlane A", id: "A"},
  {name: "Swimlane B", id: "B", collapsed: true}
];

const kanban = new DayPilot.Kanban("dp", {
  swimlanes: swimlanes,
  // ...
});
kanban.init();

You can also update the swimlane data source later:

const swimlanes = [
  {name: "Swimlane A", id: "A"},
  {name: "Swimlane B", id: "B", collapsed: true}
];

kanban.update({ swimlanes });

Angular

<daypilot-kanban [config]="config"></daypilot-kanban>

config: DayPilot.KanbanConfig = {
  swimlanes: [
    { name: "Swimlane A", id: "A" },
    { name: "Swimlane B", id: "B", collapsed: true }
  ],
  // ...
};

React

const swimlanes = [
  { name: "Swimlane A", id: "A" },
  { name: "Swimlane B", id: "B", collapsed: true }
];

<DayPilotKanban
  swimlanes={swimlanes}
  {/* ... */}
/>

Vue

const swimlanes = [
  { name: "Swimlane A", id: "A" },
  { name: "Swimlane B", id: "B", collapsed: true }
];

<DayPilotKanban
  :swimlanes="swimlanes"
  <!-- ... -->
/>

See Also

• Swim Lane Loading [doc.daypilot.org]

• DayPilot.Kanban.swimlaneCollapsingEnabled

• DayPilot.Kanban Class