DayPilot.Kanban.columns.list

The columns.list property (array) stores the Kanban column data source.

The array items are objects with the following structure:

• id (number | string) - column ID

• name (string) - column header text

• barColor (string) - optional card bar color used for this column; if not specified, the CSS theme is used

Declaration

DayPilot.Kanban.columns.list

Notes

In wrapper components, assign the same data using the columns input or prop.

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

Examples

JavaScript

const columns = [
  { name: "Analysis", id: "1", barColor: "#f9ba25" },
  { name: "Draft", id: "2" },
  { name: "Testing", id: "3" }
];

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

You can also update the column data source later:

const columns = [
  { name: "Analysis", id: "1", barColor: "#f9ba25" },
  { name: "Draft", id: "2" },
  { name: "Testing", id: "3" }
];

kanban.update({ columns });

Angular

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

config: DayPilot.KanbanConfig = {
  columns: [
    { name: "Analysis", id: "1", barColor: "#f9ba25" },
    { name: "Draft", id: "2" },
    { name: "Testing", id: "3" }
  ],
  // ...
};

React

const columns = [
  { name: "Analysis", id: "1", barColor: "#f9ba25" },
  { name: "Draft", id: "2" },
  { name: "Testing", id: "3" }
];

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

Vue

const columns = [
  { name: "Analysis", id: "1", barColor: "#f9ba25" },
  { name: "Draft", id: "2" },
  { name: "Testing", id: "3" }
];

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

See Also

• Column Loading [doc.daypilot.org]

• Columns [doc.daypilot.org]

• DayPilot.Kanban.cards.list

• DayPilot.Kanban Class