Skip to main content

Board Mode Config

modeConfig.board defines column routing, swimlanes, and drag behavior in board mode.

content: {
  mode: 'board',
  modeConfig: {
    board: {
      columns: {
        field: 'status',
        items: [
          { id: 'todo',        label: 'To Do' },
          { id: 'in-progress', label: 'In Progress' },
          { id: 'done',        label: 'Done' },
        ],
      },
      dragEnabled: true,
    },
  },
  item: { fields: […], layout: { type: 'auto' } },
},

Options​

OptionValuesDefaultEffect
columns.fieldstringrequiredSelects the entity field used to route cards into columns.
columns.itemsBoardColumnConfig[]requiredDeclares the visible columns and their order.
columns.items[].valuestring, number, booleanitem idOverrides the value used for routing.
columns.items[].filter(entity) => booleanunsetReplaces value matching with a predicate.
columns.items[].widthCSS lengthunsetSets the width of a column.
columns.items[].colorCSS colorunsetSets the accent color for a column.
columns.items[].wipLimitnumberunsetAdds a work-in-progress limit to a column.
swimlanes.fieldstringrequired when swimlanes is setSelects the entity field used to route rows into swimlanes.
swimlanes.itemsBoardSwimlaneConfig[]required when swimlanes is setDeclares the swimlanes and their order.
swimlanes.layout.typecollapsible, matrixcollapsibleSwitches between collapsible sections and matrix layout.
swimlanes.repeatingHeaderstrue, falsetrueChooses whether column headers repeat for each swimlane.
dragEnabledtrue, falseunsetEnables or disables board dragging.

Mode-Specific Caveats​

  • columns.items[].filter overrides simple field-value matching for that axis item.
  • swimlanes adds a second routing axis and changes board layout semantics.

Coverage Summary​

Every board option is mapped to at least one example or reference subsection on the Board Mode guide page:

  • columns.field, columns.items, columns.items[].value, columns.items[].width, columns.items[].color, columns.items[].wipLimit, dragEnabled: Column Routing
  • columns.items[].filter: Board Options Reference (documented for predicate-based column routing)
  • swimlanes.field, swimlanes.items, swimlanes.layout.type, swimlanes.repeatingHeaders, dragEnabled: Swimlanes

See Also​