This page shows how to move rows and columns in Handsontable.

Enabling plugins

To enable move features, use settings manualColumnMove: true and manualRowMove: true

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

Drag and move actions of manualRowMove plugin

There are significant differences between the plugin's dragRows and moveRows API functions. Both of them change the order of rows, but what is important, they rely on other kind of indexes. The differences between them are shown in the diagrams below. Please keep in mind that both of these methods trigger the afterRowMove and beforeRowMove hooks, but only dragRows passes the dropIndex argument to them.

1. The dragRows method with the dropIndex parameter. This argument points to where we are going to drop the moved elements.

dragRows method

2. The moveRows method with the finalIndex parameter. The argument points to where the elements will be placed after the moving action (finalIndex being the index of the first moved element).

moveRows method

Some of actions to be performed by moveRows function aren't possible, i.e. we can't move more than one element to the last position. In this case, the move will be cancelled. The Plugin's isMovePossible API method and the movePossible parameter of beforeRowMove and afterRowMove hooks may be helpful in determining such situations.

Help us improve this page

Tutorial: Moving