Row Header Columns

Row header columns display additional information next to each Kanban swim lane. For example, a board grouped by team can show the team name and location in separate columns, so users can identify the right lane without opening a card.

Define the header columns using rowHeaderColumns. Each column's display property selects a field from the swim lane data. Include a column with display: "name" if you want to keep the swim lane name visible.

JavaScript

This example shows two header columns, Team and Location, alongside the workflow columns. Each card's swimlane value matches a swim lane ID.

<div id="dp"></div>

<script>
  const dp = new DayPilot.Kanban("dp", {
    rowHeaderColumns: [
      {title: "Team", display: "name", width: 140},
      {title: "Location", display: "location", width: 120}
    ],
    rowHeaderWidthAutoFit: false,
    columns: [
      {id: "todo", name: "To Do"},
      {id: "progress", name: "In Progress"},
      {id: "done", name: "Done"}
    ],
    swimlanes: [
      {id: "web", name: "Web Team", location: "London"},
      {id: "mobile", name: "Mobile Team", location: "Prague"}
    ],
    cards: [
      {id: 1, name: "Search", text: "Add search filters", column: "todo", swimlane: "web"},
      {id: 2, name: "Login", text: "Update the sign-in screen", column: "progress", swimlane: "mobile"}
    ]
  });
  dp.init();
</script>

Configuring the header columns

• title: the label shown above the header column.
• display: the swim lane field to display, such as name or a custom location field.
• width: the initial header column width in pixels.

Header columns appear in the order used in the rowHeaderColumns array. Add another field to your swim lane objects and a matching column definition to show more information.

Controlling header widths

By default, rowHeaderWidthAutoFit is true, allowing the headers to grow to fit their content. The example sets it to false so the specified widths remain in use. The two header columns reserve 260 pixels in total, leaving the rest of the board for workflow columns and cards.

The columnWidthSpec and columnWidth properties control workflow columns separately; they do not set the widths of these swim lane headers.

Demo

• Kanban: Row Header Columns

See also

• Swim Lane Loading
• Fixed Column Width