React Data Grid Column moving
Change the order of columns, either manually (dragging them to another location), or programmatically (using Handsontable's API methods).
Enable the plugin
To enable column moving, set the
manualColumnMove configuration option to
A draggable move handle appears above the selected column header. You can click and drag it to any location in the grid.
Move column headers
When you move columns, the default column headers (A, B, C) stay in place.
But, if you configure the
colHeaders option with your own column labels (e.g., One, Two, Three), your headers move along with the columns.
Drag and move actions of the
There are significant differences between the plugin's
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
afterColumnMove hooks, but only
dragColumns passes the
dropIndex argument to them.
dragColumns method has a
dropIndex parameter, which points to where the elements are being dropped.
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 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
afterColumnMove hooks help in determine such situations.
Related API reference
- Configuration options:
- Core methods: