Skip to main content

Board Mode

modeConfig.board controls Kanban-style column routing, swimlanes, and drag behavior. Use board mode when work needs lane-based grouping with optional drag-and-drop movement.

Shared Behavior​

Search, static filtering, sorting, pagination, actions, and gestures work the same as other modes — see the reference pages:

Core Examples​

Column Routing​

Use column routing when the board is shaped by one field, such as status or phase.

A simple board with column routing, widths, colors, and WIP limits.

Active2/8
Name:Aurora Chen
Name:Samir Khan
Pending1/5
Name:Mateo Silva
Inactive1
Name:Priya Nair
modeConfig: {
  board: {
    columns: {
      field: 'status',
      items: [
        { id: 'active', label: 'Active', value: 'active', color: '#10b981', width: '280px', wipLimit: 8 },
        { id: 'pending', label: 'Pending', value: 'pending', color: '#f59e0b', wipLimit: 5 },
        { id: 'inactive', label: 'Inactive', value: 'inactive', color: '#6b7280' },
      ],
    },
    dragEnabled: true,
  },
}

Swimlanes​

Use swimlanes when you need a second axis, such as department, region, or team.

The same board routed through columns and swimlanes, using a matrix layout.

Active2
Pending1
Inactive1
Engineering
Name:Aurora Chen
No items
Name:Priya Nair
Design
Name:Samir Khan
Name:Mateo Silva
No items
modeConfig: {
  board: {
    columns: {
      field: 'status',
      items: [
        { id: 'active', label: 'Active', value: 'active' },
        { id: 'pending', label: 'Pending', value: 'pending' },
        { id: 'inactive', label: 'Inactive', value: 'inactive' },
      ],
    },
    swimlanes: {
      field: 'department',
      items: [
        { id: 'engineering', label: 'Engineering', value: 'Engineering' },
        { id: 'design', label: 'Design', filter: (entity) => entity.department === 'Design' },
      ],
      layout: { type: 'matrix' },
      repeatingHeaders: false,
    },
    dragEnabled: true,
  },
}

See Also​