This sample demonstrates the Gantt header template feature. In this sample, custom icons have been shown in the column headers.
Task Name | Start Date | Resources | Duration | Progress |
|---|---|---|---|---|
Product concept | 4/2/2025 | 5 days | 18 | |
Defining the product and its usage | 4/2/2025 | Rose Fuller | 3 days | 30 |
Defining target audience | 4/2/2025 | Margaret Buchanan | 3 days | 0 |
Prepare product sketch and notes | 4/7/2025 | Fuller King | 2 days | 30 |
Concept approval | 4/8/2025 | Martin Tamer | 0 days | 0 |
Market research | 4/9/2025 | 8 days | 15 | |
Demand analysis | 4/9/2025 | 4 days | 15 | |
Customer strength | 4/9/2025 | Davolio Fuller | 4 days | 30 |
Market opportunity analysis | 4/9/2025 | Van Jack | 4 days | 0 |
Competitor analysis | 4/15/2025 | Fuller King | 4 days | 30 |
Product strength analsysis | 4/15/2025 | Jack Davolio | 4 days | 0 |
Product design | 4/21/2025 | 8 days | 11 | |
Create wireframes | 4/21/2025 | Davolio Fuller | 3 days | 20 |
Develop mockups | 4/24/2025 | Van Jack | 3 days | 10 |
Design review | 4/29/2025 | Margaret Buchanan | 2 days | 0 |
Design approval | 4/30/2025 | Construction Supervisor | 0 days | 0 |
Development | 5/1/2025 | 8 days | 0 | |
Setup development environment | 5/1/2025 | Martin Tamer | 2 days | 0 |
Develop core features | 5/5/2025 | Rose Fuller | 3 days | 0 |
Integrate APIs | 5/8/2025 | Margaret Buchanan | 3 days | 0 |
Development complete | 5/12/2025 | Fuller King | 0 days | 0 |
Testing | 5/13/2025 | 8 days | 0 | |
Unit testing | 5/13/2025 | Davolio Fuller | 3 days | 0 |
Integration testing | 5/16/2025 | Van Jack | 3 days | 0 |
User acceptance testing | 5/21/2025 | Martin Tamer | 2 days | 0 |
Test report approval | 5/22/2025 | Jack Davolio | 0 days | 0 |
Deployment | 5/23/2025 | 3 days | 0 | |
Configure production environment | 5/23/2025 | Fuller King | 2 days | 0 |
Deploy product | 5/27/2025 | Davolio Fuller | 1 day | 0 |
Deployment verification | 5/27/2025 | Van Jack | 0 days | 0 |
Mar 24, 2025 | Mar 30, 2025 | Apr 06, 2025 | Apr 13, 2025 | Apr 20, 2025 | Apr 27, 2025 | May 04, 2025 | May 11, 2025 | May 18, 2025 | May 25, 2025 | Jun 01, 2025 | Jun 08, 2025 | Jun 15, 2025 | Jun 22, 2025 | Jun 29, 2025 |
|---|
M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
|---|
The Gantt provides a way to define a custom element in header element. The columns -> headerTemplate property accepts the template for the header cell.
In this demo, we have rendered the customized template for all column headers.
More information on the Essential® React Gantt Chart can be found in this documentation section.