TaskBoard - Data Attributes
Reference stable TaskBoard data attributes and runtime state classes for styling and tests.
#Data Attributes
| Attribute | Surface | Use |
|---|---|---|
data-column-id | Column, swimlane cell, and column-header surfaces. | Locate a workflow column or lane-specific drop surface. |
data-task-id | Card wrapper. | Locate a card for tests, focus, drag, and scroll helpers. |
data-swimlane-id | Swimlane row and cell surfaces. | Locate a swimlane row or cell. |
data-print-target | Root while printing. | Target print-specific CSS. |
#Runtime Classes
| Class | Meaning |
|---|---|
p-taskboard, p-taskboard-body, p-taskboard-columns, p-taskboard-swimlane-grid | Root and layout containers. |
p-taskboard-disabled, p-taskboard-readonly, p-taskboard-dragging, p-taskboard-column-reordering | Root interaction state. |
p-taskboard-column-collapsed, p-taskboard-column-locked, p-taskboard-column-pinned, p-taskboard-column-dragging | Column state. |
p-taskboard-column-wip-warning, p-taskboard-column-wip-exceeded | Column WIP status. |
p-taskboard-column-todo, p-taskboard-column-in-progress, p-taskboard-column-done, p-taskboard-column-blocked | Column status styling from statusType. |
p-taskboard-drop-indicator | Active insertion marker. |
p-taskboard-card-selected, p-taskboard-card-focused, p-taskboard-card-disabled | Card interaction state. |
p-taskboard-card-draggable, p-taskboard-card-dragging, p-taskboard-card-dragging-source | Card drag capability and active drag state. |
p-taskboard-density-compact, p-taskboard-density-standard, p-taskboard-density-comfortable | Density mode. |
p-taskboard-rtl, p-taskboard-print-active, p-taskboard-printing, p-taskboard-print-ancestor | Direction and print state. |
p-taskboard-drag-preview, p-taskboard-drag-preview-badge | Drag overlay surfaces. |
#Testing Notes
Prefer data attributes for locating columns, cards, and swimlane cells. A swimlane cell carries both data-column-id and data-swimlane-id, which is the stable selector shape for lane-relative drag and virtual-scroll checks. Use state classes when the test asserts behavior such as selected, dragging, collapsed, filtered, or print state. Avoid depending on copied UI-part class names unless the test belongs to the app-owned part.