Blazor Kanban Board - Header Template Customization
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Dirty - 3 items | In Progress - 3 items | Cleaned - 3 items | Inspected - 3 items |
|---|
[3]Dirty RM-204 King studio, checkout at 11:00. New guest arriving after 15:00. RM-318 Queen-double, guest staying through Friday. Light refresh required. RM-115 Single room checkout completed. Priority cleaning needed for early arrival. | [3]In Progress RM-410 Two-bedroom suite. Deep-clean after a long-stay checkout. RM-512 Refresh towels and linens, vacuum, and restock amenities. RM-527 Guest requested extra towels, bed refresh, and amenity replenishment. | [3]Cleaned RM-606 Supervisor inspection after a maintenance visit. RM-708 Welcome amenities and turndown service for a VIP repeat guest. RM-633 Cleaning completed. Awaiting supervisor walkthrough and approval. | [3]Inspected RM-122 Inspected and ready for sale. Maintenance flags cleared. RM-225 Turned and ready for next guest arrival at 16:00. RM-340 Room inspected, stocked, and released for guest assignment. |
This sample demonstrates the header template feature of the Blazor Kanban component by visualizing a Hotel Housekeeping. Column headers are customized with icons for improved clarity across To Do, In Progress, In Review, and Done stages.
Customize a column header using the Template property on KanbanColumn to insert rich content or visuals.
Additional essential interactions that enhance analysis and control are also featured:
- Header Template: Replace the default column header with a fully custom layout including icons and text.
- Toggle Columns: Allow each column to be collapsed or expanded directly from the header.
- Drag and Drop: Move cards between columns to update their workflow status with a single action.
Key interactive features demonstrated in this sample include:
- Status Icon: Each column header includes an icon that reflects the workflow status of the column.
- Custom Layout: The header layout combines an icon and a header text element in a single row.
- Toggle Support: The toggle button remains available on the customized header to collapse or expand the column.
- Consistent Styling: Custom headers are rendered with shared CSS so they look consistent across the board.
The Header Configuration highlights the building blocks of a custom header:
- Template: A Razor template is provided via the
Templateproperty on eachKanbanColumn. - Icon Mapping: The first key field of the column drives the icon CSS class to match the status semantics.
- AllowToggle: The toggle behavior is preserved while still rendering a fully custom header layout.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.