This sample demonstrates the Gantt multi-sorting feature. To sort two or more columns, hold the CTRL key, and click the column header.
2ID | 1Name | Start Date | End Date | Duration | Progress |
|---|---|---|---|---|---|
| 40 | Begin Next Project Planning | 8/25/2025 | 8/28/2025 | 4 days | 0 |
| 39 | Celebrate Project Completion | 8/20/2025 | 8/22/2025 | 3 days | 0 |
| 34 | Client Handover | 7/21/2025 | 7/22/2025 | 2 days | 0 |
| 31 | Correction of Issues | 7/9/2025 | 7/11/2025 | 3 days | 0 |
| 28 | Exterior Finishing | 6/23/2025 | 6/26/2025 | 4 days | 0 |
| 30 | Final Inspection | 7/4/2025 | 7/8/2025 | 3 days | 0 |
| 38 | Final Project Documentation | 8/15/2025 | 8/19/2025 | 3 days | 0 |
| 32 | Final Walkthrough | 7/14/2025 | 7/15/2025 | 2 days | 0 |
| 37 | First Year Warranty Review | 8/8/2025 | 8/14/2025 | 5 days | 0 |
| 13 | Framing | 5/1/2025 | 5/8/2025 | 6 days | 100 |
| 14 | Frame Floors | 5/1/2025 | 5/2/2025 | 2 days | 100 |
| 15 | Frame Walls | 5/5/2025 | 5/6/2025 | 2 days | 100 |
| 16 | Install Trusses | 5/7/2025 | 5/8/2025 | 2 days | 100 |
| 33 | Handover Preparation | 7/16/2025 | 7/18/2025 | 3 days | 0 |
| 22 | Interior Finishing | 5/27/2025 | 6/20/2025 | 19 days | 0 |
| 26 | Cabinet and Fixture Setup | 6/13/2025 | 6/17/2025 | 3 days | 0 |
| 27 | Final Fixture Installation | 6/18/2025 | 6/20/2025 | 3 days | 0 |
| 25 | Flooring Installation | 6/9/2025 | 6/12/2025 | 4 days | 0 |
| 23 | Insulation and Drywall | 5/27/2025 | 6/2/2025 | 5 days | 0 |
| 24 | Interior Painting | 6/3/2025 | 6/6/2025 | 4 days | 0 |
| 29 | Landscaping | 6/27/2025 | 7/3/2025 | 5 days | 0 |
| 18 | Mechanical, Electrical, Plumbing | 5/14/2025 | 5/26/2025 | 9 days | 50 |
| 21 | Electrical Installation | 5/22/2025 | 5/26/2025 | 3 days | 0 |
| 19 | HVAC Installation | 5/14/2025 | 5/16/2025 | 3 days | 100 |
| 20 | Plumbing Installation | 5/19/2025 | 5/21/2025 | 3 days | 50 |
| 1 | Planning and Permits | 4/2/2025 | 4/10/2025 | 7 days | 100 |
| 4 | Finalize Planning | 4/9/2025 | 4/10/2025 | 2 days | 100 |
| 3 | Obtain Permits | 4/4/2025 | 4/8/2025 | 3 days | 100 |
| 2 | Site Evaluation | 4/2/2025 | 4/3/2025 | 2 days | 100 |
| 17 | Roofing | 5/9/2025 | 5/13/2025 | 3 days | 100 |
| 36 | Routine Maintenance Visits | 7/25/2025 | 8/7/2025 | 10 days | 0 |
| 5 | Site Preparation | 4/10/2025 | 4/30/2025 | 14 days | 100 |
| 9 | Foundation and Basement | 4/22/2025 | 4/30/2025 | 7 days | 100 |
| 12 | Basement Walls | 4/28/2025 | 4/30/2025 | 3 days | 100 |
| 11 | Cure Foundation | 4/24/2025 | 4/25/2025 | 2 days | 100 |
| 10 | Pour Foundation | 4/22/2025 | 4/23/2025 | 2 days | 100 |
| 8 | Foundation Work | 4/16/2025 | 4/21/2025 | 4 days | 100 |
| 7 | Grading and Excavation | 4/11/2025 | 4/15/2025 | 3 days | 100 |
| 6 | Site Clearing | 4/10/2025 | 4/10/2025 | 0 days | 100 |
| 35 | Warranty Period Begins | 7/23/2025 | 7/24/2025 | 2 days | 0 |
Mar 26, 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 | Jul 06, 2025 | Jul 13, 2025 | Jul 20, 2025 | Jul 27, 2025 | Aug 03, 2025 | Aug 10, 2025 | Aug 17, 2025 | Aug 24, 2025 | Aug 31, 2025 |
|---|
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 | 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 |
|---|
The sorting feature enables you to order data in a particular direction. It can be enabled by setting allowSelection to true.
To sort a Gantt column, click the column header. The icons (ascending) and (descending) specifies the sort direction of a column.
By default, the multi-sorting feature is enabled in Gantt. To sort multiple columns, hold the CTRL key, and then click the column header. To clear sort for a column, hold the SHIFT key, and then click the column header.
In this demo, multiple sorting enabled on load time by assigning multiple columns into sortSettings property.
Gantt component features are segregated into individual feature-wise modules.To use a selection, inject the
Selection module using the Gantt.Inject(Selection) method. To use sort, inject the
Sort module using the Gantt.Inject(Sort) method.To use markers, inject the
DayMarkers module using the Gantt.Inject(DayMarkers) method.
More information on the Essential® React Gantt Chart can be found in this documentation section.