Blazor Tree Grid Example - Header Template
 Task Name
|  Start Date
|  Resources
|  Duration (In days)
|  Progress
|
|---|
Planning | 3/2/2025 | 6 | 132 | Open |
Plan timeline | 3/4/2025 | 4 | 5 | In Progress |
Plan budget | 3/6/2025 | 6 | 5 | Started |
Allocate resources | 3/8/2025 | 3 | 5 | Open |
Planning complete | 7/10/2025 | 5 | 2 | Open |
Design | 7/15/2025 | 4 | 68 | In Progress |
Software specification | 7/16/2025 | 3 | 10 | Started |
Develop prototype | 7/26/2025 | 2 | 16 | In Progress |
Get approval from customer | 8/11/2025 | 3 | 5 | In Progress |
Design complete | 9/18/2025 | 6 | 3 | In Progress |
Implementation phase | 9/21/2025 | 5 | 102 | Started |
Phase 1 | 9/22/2025 | 4 | 24 | Open |
Implementation module 1 | 9/23/2025 | 3 | 22 | Started |
Development task 1 | 9/24/2025 | 2 | 5 | In Progress |
Development task 2 | 9/29/2025 | 5 | 5 | Closed |
Testing | 10/4/2025 | 1 | 4 | Closed |
Bug fix | 10/8/2025 | 6 | 3 | Validated |
Customer review meeting | 10/11/2025 | 6 | 4 | Open |
Phase 1 complete | 10/14/2025 | 5 | 2 | Closed |
Phase 2 | 10/16/2025 | 3 | 31 | Open |
Implementation module 2 | 10/17/2025 | 3 | 29 | In Progress |
Development task 1 | 10/18/2025 | 2 | 8 | Closed |
Development task 2 | 10/26/2025 | 5 | 8 | Closed |
Testing | 11/3/2025 | 3 | 4 | Open |
Bug fix | 11/7/2025 | 6 | 4 | Validated |
Customer review meeting | 11/11/2025 | 4 | 4 | In Progress |
Phase 2 complete | 11/14/2025 | 3 | 2 | Open |
Phase 3 | 11/16/2025 | 4 | 35 | In Progress |
Implementation module 3 | 11/17/2025 | 5 | 33 | Validated |
Development task 1 | 11/18/2025 | 3 | 8 | Closed |
Development task 2 | 11/26/2025 | 2 | 8 | Closed |
Testing | 12/4/2025 | 4 | 7 | Closed |
Bug fix | 12/11/2025 | 3 | 5 | Open |
Customer review meeting | 12/16/2025 | 6 | 4 | In Progress |
Phase 3 complete | 12/19/2025 | 5 | 2 | Open |
This sample demonstrates header templates to customize column header content, including icons and images for improved visual clarity.
Enable header templates by setting the column HeaderTemplate property.
In this demo, all headers render customized templates with icons alongside text.
Learn more in the header template documentation.