New to Kendo UI for Angular? Start a free 30-day trial
Column Reordering
Updated on May 27, 2026
The Angular TreeList enables you to reorder its columns in two ways: by dragging the header cells or by implementing manual reordering on user interaction.
To enable column reordering, set the reorderable property to true. By default, the column-reordering feature is disabled.
The following example demonstrates how to reorder columns by dragging the header cells.
Change Theme
Theme
Loading ...
Manual Reordering
You can enable users to reorder a TreeList column on a button click or on another user interaction. To achieve this, use the reorderColumn method. The method can reorder only visible columns.
To reorder a column, provide the following arguments to the method:
- The column that needs to be reordered.
- The new column index.
- A
ColumnReorderConfigobject that configures the reordering behavior—set itsbeforeproperty to indicate whether the reordered column will be positioned before or after the destination index.
ts
public onClick(treelist: TreeListComponent, column: ColumnBase) {
treelist.reorderColumn(column, 0, { before: true });
}The following example demonstrates how to reorder the last column on a button click and make it first.
Change Theme
Theme
Loading ...