The sorting feature enables you to order data in a particular direction. It can be enabled by setting allowSorting to true.
ID | TaskName | StartDate | EndDate | Duration | Progress |
|---|---|---|---|---|---|
| 1 | Planning and Permits | 4/2/2025 | 4/10/2025 | 7 days | 100 |
| 2 | Site Evaluation | 4/2/2025 | 4/3/2025 | 2 days | 100 |
| 3 | Obtain Permits | 4/4/2025 | 4/8/2025 | 3 days | 100 |
| 4 | Finalize Planning | 4/9/2025 | 4/10/2025 | 2 days | 100 |
| 5 | Site Preparation | 4/10/2025 | 4/30/2025 | 14 days | 100 |
| 6 | Site Clearing | 4/10/2025 | 4/10/2025 | 0 days | 100 |
| 7 | Grading and Excavation | 4/11/2025 | 4/15/2025 | 3 days | 100 |
| 8 | Foundation Work | 4/16/2025 | 4/21/2025 | 4 days | 100 |
| 9 | Foundation and Basement | 4/22/2025 | 4/30/2025 | 7 days | 100 |
| 10 | Pour Foundation | 4/22/2025 | 4/23/2025 | 2 days | 100 |
| 11 | Cure Foundation | 4/24/2025 | 4/25/2025 | 2 days | 100 |
| 12 | Basement Walls | 4/28/2025 | 4/30/2025 | 3 days | 100 |
| 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 |
| 17 | Roofing | 5/9/2025 | 5/13/2025 | 3 days | 100 |
| 18 | Mechanical, Electrical, Plumbing | 5/14/2025 | 5/26/2025 | 9 days | 50 |
| 19 | HVAC Installation | 5/14/2025 | 5/16/2025 | 3 days | 100 |
| 20 | Plumbing Installation | 5/19/2025 | 5/21/2025 | 3 days | 50 |
| 21 | Electrical Installation | 5/22/2025 | 5/26/2025 | 3 days | 0 |
| 22 | Interior Finishing | 5/27/2025 | 6/20/2025 | 19 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 |
| 25 | Flooring Installation | 6/9/2025 | 6/12/2025 | 4 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 |
| 28 | Exterior Finishing | 6/23/2025 | 6/26/2025 | 4 days | 0 |
| 29 | Landscaping | 6/27/2025 | 7/3/2025 | 5 days | 0 |
| 30 | Final Inspection | 7/4/2025 | 7/8/2025 | 3 days | 0 |
| 31 | Correction of Issues | 7/9/2025 | 7/11/2025 | 3 days | 0 |
| 32 | Final Walkthrough | 7/14/2025 | 7/15/2025 | 2 days | 0 |
| 33 | Handover Preparation | 7/16/2025 | 7/18/2025 | 3 days | 0 |
| 34 | Client Handover | 7/21/2025 | 7/22/2025 | 2 days | 0 |
| 35 | Warranty Period Begins | 7/23/2025 | 7/24/2025 | 2 days | 0 |
| 36 | Routine Maintenance Visits | 7/25/2025 | 8/7/2025 | 10 days | 0 |
| 37 | First Year Warranty Review | 8/8/2025 | 8/14/2025 | 5 days | 0 |
| 38 | Final Project Documentation | 8/15/2025 | 8/19/2025 | 3 days | 0 |
| 39 | Celebrate Project Completion | 8/20/2025 | 8/22/2025 | 3 days | 0 |
| 40 | Begin Next Project Planning | 8/25/2025 | 8/28/2025 | 4 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 |
|---|
Column |
Direction |
The sorting feature enables you to order data in a particular direction. It can be enabled by setting the allowSelection to true.
To sort a Gantt column, click the column header. The icons (ascending) and (descending) specify 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, select the column and direction from the properties panel, and then click the Sort button. Use the Clear button to remove sort for the sorted column.
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.