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 |
|---|---|---|---|---|---|
| 27 | Exterior finishing | 5/27/2024 | 6/6/2024 | 9 days | 15 |
| 29 | Add water resistive barrier | 5/30/2024 | 6/3/2024 | 3 days | 0 |
| 28 | Cover outer walls and roof in OSB | 5/27/2024 | 5/29/2024 | 3 days | 30 |
| 30 | Install roof shingles | 6/4/2024 | 6/6/2024 | 3 days | 30 |
| 31 | Install windows | 6/4/2024 | 6/6/2024 | 3 days | 0 |
| 48 | Final Acceptance | 7/11/2024 | 7/16/2024 | 4 days | 15 |
| 50 | Cleanup for occupancy | 7/15/2024 | 7/16/2024 | 2 days | 0 |
| 49 | Final inspection | 7/11/2024 | 7/12/2024 | 2 days | 30 |
| 51 | Property handover | 7/16/2024 | 7/16/2024 | 0 days | 0 |
| 45 | Flooring | 7/8/2024 | 7/10/2024 | 3 days | 15 |
| 47 | Tile floor | 7/8/2024 | 7/10/2024 | 3 days | 0 |
| 46 | Tile kitchen, bathroom and entry walls | 7/8/2024 | 7/10/2024 | 3 days | 30 |
| 14 | Foundation | 4/23/2024 | 5/8/2024 | 12 days | 23 |
| 19 | Cure basement walls | 5/3/2024 | 5/8/2024 | 4 days | 30 |
| 16 | Dig footer | 4/24/2024 | 4/25/2024 | 2 days | 0 |
| 15 | Excavate for foundations | 4/23/2024 | 4/25/2024 | 3 days | 30 |
| 17 | Install plumbing grounds | 4/26/2024 | 5/1/2024 | 4 days | 30 |
| 18 | Pour a foundation and footer with concrete | 5/2/2024 | 5/2/2024 | 1 day | 0 |
| 20 | Framing | 5/9/2024 | 5/24/2024 | 12 days | 20 |
| 23 | Add ceiling joists | 5/14/2024 | 5/16/2024 | 3 days | 30 |
| 21 | Add load-bearing structure | 5/9/2024 | 5/13/2024 | 3 days | 30 |
| 26 | Frame floor decking | 5/22/2024 | 5/24/2024 | 3 days | 30 |
| 25 | Frame floor walls | 5/22/2024 | 5/24/2024 | 3 days | 30 |
| 22 | Install floor joists | 5/14/2024 | 5/16/2024 | 3 days | 0 |
| 24 | Install subfloor panels | 5/17/2024 | 5/21/2024 | 3 days | 0 |
| 38 | Interior finsihing | 6/12/2024 | 7/5/2024 | 18 days | 20 |
| 42 | Apply primer | 6/25/2024 | 6/27/2024 | 3 days | 0 |
| 40 | Install drywall panels | 6/17/2024 | 6/19/2024 | 3 days | 0 |
| 39 | Install insulation | 6/12/2024 | 6/14/2024 | 3 days | 30 |
| 44 | Install modular kitchen | 7/3/2024 | 7/5/2024 | 3 days | 30 |
| 43 | Paint wall and ceilings | 6/28/2024 | 7/2/2024 | 3 days | 30 |
| 41 | Spackle | 6/20/2024 | 6/24/2024 | 3 days | 30 |
| 10 | Project approval and kick off | 4/16/2024 | 4/16/2024 | 0 days | 0 |
| 5 | Project estimation | 4/8/2024 | 4/15/2024 | 6 days | 15 |
| 6 | Develop floor plan for estimation | 4/8/2024 | 4/10/2024 | 3 days | 30 |
| 8 | Estimation approval | 4/15/2024 | 4/15/2024 | 0 days | 0 |
| 7 | List materials | 4/11/2024 | 4/15/2024 | 3 days | 0 |
| 1 | Project initiation | 4/2/2024 | 4/5/2024 | 4 days | 0 |
| 2 | Identify site location | 4/2/2024 | 4/2/2024 | 0 days | 30 |
| 3 | Perform Soil test | 4/2/2024 | 4/5/2024 | 4 days | 0 |
| 4 | Soil test approval | 4/5/2024 | 4/5/2024 | 0 days | 30 |
| 9 | Sign contract | 4/16/2024 | 4/16/2024 | 1 day | 30 |
| 11 | Site work | 4/17/2024 | 4/22/2024 | 4 days | 15 |
| 12 | Clear the building site | 4/17/2024 | 4/18/2024 | 2 days | 30 |
| 13 | Install temporary power service | 4/19/2024 | 4/22/2024 | 2 days | 0 |
| 32 | Utilities | 5/27/2024 | 6/11/2024 | 12 days | 18 |
| 35 | Electrical utilities | 6/4/2024 | 6/6/2024 | 3 days | 30 |
| 37 | Install bathroom fixtures | 6/7/2024 | 6/11/2024 | 3 days | 30 |
| 34 | Install HVAC | 5/30/2024 | 6/3/2024 | 3 days | 0 |
| 33 | Install internal plumbing | 5/27/2024 | 5/29/2024 | 3 days | 30 |
| 36 | Natural gas utilities | 6/7/2024 | 6/11/2024 | 3 days | 0 |
Mar 25, 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 | Jul 07, 2024 | Jul 14, 2024 | Jul 21, 2024 |
|---|
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 |
|---|
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.