React Data Grid ManualRowMove
Description
This plugin allows to change rows order. To make rows order persistent the Options#persistentState plugin should be enabled.
API:
moveRow- move single row to the new position.moveRows- move many rows (as an array of indexes) to the new position.dragRow- drag single row to the new position.dragRows- drag many rows (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 rows.
- guideline - line which shows where rows has been moved.
Options
manualRowMove
Source code (opens new window)manualRowMove.manualRowMove : boolean | Array<number>
The manualRowMove option configures the ManualRowMove plugin.
You can set the manualRowMove option to one of the following:
| Setting | Description |
|---|---|
true | Enable the ManualRowMove plugin |
false | Disable the ManualRowMove plugin |
| An array | - Enable the ManualRowMove plugin- Move individual rows at initialization |
Read more:
Default: undefined
Example
// enable the `ManualRowMove` plugin
manualRowMove: true,
// enable the `ManualRowMove` plugin
// at initialization, move row 0 to 1
// at initialization, move row 1 to 4
// at initialization, move row 2 to 6
manualColumnMove: [1, 4, 6],
Methods
destroy
Source code (opens new window)manualRowMove.destroy()
Destroys the plugin instance.
disablePlugin
Source code (opens new window)manualRowMove.disablePlugin()
Disables the plugin functionality for this Handsontable instance.
dragRow
Source code (opens new window)manualRowMove.dragRow(row, dropIndex) ⇒ boolean
Drag a single row to drop index position.
Emits: Hooks#event:beforeRowMove, Hooks#event:afterRowMove
| Param | Type | Description |
|---|---|---|
| row | number | Visual row index to be dragged. |
| dropIndex | number | Visual row index, being a drop index for the moved rows. Points to where we are going to drop the moved elements. To check visualization of drop index please take a look at documentation. |
dragRows
Source code (opens new window)manualRowMove.dragRows(rows, dropIndex) ⇒ boolean
Drag multiple rows to drop index position.
Emits: Hooks#event:beforeRowMove, Hooks#event:afterRowMove
| Param | Type | Description |
|---|---|---|
| rows | Array | Array of visual row indexes to be dragged. |
| dropIndex | number | Visual row index, being a drop index for the moved rows. 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 (opens new window)manualRowMove.enablePlugin()
Enables the plugin functionality for this Handsontable instance.
isEnabled
Source code (opens new window)manualRowMove.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 ManualRowMove#enablePlugin method is called.
isMovePossible
Source code (opens new window)manualRowMove.isMovePossible(movedRows, finalIndex) ⇒ boolean
Indicates if it's possible to move rows 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 |
|---|---|---|
| movedRows | Array | Array of visual row indexes to be moved. |
| finalIndex | number | Visual row index, being a start index for the moved rows. 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. |
moveRow
Source code (opens new window)manualRowMove.moveRow(row, finalIndex) ⇒ boolean
Moves a single row.
To see the outcome, rerender your grid by calling render().
Emits: Hooks#event:beforeRowMove, Hooks#event:afterRowMove
| Param | Type | Description |
|---|---|---|
| row | number | Visual row index to be moved. |
| finalIndex | number | Visual row index, being a start index for the moved rows. 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. |
moveRows
Source code (opens new window)manualRowMove.moveRows(rows, finalIndex) ⇒ boolean
Moves multiple rows.
To see the outcome, rerender your grid by calling render().
Emits: Hooks#event:beforeRowMove, Hooks#event:afterRowMove
| Param | Type | Description |
|---|---|---|
| rows | Array | Array of visual row indexes to be moved. |
| finalIndex | number | Visual row index, being a start index for the moved rows. 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 (opens new window)manualRowMove.updatePlugin()
Updates the plugin's state.
This method is executed when updateSettings() is invoked with any of the following configuration options: