This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Column moving

# Overview

This page shows you how to move columns in Handsontable.

# Enabling plugin

Use the setting manualColumnMove: true to enable this feature.

A draggable move handle appears above the selected column header. You can click and drag it to any location in the grid.

    # Drag and move actions of manualColumnMove plugin

    There are significant differences between the plugin's dragColumns and moveColumns API functions. Both of them change the order of columns, but they rely on different kinds of indexes. The differences between them are shown in the diagrams below.


    Both of these methods trigger the beforeColumnMove and afterColumnMove hooks, but only dragColumns passes the dropIndex argument to them.

    The dragColumns method has a dropIndex parameter, which points to where the elements are being dropped.

    dragColumns method

    The moveColumns method has a finalIndex parameter, which points to where the elements will be placed after the moving action - finalIndex being the index of the first moved element.

    moveColumns method

    The moveColumns function cannot perform some actions, e.g., more than one element can't be moved to the last position. In this scenario, the move will be cancelled. The Plugin's isMovePossible API method and the movePossible parameters beforeColumnMove and afterColumnMove hooks help in determine such situations.