Blazor Kanban Board - Stacked Headers
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Preparation | Build Phase | Completion | |
|---|---|---|---|
Frame Welding - 6 items | Painting - 6 items | Assembly - 6 items | QA - 6 items |
[6]Frame Welding ASM-101
High Motor Assembly Preparation Prep workstation with all motor components and lubricants ready.
ASM-102
High Belt Drive Component Inspection Visual inspection and testing of all belt drive assemblies before line start.
ASM-103
Normal Wiring Harness Staging Organize and stage all electrical harnesses for the morning production run.
ASM-104
High Hydraulic System Pressure Test Calibrate pressure gauges and test all hydraulic connections.
ASM-105
Normal Tool Crib Inventory Check Verify all assembly tools are present, calibrated, and ready for shift.
ASM-106
High Assembly Jig Alignment Verification Check tolerance and alignment of all assembly jigs on the line.
| [6]Painting ASM-107
High Unit Assembly - Batch 001 Assemble 50 motor units, test each for continuity and power output.
ASM-108
Normal Housing Subassembly Installation Install protective housings on 35 units from Station 2. Torque to spec.
ASM-109
High Wire Connection Assembly Connect pre-formed harnesses to main control PCB. Solder four solder points per unit.
ASM-110
Normal Gasket and Seal Installation Apply gaskets and seals to 40 units before lid attachment.
ASM-111
Normal Label and Barcode Application Verify barcode scan, apply serial number labels to 45 completed units.
ASM-112
Normal Packaging Preparation Prepare foam inserts, boxes, and manuals for 55 finished units awaiting packaging.
| [6]Assembly ASM-113
High Continuity Testing - Batch 002 Electrical continuity and insulation test on all 48 units from morning shift.
ASM-114
High Power Output Verification Load test and verify power output meets specifications for batch 003.
ASM-115
Normal Mechanical Seal Integrity Check Pressure test seals and gaskets on 30 sample units from quality hold.
ASM-116
Normal Dimensional Inspection CMM (Coordinate Measuring Machine) verification of critical dimensions on 25 units.
ASM-117
Normal Visual Quality Audit Final visual inspection: surface finish, alignment, and overall appearance of 40 units.
ASM-118
Normal Documentation Review Verify all certificates of conformance and calibration records are complete.
| [6]QA ASM-119
Normal Batch 001 Released to Shipping 50 units passed QC, packed, and transferred to shipping dock.
ASM-120
Normal Batch 002 Packaging Complete All 48 units packaged in retail boxes with manuals and shipped documentation prepared.
ASM-121
Normal End of Shift Report Filed Production log, downtime log, and quality summary documented for handoff to next shift.
ASM-122
Normal Equipment Sanitization Complete All workstations cleaned per ISO standards. Preventive maintenance logged.
ASM-123
Normal Batch 003 Quality Dashboard Updated All metrics entered into MES system. Production efficiency at 94% achieved.
ASM-124
Normal Shift Handoff Complete Night shift briefed on line status, outstanding issues, and material needs.
|
This sample demonstrates the Blazor Kanban component with the stacked header feature by visualizing a Assembly Line Tasks. The board displays two headers aligned in a stacked manner so the workflow phases are visually grouped.
Add an additional header above column headers to group related columns. Configure stacked headers by mapping Text and KeyFields in the KanbanStackedHeader collection.
Additional essential interactions that enhance analysis and control are also featured:
- Stacked Header: Add a second header row that groups related columns into logical phases.
- Columns: Group cards by workflow stage such as Open, In Progress, In Review, and Completed.
- Tooltip: Show extra card details on hover to surface context without cluttering the card.
Key interactive features demonstrated in this sample include:
- Phase Groups: Columns are grouped into logical phases such as To Do, Development Phase, and Done via the stacked header.
- Custom Stacked Text: Each stacked header renders a custom label that describes the workflow phase.
- Column Mapping: The
KeyFieldsof a stacked header map the columns that should fall under that group. - Tooltip Support: Cards display a tooltip on hover for quick access to additional details.
The Stacked Header Configuration highlights the building blocks of a custom stacked layout:
- Text: The label rendered in the stacked header row.
- KeyFields: The list of column key fields grouped under the stacked header.
- KanbanStackedHeaders: The collection of stacked headers rendered above the column headers.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.