Example of Column Reorder in React Gantt

/
/
Reorder Column

This sample demonstrates column reordering in the Gantt Chart. Reorder columns either by dragging column headers to a new position or by selecting a column and target index from the property panel.

More Details...

Loading....
Description

This example demonstrates the column reordering feature in the Gantt Chart. Column reordering can be enabled by setting the allowReordering property to true. Columns can be reordered by dragging a column header and dropping it at the desired position within the TreeGrid area. Visual indicators are displayed to show the target drop location during the reordering operation.

In this sample, columns can also be reordered programmatically using the property panel by selecting a column and its destination index.

Gantt component features are segregated into individual feature-wise modules. To use reordering and selection features, we need to inject Reorder and Selection into the Inject Services section.


More information on the Essential® React Gantt Chart can be found in this column reordering documentation section.


Looking for the full React Gantt Chart component overview, features, pricing, and documentation? Visit the React Gantt Chart page.