This sample demonstrates the sorting feature in the Gantt Chart. To sort multiple columns, hold the CTRL key and click the desired column headers.
The Gantt Chart supports both single-column and multi-column sorting, allowing task data to be arranged in ascending or descending order. Sorting can be enabled by setting the allowSorting to true.
To sort a column, click its header. Repeated clicks toggle the sort direction between ascending and descending order. Sort indicators in the column header visually represent the current sort direction.
Multi-sorting is enabled by default. To sort by multiple columns, hold the CTRL key and click additional column headers. To remove sorting from a column, hold the SHIFT key and click its header. In this example, initial multi-column sorting is applied using the sortSettings property to sort tasks by Task Name and Task ID in ascending order.
Gantt component features are segregated into individual feature-wise modules. To use a selection, markers and sorting features, we need to inject the Selection, DayMarkers and Sort into the Inject Services section.
More information on the Essential® React Gantt Chart can be found in this sorting documentation section.
Looking for the full React Gantt Chart component overview, features, pricing, and documentation? Visit the React Gantt Chart page.