This sample demonstrates the reordering feature of the Gantt columns. Select column name and index from properties panel to reorder the columns. You can also reorder columns by simply dragging and dropping them to the desired position.
ID | Name | Start Date | End Date | Duration | Progress | Dependency |
---|---|---|---|---|---|---|
1 | Product concept | 4/2/2025 | 4/4/2025 | 3 days | 34 | |
2 | Define the product usage | 4/2/2025 | 4/2/2025 | 1 day | 30 | |
3 | Define the target audience | 4/2/2025 | 4/3/2025 | 2 days | 40 | |
4 | Prepare product sketch and notes | 4/3/2025 | 4/4/2025 | 2 days | 30 | 2FS |
5 | Concept approval | 4/4/2025 | 4/4/2025 | 0 days | 0 | 3FS,4FS |
6 | Market research | 4/7/2025 | 4/16/2025 | 8 days | 25 | |
7 | Demand analysis | 4/7/2025 | 4/10/2025 | 4 days | 15 | |
8 | Customer strength | 4/7/2025 | 4/10/2025 | 4 days | 30 | 5FS |
9 | Market opportunity analysis | 4/7/2025 | 4/10/2025 | 4 days | 0 | 5FS |
10 | Competitor analysis | 4/11/2025 | 4/16/2025 | 4 days | 30 | 7FS,8FS |
11 | Product strength analysis | 4/11/2025 | 4/16/2025 | 4 days | 40 | 9FS |
12 | Research completed | 4/16/2025 | 4/16/2025 | 0 days | 30 | 10FS |
13 | Product design and development | 4/17/2025 | 5/13/2025 | 19 days | 31 | |
14 | Functionality design | 4/17/2025 | 4/22/2025 | 4 days | 30 | 12FS |
15 | Quality design | 4/17/2025 | 4/21/2025 | 3 days | 40 | 12FS |
16 | Define reliability | 4/22/2025 | 4/25/2025 | 4 days | 30 | 15FS |
17 | Identifying raw materials | 4/22/2025 | 4/23/2025 | 2 days | 0 | 15FS |
18 | Define cost plan | 4/24/2025 | 4/28/2025 | 3 days | 35 | 17FS |
19 | Estimate manufacturing cost | 4/24/2025 | 4/28/2025 | 3 days | 40 | 17FS |
20 | Estimate selling cost | 4/24/2025 | 4/28/2025 | 3 days | 30 | 17FS |
21 | Development of final design | 4/29/2025 | 5/13/2025 | 11 days | 32 | |
22 | Develop dimensions and design | 4/29/2025 | 5/2/2025 | 4 days | 30 | 19FS,20FS |
23 | Develop designs to meet industry | 5/5/2025 | 5/7/2025 | 3 days | 40 | 22FS |
24 | Include all the details | 5/8/2025 | 5/13/2025 | 4 days | 30 | 23FS |
25 | CAD - Computer Aided Design | 5/14/2025 | 5/16/2025 | 3 days | 0 | 24FS |
26 | CAM - Computer Aided Manufacturing | 5/19/2025 | 5/22/2025 | 4 days | 30 | 25FS |
27 | Finalize the design | 5/22/2025 | 5/22/2025 | 0 days | 40 | 26FS |
28 | Prototype testing | 5/23/2025 | 5/28/2025 | 4 days | 30 | 27FS |
29 | Include feedback | 5/23/2025 | 5/28/2025 | 4 days | 0 | 28SS |
30 | Manufacturing | 5/29/2025 | 6/4/2025 | 5 days | 30 | 28FS,29FS |
31 | Assembling material into finished goods | 6/5/2025 | 6/11/2025 | 5 days | 40 | 30FS |
32 | Final product development | 6/12/2025 | 6/20/2025 | 7 days | 17 | |
33 | Important improvement | 6/12/2025 | 6/16/2025 | 3 days | 0 | 31FS |
34 | Customer testing and feedback | 6/17/2025 | 6/20/2025 | 4 days | 30 | 33FS |
35 | Final product development | 6/23/2025 | 6/26/2025 | 4 days | 30 | |
36 | Important improvement | 6/23/2025 | 6/26/2025 | 4 days | 30 | 34FS |
37 | Address any unforeseen issues | 6/23/2025 | 6/26/2025 | 4 days | 30 | 36SS |
38 | Finalize the product | 6/27/2025 | 7/8/2025 | 8 days | 15 | |
39 | Branding the product | 6/27/2025 | 7/2/2025 | 4 days | 30 | 37FS |
40 | Marketing and presales | 7/3/2025 | 7/8/2025 | 4 days | 0 | 39FS |
Mar 31, 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 | Jul 06, 2025 | Jul 13, 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 | S | M | T | W | T | F | S |
---|
Column | |
Column Index |
Reordering can be enabled by setting the allowReordering property to true. Reordering can be done by dragging and dropping the column header from one index to another index within the TreeGrid part.
The location in which the column to be placed will be indicated by two arrows symbols.
In this demo, you can either reorder columns by dragging and dropping or by selecting column name and column index from dropdown to reorder the columns.
Injecting Module:Gantt features are segregated into individual feature-wise modules. To use reordering feature, we need to
inject Reorder
module into the services
.
More information on the Essential® React Gantt Chart can be found in this documentation section.