This sample demonstrates the usage of template columns in Gantt. In this sample, we have shown custom images in the Resources column.
Task ID | Task Name | Resources | Start Date | Duration | Progress |
|---|---|---|---|---|---|
| 1 | Product concept | 4/2/2024 | 5 days | 18 | |
| 2 | Defining the product and its usage |  Rose Fuller | 4/2/2024 | 3 days | 30 |
| 3 | Defining target audience |  Margaret Buchanan | 4/2/2024 | 3 days | 0 |
| 4 | Prepare product sketch and notes |  Fuller King | 4/5/2024 | 2 days | 30 |
| 5 | Concept approval |  Martin Tamer | 4/8/2024 | 0 days | 0 |
| 6 | Market research | 4/9/2024 | 8 days | 15 | |
| 7 | Demand analysis | 4/9/2024 | 4 days | 15 | |
| 8 | Customer strength |  Davolio Fuller | 4/9/2024 | 4 days | 30 |
| 9 | Market opportunity analysis |  Van Jack | 4/9/2024 | 4 days | 0 |
| 10 | Competitor analysis | Fuller King | 4/15/2024 | 4 days | 30 |
| 11 | Product strength analsysis |  Jack Davolio | 4/15/2024 | 4 days | 0 |
Mar 24, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 |
|---|
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 | S | M | T | W | T | F |
|---|
The Gantt provides a way to use a custom layout for each cell using the column template feature. The columns -> template property accepts either string or HTML element`s ID value, which will be used as the template for the cell. In this demo, using column template, resource column has been presented with employee photo, and the columns -> template is assigned with the ID of a SCRIPT element whose content is used as the template. The template expression should be provided inside ${...} interpolation syntax More information about Column Template can be found in this documentation section.