React Data GridManualColumnMove

On this page

• Description
• Options
  • manualColumnMove
• Methods
  • destroy
  • disablePlugin
  • dragColumn
  • dragColumns
  • enablePlugin
  • isEnabled
  • isMovePossible
  • moveColumn
  • moveColumns
  • updatePlugin

Description

This plugin allows to change columns order. To make columns order persistent the Options#persistentState plugin should be enabled.

API:

• moveColumn - move single column to the new position.
• moveColumns - move many columns (as an array of indexes) to the new position.
• dragColumn - drag single column to the new position.
• dragColumns - drag many columns (as an array of indexes) to the new position.

Documentation explain differences between drag and move actions. Please keep in mind that if you want apply visual changes, you have to call manually the render method on the instance of Handsontable.

The plugin creates additional components to make moving possibly using user interface:

• backlight - highlight of selected columns.
• guideline - line which shows where columns has been moved.

Options

manualColumnMove

Source code

manualColumnMove.manualColumnMove : boolean | Array<number>

The manualColumnMove option configures the ManualColumnMove plugin.

You can set the manualColumnMove option to one of the following:

Setting	Description
true	Enable the ManualColumnMove plugin
false	Disable the ManualColumnMove plugin
An array	- Enable the ManualColumnMove plugin - Move individual columns at initialization

Read more:

• Column moving

Default: undefined
Example

// enable the `ManualColumnMove` plugin
manualColumnMove: true,

// enable the `ManualColumnMove` plugin
// at initialization, move column 0 to 1
// at initialization, move column 1 to 4
// at initialization, move column 2 to 6
manualColumnMove: [1, 4, 6],

Methods

destroy

Source code

manualColumnMove.destroy()

Destroys the plugin instance.

disablePlugin

Source code

manualColumnMove.disablePlugin()

Disables the plugin functionality for this Handsontable instance.

dragColumn

Source code

manualColumnMove.dragColumn(column, dropIndex) ⇒ boolean

Drag a single column to drop index position.

Emits: Hooks#event:beforeColumnMove, Hooks#event:afterColumnMove

Param	Type	Description
column	number	Visual column index to be dragged.
dropIndex	number	Visual column index, being a drop index for the moved columns. Points to where we are going to drop the moved elements. To check visualization of drop index please take a look at documentation.

dragColumns

Source code

manualColumnMove.dragColumns(columns, dropIndex) ⇒ boolean

Drag multiple columns to drop index position.

Emits: Hooks#event:beforeColumnMove, Hooks#event:afterColumnMove

Param	Type	Description
columns	Array	Array of visual column indexes to be dragged.
dropIndex	number	Visual column index, being a drop index for the moved columns. Points to where we are going to drop the moved elements. To check visualization of drop index please take a look at documentation.

enablePlugin

Source code

manualColumnMove.enablePlugin()

Enables the plugin functionality for this Handsontable instance.

isEnabled

Source code

manualColumnMove.isEnabled() ⇒ boolean

Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInit hook and if it returns true then the ManualColumnMove#enablePlugin method is called.

isMovePossible

Source code

manualColumnMove.isMovePossible(movedColumns, finalIndex) ⇒ boolean

Indicates if it's possible to move columns to the desired position. Some of the actions aren't possible, i.e. You can’t move more than one element to the last position.

Param	Type	Description
movedColumns	Array	Array of visual column indexes to be moved.
finalIndex	number	Visual column index, being a start index for the moved columns. Points to where the elements will be placed after the moving action. To check the visualization of the final index, please take a look at documentation.

moveColumn

Source code

manualColumnMove.moveColumn(column, finalIndex) ⇒ boolean

Moves a single column.

Emits: Hooks#event:beforeColumnMove, Hooks#event:afterColumnMove

Param	Type	Description
column	number	Visual column index to be moved.
finalIndex	number	Visual column index, being a start index for the moved columns. Points to where the elements will be placed after the moving action. To check the visualization of the final index, please take a look at documentation.

moveColumns

Source code

manualColumnMove.moveColumns(columns, finalIndex) ⇒ boolean

Moves a multiple columns.

Emits: Hooks#event:beforeColumnMove, Hooks#event:afterColumnMove

Param	Type	Description
columns	Array	Array of visual column indexes to be moved.
finalIndex	number	Visual column index, being a start index for the moved columns. Points to where the elements will be placed after the moving action. To check the visualization of the final index, please take a look at documentation.

updatePlugin

Source code

manualColumnMove.updatePlugin()

Updates the plugin's state.

This method is executed when updateSettings() is invoked with any of the following configuration options:

• manualColumnMove