JavaScript Data GridHooks
- Members
- afterAddChild
- afterAutofill
- afterBeginEditing
- afterCellMetaReset
- afterChange
- afterColumnCollapse
- afterColumnExpand
- afterColumnFreeze
- afterColumnMove
- afterColumnResize
- afterColumnSequenceChange
- afterColumnSort
- afterColumnUnfreeze
- afterContextMenuDefaultOptions
- afterContextMenuHide
- afterContextMenuShow
- afterCopy
- afterCopyLimit
- afterCreateCol
- afterCreateRow
- afterCut
- afterDeselect
- afterDestroy
- afterDetachChild
- afterDocumentKeyDown
- afterDrawSelection
- afterDropdownMenuDefaultOptions
- afterDropdownMenuHide
- afterDropdownMenuShow
- afterFilter
- afterFormulasValuesUpdate
- afterGetCellMeta
- afterGetColHeader
- afterGetColumnHeaderRenderers
- afterGetRowHeader
- afterGetRowHeaderRenderers
- afterHideColumns
- afterHideRows
- afterInit
- afterLanguageChange
- afterListen
- afterLoadData
- afterMergeCells
- afterModifyTransformEnd
- afterModifyTransformFocus
- afterModifyTransformStart
- afterMomentumScroll
- afterNamedExpressionAdded
- afterNamedExpressionRemoved
- afterOnCellContextMenu
- afterOnCellCornerDblClick
- afterOnCellCornerMouseDown
- afterOnCellMouseDown
- afterOnCellMouseOut
- afterOnCellMouseOver
- afterOnCellMouseUp
- afterPaste
- afterPluginsInitialized
- afterRedo
- afterRedoStackChange
- afterRefreshDimensions
- afterRemoveCellMeta
- afterRemoveCol
- afterRemoveRow
- afterRender
- afterRenderer
- afterRowMove
- afterRowResize
- afterRowSequenceChange
- afterScroll
- afterScrollHorizontally
- afterScrollVertically
- afterSelectColumns
- afterSelection
- afterSelectionByProp
- afterSelectionEnd
- afterSelectionEndByProp
- afterSelectionFocusSet
- afterSelectRows
- afterSetCellMeta
- afterSetDataAtCell
- afterSetDataAtRowProp
- afterSetSourceDataAtCell
- afterSetTheme
- afterSheetAdded
- afterSheetRemoved
- afterSheetRenamed
- afterTrimRow
- afterUndo
- afterUndoStackChange
- afterUnhideColumns
- afterUnhideRows
- afterUnlisten
- afterUnmergeCells
- afterUntrimRow
- afterUpdateData
- afterUpdateSettings
- afterValidate
- afterViewportColumnCalculatorOverride
- afterViewportRowCalculatorOverride
- afterViewRender
- beforeAddChild
- beforeAutofill
- beforeBeginEditing
- beforeCellAlignment
- beforeChange
- beforeChangeRender
- beforeColumnCollapse
- beforeColumnExpand
- beforeColumnFreeze
- beforeColumnMove
- beforeColumnResize
- beforeColumnSort
- beforeColumnUnfreeze
- beforeColumnWrap
- beforeContextMenuSetItems
- beforeContextMenuShow
- beforeCopy
- beforeCreateCol
- beforeCreateRow
- beforeCut
- beforeDetachChild
- beforeDrawBorders
- beforeDropdownMenuSetItems
- beforeDropdownMenuShow
- beforeFilter
- beforeGetCellMeta
- beforeHideColumns
- beforeHideRows
- beforeHighlightingColumnHeader
- beforeHighlightingRowHeader
- beforeInit
- beforeInitWalkontable
- beforeKeyDown
- beforeLanguageChange
- beforeLoadData
- beforeMergeCells
- beforeOnCellContextMenu
- beforeOnCellMouseDown
- beforeOnCellMouseOut
- beforeOnCellMouseOver
- beforeOnCellMouseUp
- beforePaste
- beforeRedo
- beforeRedoStackChange
- beforeRefreshDimensions
- beforeRemoveCellClassNames
- beforeRemoveCellMeta
- beforeRemoveCol
- beforeRemoveRow
- beforeRender
- beforeRenderer
- beforeRowMove
- beforeRowResize
- beforeRowWrap
- beforeSelectColumns
- beforeSelectionFocusSet
- beforeSelectionHighlightSet
- beforeSelectRows
- beforeSetCellMeta
- beforeSetRangeEnd
- beforeSetRangeStart
- beforeSetRangeStartOnly
- beforeStretchingColumnWidth
- beforeTouchScroll
- beforeTrimRow
- beforeUndo
- beforeUndoStackChange
- beforeUnhideColumns
- beforeUnhideRows
- beforeUnmergeCells
- beforeUntrimRow
- beforeUpdateData
- beforeValidate
- beforeValueRender
- beforeViewportScroll
- beforeViewportScrollHorizontally
- beforeViewportScrollVertically
- beforeViewRender
- construct
- init
- modifyAutoColumnSizeSeed
- modifyAutofillRange
- modifyColHeader
- modifyColumnHeaderHeight
- modifyColumnHeaderValue
- modifyColWidth
- modifyCopyableRange
- modifyData
- modifyFiltersMultiSelectValue
- modifyFocusedElement
- modifyFocusOnTabNavigation
- modifyGetCellCoords
- modifyGetCoordsElement
- modifyRowData
- modifyRowHeader
- modifyRowHeaderWidth
- modifyRowHeight
- modifyRowHeightByOverlayName
- modifySourceData
- modifyTransformEnd
- modifyTransformFocus
- modifyTransformStart
- persistentStateLoad
- persistentStateReset
- persistentStateSave
Members
afterAddChild
Source codeafterAddChild(parent, element, index)
Fired by NestedRows plugin after adding a children to the NestedRows
structure. This hook is fired when
Options#nestedRows option is enabled.
Param | Type | Description |
---|---|---|
parent | object | The parent object. |
element | object undefined | The element added as a child. If undefined , a blank child was added. |
index | number undefined | The index within the parent where the new child was added. If undefined , the element was added as the last child. |
afterAutofill
Source codeafterAutofill(fillData, sourceRange, targetRange, direction)
Fired by Autofill plugin after populating the data in the autofill feature. This hook is fired when Options#fillHandle option is enabled.
Since: 8.0.0
Param | Type | Description |
---|---|---|
fillData | Array<Array> | The data that was used to fill the targetRange . If beforeAutofill was used and returned [[]] , this will be the same object that was returned from beforeAutofill . |
sourceRange | CellRange | The range values will be filled from. |
targetRange | CellRange | The range new values will be filled into. |
direction | string | Declares the direction of the autofill. Possible values: up , down , left , right . |
afterBeginEditing
Source codeafterBeginEditing(row, column)
Fired after the editor is opened and rendered.
Param | Type | Description |
---|---|---|
row | number | Visual row index of the edited cell. |
column | number | Visual column index of the edited cell. |
afterCellMetaReset
Source codeafterCellMetaReset
Fired after resetting a cell's meta. This happens when the Core#updateSettings method is called.
afterChange
Source codeafterChange(changes, [source])
Fired after one or more cells has been changed. The changes are triggered in any situation when the
value is entered using an editor or changed using API (e.q setDataAtCell
method).
Note: For performance reasons, the changes
array is null for "loadData"
source.
Example
new Handsontable(element, {
afterChange: (changes) => {
changes?.forEach(([row, prop, oldValue, newValue]) => {
// Some logic...
});
}
})
Param | Type | Description |
---|---|---|
changes | Array<Array> | 2D array containing information about each of the edited cells [[row, prop, oldVal, newVal], ...] . row is a visual row index. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterColumnCollapse
Source codeafterColumnCollapse(currentCollapsedColumns, destinationCollapsedColumns, collapsePossible, successfullyCollapsed)
Fired by CollapsibleColumns plugin before columns collapse. This hook is fired when Options#collapsibleColumns option is enabled.
Since: 8.0.0
Param | Type | Description |
---|---|---|
currentCollapsedColumns | Array | Current collapsible configuration - a list of collapsible physical column indexes. |
destinationCollapsedColumns | Array | Destination collapsible configuration - a list of collapsible physical column indexes. |
collapsePossible | boolean | true , if all of the column indexes are withing the bounds of the collapsed sections, false otherwise. |
successfullyCollapsed | boolean | true , if the action affected any non-collapsible column, false otherwise. |
afterColumnExpand
Source codeafterColumnExpand(currentCollapsedColumns, destinationCollapsedColumns, expandPossible, successfullyExpanded)
Fired by CollapsibleColumns plugin before columns expand. This hook is fired when Options#collapsibleColumns option is enabled.
Since: 8.0.0
Param | Type | Description |
---|---|---|
currentCollapsedColumns | Array | Current collapsible configuration - a list of collapsible physical column indexes. |
destinationCollapsedColumns | Array | Destination collapsible configuration - a list of collapsible physical column indexes. |
expandPossible | boolean | true , if all of the column indexes are withing the bounds of the collapsed sections, false otherwise. |
successfullyExpanded | boolean | true , if the action affected any non-collapsible column, false otherwise. |
afterColumnFreeze
Source codeafterColumnFreeze(column, freezePerformed)
Fired by the ManualColumnFreeze plugin, right after freezing a column.
Since: 12.1.0
Param | Type | Description |
---|---|---|
column | number | The visual index of the frozen column. |
freezePerformed | boolean | If true : the column got successfully frozen. If false : the column didn't get frozen. |
afterColumnMove
Source codeafterColumnMove(movedColumns, finalIndex, dropIndex, movePossible, orderChanged)
Fired by ManualColumnMove plugin after changing order of the visual indexes. This hook is fired when Options#manualColumnMove option is enabled.
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 visualization of final index please take a look at documentation. |
dropIndex | number undefined | 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. It's undefined when dragColumns function wasn't called. |
movePossible | boolean | Indicates if it was possible to move columns to the desired position. |
orderChanged | boolean | Indicates if order of columns was changed by move. |
afterColumnResize
Source codeafterColumnResize(newSize, column, isDoubleClick)
Fired by ManualColumnResize plugin after rendering the table with modified column sizes. This hook is fired when Options#manualColumnResize option is enabled.
Param | Type | Description |
---|---|---|
newSize | number | Calculated new column width. |
column | number | Visual index of the resized column. |
isDoubleClick | boolean | Flag that determines whether there was a double-click. |
afterColumnSequenceChange
Source codeafterColumnSequenceChange([source])
Fired after the order of columns has changed. This hook is fired by changing column indexes of any type supported by the IndexMapper.
Param | Type | Description |
---|---|---|
[source] | 'init' 'remove' 'insert' 'move' 'update' | optional A string that indicates what caused the change to the order of columns. |
afterColumnSort
Source codeafterColumnSort(currentSortConfig, destinationSortConfigs)
Fired by ColumnSorting and MultiColumnSorting plugins after sorting the column. This hook is fired when Options#columnSorting or Options#multiColumnSorting option is enabled.
Param | Type | Description |
---|---|---|
currentSortConfig | Array | Current sort configuration (for all sorted columns). |
destinationSortConfigs | Array | Destination sort configuration (for all sorted columns). |
afterColumnUnfreeze
Source codeafterColumnUnfreeze(column, unfreezePerformed)
Fired by the ManualColumnFreeze plugin, right after unfreezing a column.
Since: 12.1.0
Param | Type | Description |
---|---|---|
column | number | The visual index of the unfrozen column. |
unfreezePerformed | boolean | If true : the column got successfully unfrozen. If false : the column didn't get unfrozen. |
afterContextMenuDefaultOptions
Source codeafterContextMenuDefaultOptions(predefinedItems)
Fired each time user opens ContextMenu and after setting up the Context Menu's default options. These options are a collection which user can select by setting an array of keys or an array of objects in Options#contextMenu option.
Param | Type | Description |
---|---|---|
predefinedItems | Array | An array of objects containing information about the pre-defined Context Menu items. |
afterContextMenuHide
Source codeafterContextMenuHide(context)
Fired by ContextMenu plugin after hiding the Context Menu. This hook is fired when Options#contextMenu option is enabled.
Param | Type | Description |
---|---|---|
context | object | The Context Menu plugin instance. |
afterContextMenuShow
Source codeafterContextMenuShow(context)
Fired by ContextMenu plugin after opening the Context Menu. This hook is fired when Options#contextMenu option is enabled.
Param | Type | Description |
---|---|---|
context | object | The Context Menu plugin instance. |
afterCopy
Source codeafterCopy(data, coords, copiedHeadersCount)
Fired by CopyPaste plugin after data are pasted into table. This hook is fired when Options#copyPaste option is enabled.
Param | Type | Description |
---|---|---|
data | Array<Array> | An array of arrays which contains the copied data. |
coords | Array<object> | An array of objects with ranges of the visual indexes (startRow , startCol , endRow , endCol ) which was copied. |
copiedHeadersCount | Object | (Since 12.3.0) The number of copied column headers. |
afterCopyLimit
Source codeafterCopyLimit(selectedRows, selectedColumns, copyRowsLimit, copyColumnsLimit)
Fired by CopyPaste plugin after reaching the copy limit while copying data. This hook is fired when Options#copyPaste option is enabled.
Param | Type | Description |
---|---|---|
selectedRows | number | Count of selected copyable rows. |
selectedColumns | number | Count of selected copyable columns. |
copyRowsLimit | number | Current copy rows limit. |
copyColumnsLimit | number | Current copy columns limit. |
afterCreateCol
Source codeafterCreateCol(index, amount, [source])
Fired after created a new column.
Param | Type | Description |
---|---|---|
index | number | Represents the visual index of first newly created column in the data source. |
amount | number | Number of newly created columns in the data source. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterCreateRow
Source codeafterCreateRow(index, amount, [source])
Fired after created a new row.
Param | Type | Description |
---|---|---|
index | number | Represents the visual index of first newly created row in the data source array. |
amount | number | Number of newly created rows in the data source array. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterCut
Source codeafterCut(data, coords)
Fired by CopyPaste plugin after data was cut out from the table. This hook is fired when Options#copyPaste option is enabled.
Param | Type | Description |
---|---|---|
data | Array<Array> | An array of arrays with the cut data. |
coords | Array<object> | An array of objects with ranges of the visual indexes (startRow , startCol , endRow , endCol ) which was cut out. |
afterDeselect
Source codeafterDeselect
Fired after all selected cells are deselected.
afterDestroy
Source codeafterDestroy
Fired after destroying the Handsontable instance.
afterDetachChild
Source codeafterDetachChild(parent, element, finalElementPosition)
Fired by NestedRows plugin after detaching a child from its parent. This hook is fired when Options#nestedRows option is enabled.
Param | Type | Description |
---|---|---|
parent | object | An object representing the parent from which the element was detached. |
element | object | The detached element. |
finalElementPosition | number | The final row index of the detached element. |
afterDocumentKeyDown
Source codeafterDocumentKeyDown(event)
Hook fired after keydown
event is handled.
Param | Type | Description |
---|---|---|
event | Event | A native keydown event object. |
afterDrawSelection
Source codeafterDrawSelection(currentRow, currentColumn, cornersOfSelection, layerLevel) ⇒ string | undefined
Fired inside the Walkontable's selection draw
method. Can be used to add additional class names to cells, depending on the current selection.
Since: 0.38.1
Param | Type | Description |
---|---|---|
currentRow | number | Row index of the currently processed cell. |
currentColumn | number | Column index of the currently cell. |
cornersOfSelection | Array<number> | Array of the current selection in a form of [startRow, startColumn, endRow, endColumn] . |
layerLevel | number undefined | Number indicating which layer of selection is currently processed. |
Returns: string
| undefined
- Can return a String
, which will act as an additional className
to be added to the currently processed cell.
afterDropdownMenuDefaultOptions
Source codeafterDropdownMenuDefaultOptions(predefinedItems)
Fired by DropdownMenu plugin after setting up the Dropdown Menu's default options. These options are a collection which user can select by setting an array of keys or an array of objects in Options#dropdownMenu option.
Param | Type | Description |
---|---|---|
predefinedItems | Array<object> | An array of objects containing information about the pre-defined Context Menu items. |
afterDropdownMenuHide
Source codeafterDropdownMenuHide(instance)
Fired by DropdownMenu plugin after hiding the Dropdown Menu. This hook is fired when Options#dropdownMenu option is enabled.
Param | Type | Description |
---|---|---|
instance | DropdownMenu | The DropdownMenu instance. |
afterDropdownMenuShow
Source codeafterDropdownMenuShow(dropdownMenu)
Fired by DropdownMenu plugin after opening the Dropdown Menu. This hook is fired when Options#dropdownMenu option is enabled.
Param | Type | Description |
---|---|---|
dropdownMenu | DropdownMenu | The DropdownMenu instance. |
afterFilter
Source codeafterFilter(conditionsStack)
Fired by the Filters
plugin,
after a column filter gets applied.
afterFilter
takes one argument (conditionsStack
), which is an array of objects.
Each object represents one of your column filters,
and consists of the following properties:
Property | Possible values | Description |
---|---|---|
column | Number | A visual index of the column to which the filter was applied. |
conditions | Array of objects | Each object represents one condition. For details, see addCondition() . |
operation | 'conjunction' | 'disjunction' | 'disjunctionWithExtraCondition' | An operation to perform on your set of conditions . For details, see addCondition() . |
An example of the format of the conditionsStack
argument:
[
{
column: 2,
conditions: [
{name: 'begins_with', args: [['S']]}
],
operation: 'conjunction'
},
{
column: 4,
conditions: [
{name: 'not_empty', args: []}
],
operation: 'conjunction'
},
]
Read more:
- Guides: Column filter
- Hooks:
beforeFilter
- Options:
filters
- Plugins:
Filters
– Plugin methods:addCondition()
Param | Type | Description |
---|---|---|
conditionsStack | Array<object> | An array of objects with your column filters. |
afterFormulasValuesUpdate
Source codeafterFormulasValuesUpdate(changes)
Fired by the Formulas plugin, when any cell value changes.
Returns an array of objects that contains:
- The addresses (
sheet
,row
,col
) and new values (newValue
) of the changed cells. - The addresses and new values of any cells that had to be recalculated (because their formulas depend on the cells that changed).
This hook gets also fired on Handsontable's initialization, returning the addresses and values of all cells.
Read more:
Since: 9.0.0
Param | Type | Description |
---|---|---|
changes | Array | The addresses and new values of all the changed and recalculated cells. |
afterGetCellMeta
Source codeafterGetCellMeta(row, column, cellProperties)
Fired after getting the cell settings.
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
cellProperties | object | Object containing the cell properties. |
afterGetColHeader
Source codeafterGetColHeader(column, TH, [headerLevel])
Fired after retrieving information about a column header and appending it to the table header.
Param | Type | Default | Description |
---|---|---|---|
column | number | Visual column index. | |
TH | HTMLTableCellElement | Header's TH element. | |
[headerLevel] | number | 0 | optional (Since 12.2.0) Header level index. Accepts positive (0 to n) and negative (-1 to -n) values. For positive values, 0 points to the topmost header. For negative values, -1 points to the bottom-most header (the header closest to the cells). |
afterGetColumnHeaderRenderers
Source codeafterGetColumnHeaderRenderers(renderers)
Fired after getting the column header renderers.
Param | Type | Description |
---|---|---|
renderers | Array<function()> | An array of the column header renderers. |
afterGetRowHeader
Source codeafterGetRowHeader(row, TH)
Fired after retrieving information about a row header and appending it to the table header.
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
TH | HTMLTableCellElement | Header's TH element. |
afterGetRowHeaderRenderers
Source codeafterGetRowHeaderRenderers(renderers)
Fired after getting the row header renderers.
Param | Type | Description |
---|---|---|
renderers | Array<function()> | An array of the row header renderers. |
afterHideColumns
Source codeafterHideColumns(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)
Fired by HiddenColumns plugin after marking the columns as hidden. Fired only if the Options#hiddenColumns option is enabled.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical column indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical column indexes. |
actionPossible | boolean | true , if the provided column indexes are valid, false otherwise. |
stateChanged | boolean | true , if the action affected any non-hidden columns, false otherwise. |
afterHideRows
Source codeafterHideRows(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)
Fired by HiddenRows plugin after marking the rows as hidden. Fired only if the Options#hiddenRows option is enabled.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical row indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical row indexes. |
actionPossible | boolean | true , if provided row indexes are valid, false otherwise. |
stateChanged | boolean | true , if the action affected any non-hidden rows, false otherwise. |
afterInit
Source codeafterInit
Fired after the Handsontable instance is initiated.
afterLanguageChange
Source codeafterLanguageChange(languageCode)
Fired after successful change of language (when proper language code was set).
Since: 0.35.0
Param | Type | Description |
---|---|---|
languageCode | string | New language code. |
afterListen
Source codeafterListen
Fired after the table was switched into listening mode. This allows Handsontable to capture keyboard events and respond in the right way.
afterLoadData
Source codeafterLoadData(sourceData, initialLoad, source)
Fired after Handsontable's data
gets modified by the loadData()
method
or the updateSettings()
method.
Read more:
Param | Type | Description |
---|---|---|
sourceData | Array | An array of arrays, or an array of objects, that contains Handsontable's data |
initialLoad | boolean | A flag that indicates whether the data was loaded at Handsontable's initialization (true ) or later (false ) |
source | string | The source of the call |
afterMergeCells
Source codeafterMergeCells(cellRange, mergeParent, [auto])
Fired by MergeCells plugin after cell merging. This hook is fired when Options#mergeCells option is enabled.
Param | Type | Default | Description |
---|---|---|---|
cellRange | CellRange | Selection cell range. | |
mergeParent | object | The parent collection of the provided cell range. | |
[auto] | boolean | false | optional true if called automatically by the plugin. |
afterModifyTransformEnd
Source codeafterModifyTransformEnd(coords, rowTransformDir, colTransformDir)
Fired after the end of the selection is being modified (e.g. Moving the selection with the arrow keys).
Param | Type | Description |
---|---|---|
coords | CellCoords | Visual coords of the freshly selected cell. |
rowTransformDir | number | -1 if trying to select a cell with a negative row index. 0 otherwise. |
colTransformDir | number | -1 if trying to select a cell with a negative column index. 0 otherwise. |
afterModifyTransformFocus
Source codeafterModifyTransformFocus(coords, rowTransformDir, colTransformDir)
Fired after the focus of the selection is being modified (e.g. Moving the focus with the enter/tab keys).
Since: 14.3.0
Param | Type | Description |
---|---|---|
coords | CellCoords | Coords of the freshly focused cell. |
rowTransformDir | number | -1 if trying to focus a cell with a negative row index. 0 otherwise. |
colTransformDir | number | -1 if trying to focus a cell with a negative column index. 0 otherwise. |
afterModifyTransformStart
Source codeafterModifyTransformStart(coords, rowTransformDir, colTransformDir)
Fired after the start of the selection is being modified (e.g. Moving the selection with the arrow keys).
Param | Type | Description |
---|---|---|
coords | CellCoords | Coords of the freshly selected cell. |
rowTransformDir | number | -1 if trying to select a cell with a negative row index. 0 otherwise. |
colTransformDir | number | -1 if trying to select a cell with a negative column index. 0 otherwise. |
afterMomentumScroll
Source codeafterMomentumScroll
Fired after a scroll event, which is identified as a momentum scroll (e.g. on an iPad).
afterNamedExpressionAdded
Source codeafterNamedExpressionAdded(namedExpressionName, changes)
Fired when a named expression is added to the Formulas' engine instance.
Since: 9.0.0
Param | Type | Description |
---|---|---|
namedExpressionName | string | The name of the added expression. |
changes | Array | The values and location of applied changes. |
afterNamedExpressionRemoved
Source codeafterNamedExpressionRemoved(namedExpressionName, changes)
Fired when a named expression is removed from the Formulas' engine instance.
Since: 9.0.0
Param | Type | Description |
---|---|---|
namedExpressionName | string | The name of the removed expression. |
changes | Array | The values and location of applied changes. |
afterOnCellContextMenu
Source codeafterOnCellContextMenu(event, coords, TD)
Fired after clicking right mouse button on a cell or row/column header.
For example clicking on the row header of cell (0, 0) results with afterOnCellContextMenu
called
with coordinates {row: 0, col: -1}
.
Since: 4.1.0
Param | Type | Description |
---|---|---|
event | Event | contextmenu event object. |
coords | CellCoords | Coordinates object containing the visual row and visual column indexes of the clicked cell. |
TD | HTMLTableCellElement | Cell's TD (or TH) element. |
afterOnCellCornerDblClick
Source codeafterOnCellCornerDblClick(event)
Fired after a dblclick
event is triggered on the cell corner (the drag handle).
Param | Type | Description |
---|---|---|
event | Event | dblclick event object. |
afterOnCellCornerMouseDown
Source codeafterOnCellCornerMouseDown(event)
Fired after a mousedown
event is triggered on the cell corner (the drag handle).
Param | Type | Description |
---|---|---|
event | Event | mousedown event object. |
afterOnCellMouseDown
Source codeafterOnCellMouseDown(event, coords, TD)
Fired after clicking on a cell or row/column header. In case the row/column header was clicked, the coordinate indexes are negative.
For example clicking on the row header of cell (0, 0) results with afterOnCellMouseDown
called
with coordinates {row: 0, col: -1}
.
Param | Type | Description |
---|---|---|
event | Event | mousedown event object. |
coords | CellCoords | Coordinates object containing the visual row and visual column indexes of the clicked cell. |
TD | HTMLTableCellElement | Cell's TD (or TH) element. |
afterOnCellMouseOut
Source codeafterOnCellMouseOut(event, coords, TD)
Fired after leaving a cell or row/column header with the mouse cursor.
Param | Type | Description |
---|---|---|
event | Event | mouseout event object. |
coords | CellCoords | Leaved cell's visual coordinate object. |
TD | HTMLTableCellElement | Cell's TD (or TH) element. |
afterOnCellMouseOver
Source codeafterOnCellMouseOver(event, coords, TD)
Fired after hovering a cell or row/column header with the mouse cursor. In case the row/column header was hovered, the index is negative.
For example, hovering over the row header of cell (0, 0) results with afterOnCellMouseOver
called
with coords {row: 0, col: -1}
.
Param | Type | Description |
---|---|---|
event | Event | mouseover event object. |
coords | CellCoords | Hovered cell's visual coordinate object. |
TD | HTMLTableCellElement | Cell's TD (or TH) element. |
afterOnCellMouseUp
Source codeafterOnCellMouseUp(event, coords, TD)
Fired after clicking on a cell or row/column header. In case the row/column header was clicked, the coordinate indexes are negative.
For example clicking on the row header of cell (0, 0) results with afterOnCellMouseUp
called
with coordinates {row: 0, col: -1}
.
Param | Type | Description |
---|---|---|
event | Event | mouseup event object. |
coords | CellCoords | Coordinates object containing the visual row and visual column indexes of the clicked cell. |
TD | HTMLTableCellElement | Cell's TD (or TH) element. |
afterPaste
Source codeafterPaste(data, coords)
Fired by CopyPaste plugin after values are pasted into table. This hook is fired when Options#copyPaste option is enabled.
Param | Type | Description |
---|---|---|
data | Array<Array> | An array of arrays with the pasted data. |
coords | Array<object> | An array of objects with ranges of the visual indexes (startRow , startCol , endRow , endCol ) that correspond to the previously selected area. |
afterPluginsInitialized
Source codeafterPluginsInitialized
Fired after initializing all the plugins. This hook should be added before Handsontable is initialized.
Example
Handsontable.hooks.add('afterPluginsInitialized', myCallback);
afterRedo
Source codeafterRedo(action)
Fired by UndoRedo plugin after the redo action. Contains information about the action that is being redone. This hook is fired when Options#undo option is enabled.
Param | Type | Description |
---|---|---|
action | object | The action object. Contains information about the action being redone. The actionType property of the object specifies the type of the action in a String format (e.g. 'remove_row' ). |
afterRedoStackChange
Source codeafterRedoStackChange(undoneActionsBefore, undoneActionsAfter)
Fired by UndoRedo plugin after changing redo stack.
Since: 8.4.0
Param | Type | Description |
---|---|---|
undoneActionsBefore | Array | Stack of actions which could be redone before performing new action. |
undoneActionsAfter | Array | Stack of actions which can be redone after performing new action. |
afterRefreshDimensions
Source codeafterRefreshDimensions(previousDimensions, currentDimensions, stateChanged)
Fired after the window was resized or the size of the Handsontable root element was changed.
Param | Type | Description |
---|---|---|
previousDimensions | Object | Previous dimensions of the container. |
currentDimensions | Object | Current dimensions of the container. |
stateChanged | boolean | true , if the container was re-render, false otherwise. |
afterRemoveCellMeta
Source codeafterRemoveCellMeta(row, column, key, value)
Fired after cell meta is removed.
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
key | string | The removed meta key. |
value | * | Value which was under removed key of cell meta. |
afterRemoveCol
Source codeafterRemoveCol(index, amount, physicalColumns, [source])
Fired after one or more columns are removed.
Param | Type | Description |
---|---|---|
index | number | Visual index of starter column. |
amount | number | An amount of removed columns. |
physicalColumns | Array<number> | An array of physical columns removed from the data source. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterRemoveRow
Source codeafterRemoveRow(index, amount, physicalRows, [source])
Fired after one or more rows are removed.
Param | Type | Description |
---|---|---|
index | number | Visual index of starter row. |
amount | number | An amount of removed rows. |
physicalRows | Array<number> | An array of physical rows removed from the data source. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterRender
Source codeafterRender(isForced)
Fired after Handsontable's view-rendering engine updates the view.
Param | Type | Description |
---|---|---|
isForced | boolean | If set to true , the rendering gets triggered by a change of settings, a change of data, or a logic that needs a full Handsontable render cycle. If set to false , the rendering gets triggered by scrolling or moving the selection. |
afterRenderer
Source codeafterRenderer(TD, row, column, prop, value, cellProperties)
Fired after finishing rendering the cell (after the renderer finishes).
Param | Type | Description |
---|---|---|
TD | HTMLTableCellElement | Currently rendered cell's TD element. |
row | number | Visual row index. |
column | number | Visual column index. |
prop | string number | Column property name or a column index, if datasource is an array of arrays. |
value | * | Value of the rendered cell. |
cellProperties | object | Object containing the cell's properties. |
afterRowMove
Source codeafterRowMove(movedRows, finalIndex, dropIndex, movePossible, orderChanged)
Fired by ManualRowMove plugin after changing the order of the visual indexes. This hook is fired when Options#manualRowMove option is enabled.
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 visualization of final index please take a look at documentation. |
dropIndex | number undefined | 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. It's undefined when dragRows function wasn't called. |
movePossible | boolean | Indicates if it was possible to move rows to the desired position. |
orderChanged | boolean | Indicates if order of rows was changed by move. |
afterRowResize
Source codeafterRowResize(newSize, row, isDoubleClick)
Fired by ManualRowResize plugin after rendering the table with modified row sizes. This hook is fired when Options#manualRowResize option is enabled.
Param | Type | Description |
---|---|---|
newSize | number | Calculated new row height. |
row | number | Visual index of the resized row. |
isDoubleClick | boolean | Flag that determines whether there was a double-click. |
afterRowSequenceChange
Source codeafterRowSequenceChange([source])
Fired after the order of rows has changed. This hook is fired by changing row indexes of any type supported by the IndexMapper.
Param | Type | Description |
---|---|---|
[source] | 'init' 'remove' 'insert' 'move' 'update' | optional A string that indicates what caused the change to the order of rows. |
afterScroll
Source codeafterScroll
Fired after the vertical or horizontal scroll event.
Since: 14.0.0
afterScrollHorizontally
Source codeafterScrollHorizontally
Fired after the horizontal scroll event.
afterScrollVertically
Source codeafterScrollVertically
Fired after the vertical scroll event.
afterSelectColumns
Source codeafterSelectColumns(from, to, highlight)
Fired after one or more columns are selected (e.g. during mouse header click or Core#selectColumns API call).
Since: 14.0.0
Param | Type | Description |
---|---|---|
from | CellCoords | Selection start coords object. |
to | CellCoords | Selection end coords object. |
highlight | CellCoords | Selection cell focus coords object. |
afterSelection
Source codeafterSelection(row, column, row2, column2, preventScrolling, selectionLayerLevel)
Fired after one or more cells are selected (e.g. during mouse move).
Example
new Handsontable(element, {
afterSelection: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
// If set to `false` (default): when cell selection is outside the viewport,
// Handsontable scrolls the viewport to cell selection's end corner.
// If set to `true`: when cell selection is outside the viewport,
// Handsontable doesn't scroll to cell selection's end corner.
preventScrolling.value = true;
}
})
Param | Type | Description |
---|---|---|
row | number | Selection start visual row index. |
column | number | Selection start visual column index. |
row2 | number | Selection end visual row index. |
column2 | number | Selection end visual column index. |
preventScrolling | object | A reference to the observable object with the value property. Property preventScrolling.value expects a boolean value that Handsontable uses to control scroll behavior after selection. |
selectionLayerLevel | number | The number which indicates what selection layer is currently modified. |
afterSelectionByProp
Source codeafterSelectionByProp(row, prop, row2, prop2, preventScrolling, selectionLayerLevel)
Fired after one or more cells are selected.
The prop
and prop2
arguments represent the source object property name instead of the column number.
Example
new Handsontable(element, {
afterSelectionByProp: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
// setting if prevent scrolling after selection
preventScrolling.value = true;
}
})
Param | Type | Description |
---|---|---|
row | number | Selection start visual row index. |
prop | string | Selection start data source object property name. |
row2 | number | Selection end visual row index. |
prop2 | string | Selection end data source object property name. |
preventScrolling | object | A reference to the observable object with the value property. Property preventScrolling.value expects a boolean value that Handsontable uses to control scroll behavior after selection. |
selectionLayerLevel | number | The number which indicates what selection layer is currently modified. |
afterSelectionEnd
Source codeafterSelectionEnd(row, column, row2, column2, selectionLayerLevel)
Fired after one or more cells are selected (e.g. on mouse up).
Param | Type | Description |
---|---|---|
row | number | Selection start visual row index. |
column | number | Selection start visual column index. |
row2 | number | Selection end visual row index. |
column2 | number | Selection end visual column index. |
selectionLayerLevel | number | The number which indicates what selection layer is currently modified. |
afterSelectionEndByProp
Source codeafterSelectionEndByProp(row, prop, row2, prop2, selectionLayerLevel)
Fired after one or more cells are selected (e.g. on mouse up).
The prop
and prop2
arguments represent the source object property name instead of the column number.
Param | Type | Description |
---|---|---|
row | number | Selection start visual row index. |
prop | string | Selection start data source object property index. |
row2 | number | Selection end visual row index. |
prop2 | string | Selection end data source object property index. |
selectionLayerLevel | number | The number which indicates what selection layer is currently modified. |
afterSelectionFocusSet
Source codeafterSelectionFocusSet(row, column, preventScrolling)
Fired after the focus position within a selected range is changed.
Since: 14.3.0
Example
new Handsontable(element, {
afterSelectionFocusSet: (row, column, preventScrolling) => {
// If set to `false` (default): when focused cell selection is outside the viewport,
// Handsontable scrolls the viewport to that cell.
// If set to `true`: when focused cell selection is outside the viewport,
// Handsontable doesn't scroll the viewport.
preventScrolling.value = true;
}
})
Param | Type | Description |
---|---|---|
row | number | The focus visual row index position. |
column | number | The focus visual column index position. |
preventScrolling | object | A reference to the observable object with the value property. Property preventScrolling.value expects a boolean value that Handsontable uses to control scroll behavior after selection. |
afterSelectRows
Source codeafterSelectRows(from, to, highlight)
Fired after one or more rows are selected (e.g. during mouse header click or Core#selectRows API call).
Since: 14.0.0
Param | Type | Description |
---|---|---|
from | CellCoords | Selection start coords object. |
to | CellCoords | Selection end coords object. |
highlight | CellCoords | Selection cell focus coords object. |
afterSetCellMeta
Source codeafterSetCellMeta(row, column, key, value)
Fired after cell meta is changed.
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
key | string | The updated meta key. |
value | * | The updated meta value. |
afterSetDataAtCell
Source codeafterSetDataAtCell(changes, [source])
Fired after cell data was changed.
Param | Type | Description |
---|---|---|
changes | Array | An array of changes in format [[row, column, oldValue, value], ...] . |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterSetDataAtRowProp
Source codeafterSetDataAtRowProp(changes, [source])
Fired after cell data was changed.
Called only when setDataAtRowProp
was executed.
Param | Type | Description |
---|---|---|
changes | Array | An array of changes in format [[row, prop, oldValue, value], ...] . |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
afterSetSourceDataAtCell
Source codeafterSetSourceDataAtCell(changes, [source])
Fired after cell source data was changed.
Since: 8.0.0
Param | Type | Description |
---|---|---|
changes | Array | An array of changes in format [[row, column, oldValue, value], ...] . |
[source] | string | optional String that identifies source of hook call. |
afterSetTheme
Source codeafterSetTheme(themeName, firstRun)
Fired after a theme is enabled, changed, or disabled.
Since: 15.0.0
Param | Type | Description |
---|---|---|
themeName | string boolean undefined | The theme name. |
firstRun | boolean | true if it's the initial setting of the theme, false otherwise. |
afterSheetAdded
Source codeafterSheetAdded(addedSheetDisplayName)
Fired when a new sheet is added to the Formulas' engine instance.
Since: 9.0.0
Param | Type | Description |
---|---|---|
addedSheetDisplayName | string | The name of the added sheet. |
afterSheetRemoved
Source codeafterSheetRemoved(removedSheetDisplayName, changes)
Fired when a sheet is removed from the Formulas' engine instance.
Since: 9.0.0
Param | Type | Description |
---|---|---|
removedSheetDisplayName | string | The removed sheet name. |
changes | Array | The values and location of applied changes. |
afterSheetRenamed
Source codeafterSheetRenamed(oldDisplayName, newDisplayName)
Fired when a sheet in the Formulas' engine instance is renamed.
Since: 9.0.0
Param | Type | Description |
---|---|---|
oldDisplayName | string | The old name of the sheet. |
newDisplayName | string | The new name of the sheet. |
afterTrimRow
Source codeafterTrimRow(currentTrimConfig, destinationTrimConfig, actionPossible, stateChanged) ⇒ undefined | boolean
Fired by TrimRows plugin after trimming rows. This hook is fired when Options#trimRows option is enabled.
Param | Type | Description |
---|---|---|
currentTrimConfig | Array | Current trim configuration - a list of trimmed physical row indexes. |
destinationTrimConfig | Array | Destination trim configuration - a list of trimmed physical row indexes. |
actionPossible | boolean | true , if all of the row indexes are withing the bounds of the table, false otherwise. |
stateChanged | boolean | true , if the action affected any non-trimmed rows, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the trimming action will not be completed.
afterUndo
Source codeafterUndo(action)
Fired by UndoRedo plugin after the undo action. Contains information about the action that is being undone. This hook is fired when Options#undo option is enabled.
Param | Type | Description |
---|---|---|
action | object | The action object. Contains information about the action being undone. The actionType property of the object specifies the type of the action in a String format. (e.g. 'remove_row' ). |
afterUndoStackChange
Source codeafterUndoStackChange(doneActionsBefore, doneActionsAfter)
Fired by UndoRedo plugin after changing undo stack.
Since: 8.4.0
Param | Type | Description |
---|---|---|
doneActionsBefore | Array | Stack of actions which could be undone before performing new action. |
doneActionsAfter | Array | Stack of actions which can be undone after performing new action. |
afterUnhideColumns
Source codeafterUnhideColumns(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)
Fired by HiddenColumns plugin after marking the columns as not hidden. Fired only if the Options#hiddenColumns option is enabled.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical column indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical column indexes. |
actionPossible | boolean | true , if the provided column indexes are valid, false otherwise. |
stateChanged | boolean | true , if the action affected any hidden columns, false otherwise. |
afterUnhideRows
Source codeafterUnhideRows(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)
Fired by HiddenRows plugin after marking the rows as not hidden. Fired only if the Options#hiddenRows option is enabled.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical row indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical row indexes. |
actionPossible | boolean | true , if provided row indexes are valid, false otherwise. |
stateChanged | boolean | true , if the action affected any hidden rows, false otherwise. |
afterUnlisten
Source codeafterUnlisten
Fired after the table was switched off from the listening mode. This makes the Handsontable inert for any keyboard events.
afterUnmergeCells
Source codeafterUnmergeCells(cellRange, [auto])
Fired by MergeCells plugin after unmerging the cells. This hook is fired when Options#mergeCells option is enabled.
Param | Type | Default | Description |
---|---|---|---|
cellRange | CellRange | Selection cell range. | |
[auto] | boolean | false | optional true if called automatically by the plugin. |
afterUntrimRow
Source codeafterUntrimRow(currentTrimConfig, destinationTrimConfig, actionPossible, stateChanged) ⇒ undefined | boolean
Fired by TrimRows plugin after untrimming rows. This hook is fired when Options#trimRows option is enabled.
Param | Type | Description |
---|---|---|
currentTrimConfig | Array | Current trim configuration - a list of trimmed physical row indexes. |
destinationTrimConfig | Array | Destination trim configuration - a list of trimmed physical row indexes. |
actionPossible | boolean | true , if all of the row indexes are withing the bounds of the table, false otherwise. |
stateChanged | boolean | true , if the action affected any trimmed rows, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the untrimming action will not be completed.
afterUpdateData
Source codeafterUpdateData(sourceData, initialLoad, source)
Fired after the updateData()
method
modifies Handsontable's data
.
Read more:
Since: 11.1.0
Param | Type | Description |
---|---|---|
sourceData | Array | An array of arrays, or an array of objects, that contains Handsontable's data |
initialLoad | boolean | A flag that indicates whether the data was loaded at Handsontable's initialization (true ) or later (false ) |
source | string | The source of the call |
afterUpdateSettings
Source codeafterUpdateSettings(newSettings)
Fired after calling the updateSettings
method.
Param | Type | Description |
---|---|---|
newSettings | object | New settings object. |
afterValidate
Source codeafterValidate(isValid, value, row, prop, [source]) ⇒ undefined | boolean
A plugin hook executed after validator function, only if validator function is defined. Validation result is the first parameter. This can be used to determinate if validation passed successfully or not.
Returning false from the callback will mark the cell as invalid.
Param | Type | Description |
---|---|---|
isValid | boolean | true if valid, false if not. |
value | * | The value in question. |
row | number | Visual row index. |
prop | string number | Property name / visual column index. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
Returns: undefined
| boolean
- If false
the cell will be marked as invalid, true
otherwise.
afterViewportColumnCalculatorOverride
Source codeafterViewportColumnCalculatorOverride(calc)
Fired inside the viewportColumnCalculatorOverride
method. Allows modifying the row calculator parameters.
Param | Type | Description |
---|---|---|
calc | object | The row calculator. |
afterViewportRowCalculatorOverride
Source codeafterViewportRowCalculatorOverride(calc)
Fired inside the viewportRowCalculatorOverride
method. Allows modifying the row calculator parameters.
Param | Type | Description |
---|---|---|
calc | object | The row calculator. |
afterViewRender
Source codeafterViewRender(isForced)
Fired after Handsontable's view-rendering engine is rendered, but before redrawing the selection borders and before scroll syncing.
Note: In Handsontable 9.x and earlier, the afterViewRender
hook was named afterRender
.
Since: 10.0.0
Param | Type | Description |
---|---|---|
isForced | boolean | If set to true , the rendering gets triggered by a change of settings, a change of data, or a logic that needs a full Handsontable render cycle. If set to false , the rendering gets triggered by scrolling or moving the selection. |
beforeAddChild
Source codebeforeAddChild(parent, element, index)
Fired by NestedRows plugin before adding a children to the NestedRows
structure. This hook is fired when
Options#nestedRows option is enabled.
Param | Type | Description |
---|---|---|
parent | object | The parent object. |
element | object undefined | The element added as a child. If undefined , a blank child was added. |
index | number undefined | The index within the parent where the new child was added. If undefined , the element was added as the last child. |
beforeAutofill
Source codebeforeAutofill(selectionData, sourceRange, targetRange, direction) ⇒ boolean | Array<Array>
Fired by Autofill plugin before populating the data in the autofill feature. This hook is fired when Options#fillHandle option is enabled.
Param | Type | Description |
---|---|---|
selectionData | Array<Array> | Data the autofill operation will start from. |
sourceRange | CellRange | The range values will be filled from. |
targetRange | CellRange | The range new values will be filled into. |
direction | string | Declares the direction of the autofill. Possible values: up , down , left , right . |
Returns: boolean
| Array<Array>
- If false, the operation is cancelled. If array of arrays, the returned data
will be passed into populateFromArray
instead of the default autofill
algorithm's result.
beforeBeginEditing
Source codebeforeBeginEditing(row, column, initialValue, event, fullEditMode) ⇒ boolean | undefined
Fired before the editor is opened and rendered.
Since: 14.2.0
Param | Type | Description |
---|---|---|
row | number | Visual row index of the edited cell. |
column | number | Visual column index of the edited cell. |
initialValue | * | The initial editor value. |
event | MouseEvent KeyboardEvent | The event which was responsible for opening the editor. |
fullEditMode | boolean | true if the editor is opened in full edit mode, false otherwise. Editor opened in full edit mode does not close after pressing Arrow keys. |
Returns: boolean
| undefined
- If the callback returns false,
the editor won't be opened after
the mouse double click or after pressing the Enter key. Returning undefined
(or other value
than boolean) will result in default behavior, which disallows opening an editor for non-contiguous
selection (while pressing Ctrl/Cmd) and for multiple selected cells (while pressing SHIFT).
Returning true
removes those restrictions.
beforeCellAlignment
Source codebeforeCellAlignment(stateBefore, range, type, alignmentClass)
Fired before aligning the cell contents.
Param | Type | Description |
---|---|---|
stateBefore | object | An object with class names defining the cell alignment. |
range | Array<CellRange> | An array of CellRange coordinates where the alignment will be applied. |
type | string | Type of the alignment - either horizontal or vertical . |
alignmentClass | string | String defining the alignment class added to the cell. Possible values: htLeft , htCenter , htRight , htJustify , htTop , htMiddle , htBottom . |
beforeChange
Source codebeforeChange(changes, [source]) ⇒ undefined | boolean
Fired before one or more cells are changed.
Use this hook to silently alter the user's changes before Handsontable re-renders.
To ignore the user's changes, use a nullified array or return false
.
Example
// to alter a single change, overwrite the value with `changes[i][3]`
new Handsontable(element, {
beforeChange: (changes, source) => {
// [[row, prop, oldVal, newVal], ...]
changes[0][3] = 10;
}
});
// to ignore a single change, set `changes[i]` to `null`
// or remove `changes[i]` from the array, by using `changes.splice(i, 1)`
new Handsontable(element, {
beforeChange: (changes, source) => {
// [[row, prop, oldVal, newVal], ...]
changes[0] = null;
}
});
// to ignore all changes, return `false`
// or set the array's length to 0, by using `changes.length = 0`
new Handsontable(element, {
beforeChange: (changes, source) => {
// [[row, prop, oldVal, newVal], ...]
return false;
}
});
Param | Type | Description |
---|---|---|
changes | Array<Array> | 2D array containing information about each of the edited cells [[row, prop, oldVal, newVal], ...] . row is a visual row index. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
Returns: undefined
| boolean
- If false
all changes were cancelled, true
otherwise.
beforeChangeRender
Source codebeforeChangeRender(changes, [source])
Fired right before rendering the changes.
Param | Type | Description |
---|---|---|
changes | Array<Array> | Array in form of [row, prop, oldValue, newValue] . |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
beforeColumnCollapse
Source codebeforeColumnCollapse(currentCollapsedColumns, destinationCollapsedColumns, collapsePossible) ⇒ undefined | boolean
Fired by CollapsibleColumns plugin before columns collapse. This hook is fired when Options#collapsibleColumns option is enabled.
Since: 8.0.0
Param | Type | Description |
---|---|---|
currentCollapsedColumns | Array | Current collapsible configuration - a list of collapsible physical column indexes. |
destinationCollapsedColumns | Array | Destination collapsible configuration - a list of collapsible physical column indexes. |
collapsePossible | boolean | true , if all of the column indexes are withing the bounds of the collapsed sections, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the collapsing action will not be completed.
beforeColumnExpand
Source codebeforeColumnExpand(currentCollapsedColumns, destinationCollapsedColumns, expandPossible) ⇒ undefined | boolean
Fired by CollapsibleColumns plugin before columns expand. This hook is fired when Options#collapsibleColumns option is enabled.
Since: 8.0.0
Param | Type | Description |
---|---|---|
currentCollapsedColumns | Array | Current collapsible configuration - a list of collapsible physical column indexes. |
destinationCollapsedColumns | Array | Destination collapsible configuration - a list of collapsible physical column indexes. |
expandPossible | boolean | true , if all of the column indexes are withing the bounds of the collapsed sections, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the expanding action will not be completed.
beforeColumnFreeze
Source codebeforeColumnFreeze(column, freezePerformed) ⇒ boolean | undefined
Fired by the ManualColumnFreeze plugin, before freezing a column.
Since: 12.1.0
Param | Type | Description |
---|---|---|
column | number | The visual index of the column that is going to freeze. |
freezePerformed | boolean | If true : the column is going to freeze. If false : the column is not going to freeze (which might happen if the column is already frozen). |
Returns: boolean
| undefined
- If false
: the column is not going to freeze, and the afterColumnFreeze
hook won't fire.
beforeColumnMove
Source codebeforeColumnMove(movedColumns, finalIndex, dropIndex, movePossible) ⇒ undefined | boolean
Fired by ManualColumnMove plugin before change order of the visual indexes. This hook is fired when Options#manualColumnMove option is enabled.
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 visualization of final index please take a look at documentation. |
dropIndex | number undefined | 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. It's undefined when dragColumns function wasn't called. |
movePossible | boolean | Indicates if it's possible to move rows to the desired position. |
Returns: undefined
| boolean
- If false
the column will not be moved, true
otherwise.
beforeColumnResize
Source codebeforeColumnResize(newSize, column, isDoubleClick) ⇒ number
Fired by ManualColumnResize plugin before rendering the table with modified column sizes. This hook is fired when Options#manualColumnResize option is enabled.
Param | Type | Description |
---|---|---|
newSize | number | Calculated new column width. |
column | number | Visual index of the resized column. |
isDoubleClick | boolean | Flag that determines whether there was a double-click. |
Returns: number
- Returns a new column size or undefined
, if column size should be calculated automatically.
beforeColumnSort
Source codebeforeColumnSort(currentSortConfig, destinationSortConfigs) ⇒ boolean | undefined
Fired by ColumnSorting and MultiColumnSorting plugins before sorting the column. If you return false
value inside callback for hook, then sorting
will be not applied by the Handsontable (useful for server-side sorting).
This hook is fired when Options#columnSorting or Options#multiColumnSorting option is enabled.
Param | Type | Description |
---|---|---|
currentSortConfig | Array | Current sort configuration (for all sorted columns). |
destinationSortConfigs | Array | Destination sort configuration (for all sorted columns). |
Returns: boolean
| undefined
- If false
the column will not be sorted, true
otherwise.
beforeColumnUnfreeze
Source codebeforeColumnUnfreeze(column, unfreezePerformed) ⇒ boolean | undefined
Fired by the ManualColumnFreeze plugin, before unfreezing a column.
Since: 12.1.0
Param | Type | Description |
---|---|---|
column | number | The visual index of the column that is going to unfreeze. |
unfreezePerformed | boolean | If true : the column is going to unfreeze. If false : the column is not going to unfreeze (which might happen if the column is already unfrozen). |
Returns: boolean
| undefined
- If false
: the column is not going to unfreeze, and the afterColumnUnfreeze
hook won't fire.
beforeColumnWrap
Source codebeforeColumnWrap(isWrapEnabled, newCoords, isFlipped)
When the focus position is moved to the next or previous column caused by the Options#autoWrapCol option the hook is triggered.
Since: 14.0.0
Param | Type | Description |
---|---|---|
isWrapEnabled | boolean | Tells whether the column wrapping is going to happen. There may be situations where the option does not work even though it is enabled. This is due to the priority of other options that may block the feature. For example, when the Options#minSpareRows is defined, the Options#autoWrapCol option is not checked. Thus, column wrapping is off. |
newCoords | CellCoords | The new focus position. It is an object with keys row and col , where a value of -1 indicates a header. |
isFlipped | boolean | true if the column index was flipped, false otherwise. Flipped index means that the user reached the last column and the focus is moved to the first column or vice versa. |
beforeContextMenuSetItems
Source codebeforeContextMenuSetItems(menuItems)
Fired each time user opens ContextMenu plugin before setting up the Context Menu's items but after filtering these options by
user (contextMenu
option). This hook can by helpful to determine if user use specified menu item or to set up
one of the menu item to by always visible.
Param | Type | Description |
---|---|---|
menuItems | Array<object> | An array of objects containing information about to generated Context Menu items. |
beforeContextMenuShow
Source codebeforeContextMenuShow(context)
Fired by ContextMenu plugin before opening the Context Menu. This hook is fired when Options#contextMenu option is enabled.
Param | Type | Description |
---|---|---|
context | object | The Context Menu instance. |
beforeCopy
Source codebeforeCopy(data, coords, copiedHeadersCount) ⇒ *
Fired before values are copied to the clipboard.
Example
// To disregard a single row, remove it from array using data.splice(i, 1).
...
new Handsontable(document.getElementById('example'), {
beforeCopy: (data, coords) => {
// data -> [[1, 2, 3], [4, 5, 6]]
data.splice(0, 1);
// data -> [[4, 5, 6]]
// coords -> [{startRow: 0, startCol: 0, endRow: 1, endCol: 2}]
}
});
...
// To cancel copying, return false from the callback.
...
new Handsontable(document.getElementById('example'), {
beforeCopy: (data, coords) => {
return false;
}
});
...
Param | Type | Description |
---|---|---|
data | Array<Array> | An array of arrays which contains data to copied. |
coords | Array<object> | An array of objects with ranges of the visual indexes (startRow , startCol , endRow , endCol ) which will copied. |
copiedHeadersCount | Object | (Since 12.3.0) The number of copied column headers. |
Returns: *
- If returns false
then copying is canceled.
beforeCreateCol
Source codebeforeCreateCol(index, amount, [source]) ⇒ *
Fired before created a new column.
Example
// Return `false` to cancel column inserting.
new Handsontable(element, {
beforeCreateCol: function(data, coords) {
return false;
}
});
Param | Type | Description |
---|---|---|
index | number | Represents the visual index of first newly created column in the data source array. |
amount | number | Number of newly created columns in the data source array. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
Returns: *
- If false
then creating columns is cancelled.
beforeCreateRow
Source codebeforeCreateRow(index, amount, [source]) ⇒ * | boolean
Fired before created a new row.
Param | Type | Description |
---|---|---|
index | number | Represents the visual index of first newly created row in the data source array. |
amount | number | Number of newly created rows in the data source array. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeCut
Source codebeforeCut(data, coords) ⇒ *
Fired by CopyPaste plugin before copying the values to the clipboard and before clearing values of the selected cells. This hook is fired when Options#copyPaste option is enabled.
Example
// To disregard a single row, remove it from the array using data.splice(i, 1).
new Handsontable(element, {
beforeCut: function(data, coords) {
// data -> [[1, 2, 3], [4, 5, 6]]
data.splice(0, 1);
// data -> [[4, 5, 6]]
// coords -> [{startRow: 0, startCol: 0, endRow: 1, endCol: 2}]
}
});
// To cancel a cutting action, just return `false`.
new Handsontable(element, {
beforeCut: function(data, coords) {
return false;
}
});
Param | Type | Description |
---|---|---|
data | Array<Array> | An array of arrays which contains data to cut. |
coords | Array<object> | An array of objects with ranges of the visual indexes (startRow , startCol , endRow , endCol ) which will be cut out. |
Returns: *
- If returns false
then operation of the cutting out is canceled.
beforeDetachChild
Source codebeforeDetachChild(parent, element)
Fired by NestedRows plugin before detaching a child from its parent. This hook is fired when Options#nestedRows option is enabled.
Param | Type | Description |
---|---|---|
parent | object | An object representing the parent from which the element is to be detached. |
element | object | The detached element. |
beforeDrawBorders
Source codebeforeDrawBorders(corners, borderClassName)
Fired before drawing the borders.
Param | Type | Description |
---|---|---|
corners | Array | Array specifying the current selection borders. |
borderClassName | string | Specifies the border class name. |
beforeDropdownMenuSetItems
Source codebeforeDropdownMenuSetItems(menuItems)
Fired by DropdownMenu plugin before setting up the Dropdown Menu's items but after filtering these options
by user (dropdownMenu
option). This hook can by helpful to determine if user use specified menu item or to set
up one of the menu item to by always visible.
Param | Type | Description |
---|---|---|
menuItems | Array<object> | An array of objects containing information about to generated Dropdown Menu items. |
beforeDropdownMenuShow
Source codebeforeDropdownMenuShow(dropdownMenu)
Fired by DropdownMenu plugin before opening the dropdown menu. This hook is fired when Options#dropdownMenu option is enabled.
Param | Type | Description |
---|---|---|
dropdownMenu | DropdownMenu | The DropdownMenu instance. |
beforeFilter
Source codebeforeFilter(conditionsStack, previousConditionsStack) ⇒ boolean
Fired by the Filters
plugin,
before a column filter gets applied.
beforeFilter
takes two arguments: conditionsStack
and previousConditionsStack
, both are
arrays of objects.
Each object represents one of your column filters, and consists of the following properties:
Property | Possible values | Description |
---|---|---|
column | Number | A visual index of the column to which the filter will be applied. |
conditions | Array of objects | Each object represents one condition. For details, see addCondition() . |
operation | 'conjunction' | 'disjunction' | 'disjunctionWithExtraCondition' | An operation to perform on your set of conditions . For details, see addCondition() . |
An example of the format of the conditionsStack
argument:
[
{
column: 2,
conditions: [
{name: 'begins_with', args: [['S']]}
],
operation: 'conjunction'
},
{
column: 4,
conditions: [
{name: 'not_empty', args: []}
],
operation: 'conjunction'
},
]
To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI),
set beforeFilter
to return false
:
new Handsontable(document.getElementById('example'), {
beforeFilter: (conditionsStack) => {
return false;
}
});
Read more:
- Guides: Column filter
- Hooks:
afterFilter
- Options:
filters
- Plugins:
Filters
– Plugin methods:addCondition()
Param | Type | Description |
---|---|---|
conditionsStack | Array<object> | An array of objects with your column filters. |
previousConditionsStack | Array<object> null | An array of objects with your previous column filters. It can also be null if there was no previous filters applied or the conditions did not change between performing the filter action. |
Returns: boolean
- To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), return false
.
beforeGetCellMeta
Source codebeforeGetCellMeta(row, column, cellProperties)
Fired before getting cell settings.
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
cellProperties | object | Object containing the cell's properties. |
beforeHideColumns
Source codebeforeHideColumns(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean
Fired by HiddenColumns plugin before marking the columns as hidden. Fired only if the Options#hiddenColumns option is enabled.
Returning false
in the callback will prevent the hiding action from completing.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical column indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical column indexes. |
actionPossible | boolean | true , if the provided column indexes are valid, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the hiding action will not be completed.
beforeHideRows
Source codebeforeHideRows(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean
Fired by HiddenRows plugin before marking the rows as hidden. Fired only if the Options#hiddenRows option is enabled.
Returning false
in the callback will prevent the hiding action from completing.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical row indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical row indexes. |
actionPossible | boolean | true , if provided row indexes are valid, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the hiding action will not be completed.
beforeHighlightingColumnHeader
Source codebeforeHighlightingColumnHeader(column, headerLevel, highlightMeta) ⇒ number | undefined
Allows modify the visual column index that is used to retrieve the column header element (TH) before it's highlighted (proper CSS class names are added). Modifying the visual column index allows building a custom implementation of the nested headers feature or other features that require highlighting other DOM elements than that the rendering engine, by default, would have highlighted.
Since: 8.4.0
Param | Type | Description |
---|---|---|
column | number | Visual column index. |
headerLevel | number | Row header level (0 = most distant to the table). |
highlightMeta | object | An object that contains additional information about processed selection. |
beforeHighlightingRowHeader
Source codebeforeHighlightingRowHeader(row, headerLevel, highlightMeta) ⇒ number | undefined
Allows modify the visual row index that is used to retrieve the row header element (TH) before it's highlighted (proper CSS class names are added). Modifying the visual row index allows building a custom implementation of the nested headers feature or other features that require highlighting other DOM elements than that the rendering engine, by default, would have highlighted.
Since: 8.4.0
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
headerLevel | number | Column header level (0 = most distant to the table). |
highlightMeta | object | An object that contains additional information about processed selection. |
beforeInit
Source codebeforeInit
Fired before the Handsontable instance is initiated.
beforeInitWalkontable
Source codebeforeInitWalkontable(walkontableConfig)
Fired before the Walkontable instance is initiated.
Param | Type | Description |
---|---|---|
walkontableConfig | object | Walkontable configuration object. |
beforeKeyDown
Source codebeforeKeyDown(event)
Hook fired before keydown
event is handled. It can be used to stop default key bindings.
Note: To prevent default behavior you need to call false
in your beforeKeyDown
handler.
Param | Type | Description |
---|---|---|
event | Event | Original DOM event. |
beforeLanguageChange
Source codebeforeLanguageChange(languageCode)
Fired before successful change of language (when proper language code was set).
Since: 0.35.0
Param | Type | Description |
---|---|---|
languageCode | string | New language code. |
beforeLoadData
Source codebeforeLoadData(sourceData, initialLoad, source) ⇒ Array
Fired before Handsontable's data
gets modified by the loadData()
method
or the updateSettings()
method.
Read more:
Since: 8.0.0
Param | Type | Description |
---|---|---|
sourceData | Array | An array of arrays, or an array of objects, that contains Handsontable's data |
initialLoad | boolean | A flag that indicates whether the data was loaded at Handsontable's initialization (true ) or later (false ) |
source | string | The source of the call |
Returns: Array
- The returned array will be used as Handsontable's new dataset.
beforeMergeCells
Source codebeforeMergeCells(cellRange, [auto])
Fired by MergeCells plugin before cell merging. This hook is fired when Options#mergeCells option is enabled.
Param | Type | Default | Description |
---|---|---|---|
cellRange | CellRange | Selection cell range. | |
[auto] | boolean | false | optional true if called automatically by the plugin. |
beforeOnCellContextMenu
Source codebeforeOnCellContextMenu(event, coords, TD)
Fired after the user clicked a cell, but before all the calculations related with it.
Since: 4.1.0
Param | Type | Description |
---|---|---|
event | Event | The contextmenu event object. |
coords | CellCoords | Cell coords object containing the visual coordinates of the clicked cell. |
TD | HTMLTableCellElement | TD element. |
beforeOnCellMouseDown
Source codebeforeOnCellMouseDown(event, coords, TD, controller)
Fired after the user clicked a cell, but before all the calculations related with it.
Param | Type | Description |
---|---|---|
event | Event | The mousedown event object. |
coords | CellCoords | Cell coords object containing the visual coordinates of the clicked cell. |
TD | HTMLTableCellElement | TD element. |
controller | object | An object with properties row , column and cell . Each property contains a boolean value that allows or disallows changing the selection for that particular area. |
beforeOnCellMouseOut
Source codebeforeOnCellMouseOut(event, coords, TD)
Fired after the user moved cursor out from a cell, but before all the calculations related with it.
Param | Type | Description |
---|---|---|
event | Event | The mouseout event object. |
coords | CellCoords | CellCoords object containing the visual coordinates of the leaved cell. |
TD | HTMLTableCellElement | TD element. |
beforeOnCellMouseOver
Source codebeforeOnCellMouseOver(event, coords, TD, controller)
Fired after the user moved cursor over a cell, but before all the calculations related with it.
Param | Type | Description |
---|---|---|
event | Event | The mouseover event object. |
coords | CellCoords | CellCoords object containing the visual coordinates of the clicked cell. |
TD | HTMLTableCellElement | TD element. |
controller | object | An object with properties row , column and cell . Each property contains a boolean value that allows or disallows changing the selection for that particular area. |
beforeOnCellMouseUp
Source codebeforeOnCellMouseUp(event, coords, TD)
Fired after the user clicked a cell.
Param | Type | Description |
---|---|---|
event | Event | The mouseup event object. |
coords | CellCoords | Cell coords object containing the visual coordinates of the clicked cell. |
TD | HTMLTableCellElement | TD element. |
beforePaste
Source codebeforePaste(data, coords) ⇒ *
Fired by CopyPaste plugin before values are pasted into table. This hook is fired when Options#copyPaste option is enabled.
Example
// To disregard a single row, remove it from array using data.splice(i, 1).
new Handsontable(example, {
beforePaste: (data, coords) => {
// data -> [[1, 2, 3], [4, 5, 6]]
data.splice(0, 1);
// data -> [[4, 5, 6]]
// coords -> [{startRow: 0, startCol: 0, endRow: 1, endCol: 2}]
}
});
// To cancel pasting, return false from the callback.
new Handsontable(example, {
beforePaste: (data, coords) => {
return false;
}
});
Param | Type | Description |
---|---|---|
data | Array<Array> | An array of arrays which contains data to paste. |
coords | Array<object> | An array of objects with ranges of the visual indexes (startRow , startCol , endRow , endCol ) that correspond to the previously selected area. |
Returns: *
- If returns false
then pasting is canceled.
beforeRedo
Source codebeforeRedo(action) ⇒ * | boolean
Fired by UndoRedo plugin before the redo action. Contains information about the action that is being redone. This hook is fired when Options#undo option is enabled.
Param | Type | Description |
---|---|---|
action | object | The action object. Contains information about the action being redone. The actionType property of the object specifies the type of the action in a String format (e.g. 'remove_row' ). |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeRedoStackChange
Source codebeforeRedoStackChange(undoneActions)
Fired by UndoRedo plugin before changing redo stack.
Since: 8.4.0
Param | Type | Description |
---|---|---|
undoneActions | Array | Stack of actions which may be redone. |
beforeRefreshDimensions
Source codebeforeRefreshDimensions(previousDimensions, currentDimensions, actionPossible) ⇒ undefined | boolean
Cancellable hook, called after resizing a window or after detecting size change of the Handsontable root element, but before redrawing a table.
Param | Type | Description |
---|---|---|
previousDimensions | Object | Previous dimensions of the container. |
currentDimensions | Object | Current dimensions of the container. |
actionPossible | boolean | true , if current and previous dimensions are different, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the refresh action will not be completed.
beforeRemoveCellClassNames
Source codebeforeRemoveCellClassNames ⇒ Array<string> | undefined
Fired inside the Walkontable's refreshSelections
method. Can be used to remove additional class names from all cells in the table.
Since: 0.38.1
Returns: Array<string>
| undefined
- Can return an Array
of String
s. Each of these strings will act like class names to be removed from all the cells in the table.
beforeRemoveCellMeta
Source codebeforeRemoveCellMeta(row, column, key, value) ⇒ * | boolean
Fired before cell meta is removed.
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
key | string | The removed meta key. |
value | * | Value which is under removed key of cell meta. |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeRemoveCol
Source codebeforeRemoveCol(index, amount, physicalColumns, [source]) ⇒ * | boolean
Fired before one or more columns are about to be removed.
Param | Type | Description |
---|---|---|
index | number | Visual index of starter column. |
amount | number | Amount of columns to be removed. |
physicalColumns | Array<number> | An array of physical columns removed from the data source. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeRemoveRow
Source codebeforeRemoveRow(index, amount, physicalRows, [source]) ⇒ * | boolean
Fired when one or more rows are about to be removed.
Param | Type | Description |
---|---|---|
index | number | Visual index of starter row. |
amount | number | Amount of rows to be removed. |
physicalRows | Array<number> | An array of physical rows removed from the data source. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeRender
Source codebeforeRender(isForced)
Fired before Handsontable's view-rendering engine updates the view.
The beforeRender
event is fired right after the Handsontable
business logic is executed and right before the rendering engine starts calling
the Core logic, renderers, cell meta objects etc. to update the view.
Param | Type | Description |
---|---|---|
isForced | boolean | If set to true , the rendering gets triggered by a change of settings, a change of data, or a logic that needs a full Handsontable render cycle. If set to false , the rendering gets triggered by scrolling or moving the selection. |
beforeRenderer
Source codebeforeRenderer(TD, row, column, prop, value, cellProperties)
Fired before starting rendering the cell.
Param | Type | Description |
---|---|---|
TD | HTMLTableCellElement | Currently rendered cell's TD element. |
row | number | Visual row index. |
column | number | Visual column index. |
prop | string number | Column property name or a column index, if datasource is an array of arrays. |
value | * | Value of the rendered cell. |
cellProperties | object | Object containing the cell's properties. |
beforeRowMove
Source codebeforeRowMove(movedRows, finalIndex, dropIndex, movePossible) ⇒ * | boolean
Fired by ManualRowMove plugin before changing the order of the visual indexes. This hook is fired when Options#manualRowMove option is enabled.
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 visualization of final index please take a look at documentation. |
dropIndex | number undefined | 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. It's undefined when dragRows function wasn't called. |
movePossible | boolean | Indicates if it's possible to move rows to the desired position. |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeRowResize
Source codebeforeRowResize(newSize, row, isDoubleClick) ⇒ number | undefined
Fired by ManualRowResize plugin before rendering the table with modified row sizes. This hook is fired when Options#manualRowResize option is enabled.
Param | Type | Description |
---|---|---|
newSize | number | Calculated new row height. |
row | number | Visual index of the resized row. |
isDoubleClick | boolean | Flag that determines whether there was a double-click. |
Returns: number
| undefined
- Returns the new row size or undefined
if row size should be calculated automatically.
beforeRowWrap
Source codebeforeRowWrap(isWrapEnabled, newCoords, isFlipped)
When the focus position is moved to the next or previous row caused by the Options#autoWrapRow option the hook is triggered.
Since: 14.0.0
Param | Type | Description |
---|---|---|
isWrapEnabled | boolean | Tells whether the row wrapping is going to happen. There may be situations where the option does not work even though it is enabled. This is due to the priority of other options that may block the feature. For example, when the Options#minSpareCols is defined, the Options#autoWrapRow option is not checked. Thus, row wrapping is off. |
newCoords | CellCoords | The new focus position. It is an object with keys row and col , where a value of -1 indicates a header. |
isFlipped | boolean | true if the row index was flipped, false otherwise. Flipped index means that the user reached the last row and the focus is moved to the first row or vice versa. |
beforeSelectColumns
Source codebeforeSelectColumns(from, to, highlight)
Fired before one or more columns are selected (e.g. During mouse header click or Core#selectColumns API call).
Since: 14.0.0
Example
new Handsontable(element, {
beforeSelectColumns: (from, to, highlight) => {
// Extend the column selection by one column left and one column right.
from.col = Math.max(from.col - 1, 0);
to.col = Math.min(to.col + 1, this.countCols() - 1);
}
})
Param | Type | Description |
---|---|---|
from | CellCoords | Selection start coords object. |
to | CellCoords | Selection end coords object. |
highlight | CellCoords | Selection cell focus coords object. |
beforeSelectionFocusSet
Source codebeforeSelectionFocusSet(coords)
Fired before setting focus selection.
Since: 14.3.0
Param | Type | Description |
---|---|---|
coords | CellCoords | CellCoords instance. |
beforeSelectionHighlightSet
Source codebeforeSelectionHighlightSet
Fired before applying selection coordinates to the renderable coordinates for Walkontable (rendering engine). It occurs even when cell coordinates remain unchanged and activates during cell selection and drag selection. The behavior of Shift+Tab differs from Arrow Left when there's no further movement possible.
Since: 14.0.0
beforeSelectRows
Source codebeforeSelectRows(from, to, highlight)
Fired before one or more rows are selected (e.g. during mouse header click or Core#selectRows API call).
Since: 14.0.0
Example
new Handsontable(element, {
beforeSelectRows: (from, to, highlight) => {
// Extend the row selection by one row up and one row bottom more.
from.row = Math.max(from.row - 1, 0);
to.row = Math.min(to.row + 1, this.countRows() - 1);
}
})
Param | Type | Description |
---|---|---|
from | CellCoords | Selection start coords object. |
to | CellCoords | Selection end coords object. |
highlight | CellCoords | Selection cell focus coords object. |
beforeSetCellMeta
Source codebeforeSetCellMeta(row, column, key, value) ⇒ boolean | undefined
Fired before cell meta is changed.
Since: 8.0.0
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
key | string | The updated meta key. |
value | * | The updated meta value. |
Returns: boolean
| undefined
- If false is returned the action is canceled.
beforeSetRangeEnd
Source codebeforeSetRangeEnd(coords)
Fired before setting range is ended.
Param | Type | Description |
---|---|---|
coords | CellCoords | CellCoords instance. |
beforeSetRangeStart
Source codebeforeSetRangeStart(coords)
Fired before setting range is started.
Param | Type | Description |
---|---|---|
coords | CellCoords | CellCoords instance. |
beforeSetRangeStartOnly
Source codebeforeSetRangeStartOnly(coords)
Fired before setting range is started but not finished yet.
Param | Type | Description |
---|---|---|
coords | CellCoords | CellCoords instance. |
beforeStretchingColumnWidth
Source codebeforeStretchingColumnWidth(stretchedWidth, column) ⇒ number | undefined
Fired before applying stretched column width to column.
Param | Type | Description |
---|---|---|
stretchedWidth | number | Calculated width. |
column | number | Visual column index. |
Returns: number
| undefined
- Returns new width which will be applied to the column element.
beforeTouchScroll
Source codebeforeTouchScroll
Fired before the logic of handling a touch scroll, when user started scrolling on a touch-enabled device.
beforeTrimRow
Source codebeforeTrimRow(currentTrimConfig, destinationTrimConfig, actionPossible) ⇒ undefined | boolean
Fired by TrimRows plugin before trimming rows. This hook is fired when Options#trimRows option is enabled.
Param | Type | Description |
---|---|---|
currentTrimConfig | Array | Current trim configuration - a list of trimmed physical row indexes. |
destinationTrimConfig | Array | Destination trim configuration - a list of trimmed physical row indexes. |
actionPossible | boolean | true , if all of the row indexes are withing the bounds of the table, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the trimming action will not be completed.
beforeUndo
Source codebeforeUndo(action) ⇒ * | boolean
Fired by UndoRedo plugin before the undo action. Contains information about the action that is being undone. This hook is fired when Options#undo option is enabled.
Param | Type | Description |
---|---|---|
action | object | The action object. Contains information about the action being undone. The actionType property of the object specifies the type of the action in a String format. (e.g. 'remove_row' ). |
Returns: *
| boolean
- If false is returned the action is canceled.
beforeUndoStackChange
Source codebeforeUndoStackChange(doneActions, [source]) ⇒ * | boolean
Fired by UndoRedo plugin before changing undo stack.
Since: 8.4.0
Param | Type | Description |
---|---|---|
doneActions | Array | Stack of actions which may be undone. |
[source] | string | optional String that identifies source of action (list of all available sources). |
Returns: *
| boolean
- If false is returned the action of changing undo stack is canceled.
beforeUnhideColumns
Source codebeforeUnhideColumns(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean
Fired by HiddenColumns plugin before marking the columns as not hidden. Fired only if the Options#hiddenColumns option is enabled.
Returning false
in the callback will prevent the column revealing action from completing.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical column indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical column indexes. |
actionPossible | boolean | true , if the provided column indexes are valid, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the hiding action will not be completed.
beforeUnhideRows
Source codebeforeUnhideRows(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean
Fired by HiddenRows plugin before marking the rows as not hidden. Fired only if the Options#hiddenRows option is enabled.
Returning false
in the callback will prevent the row revealing action from completing.
Param | Type | Description |
---|---|---|
currentHideConfig | Array | Current hide configuration - a list of hidden physical row indexes. |
destinationHideConfig | Array | Destination hide configuration - a list of hidden physical row indexes. |
actionPossible | boolean | true , if provided row indexes are valid, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the revealing action will not be completed.
beforeUnmergeCells
Source codebeforeUnmergeCells(cellRange, [auto])
Fired by MergeCells plugin before unmerging the cells. This hook is fired when Options#mergeCells option is enabled.
Param | Type | Default | Description |
---|---|---|---|
cellRange | CellRange | Selection cell range. | |
[auto] | boolean | false | optional true if called automatically by the plugin. |
beforeUntrimRow
Source codebeforeUntrimRow(currentTrimConfig, destinationTrimConfig, actionPossible) ⇒ undefined | boolean
Fired by TrimRows plugin before untrimming rows. This hook is fired when Options#trimRows option is enabled.
Param | Type | Description |
---|---|---|
currentTrimConfig | Array | Current trim configuration - a list of trimmed physical row indexes. |
destinationTrimConfig | Array | Destination trim configuration - a list of trimmed physical row indexes. |
actionPossible | boolean | true , if all of the row indexes are withing the bounds of the table, false otherwise. |
Returns: undefined
| boolean
- If the callback returns false
, the untrimming action will not be completed.
beforeUpdateData
Source codebeforeUpdateData(sourceData, initialLoad, source) ⇒ Array
Fired before the updateData()
method
modifies Handsontable's data
.
Read more:
Since: 11.1.0
Param | Type | Description |
---|---|---|
sourceData | Array | An array of arrays, or an array of objects, that contains Handsontable's data |
initialLoad | boolean | A flag that indicates whether the data was loaded at Handsontable's initialization (true ) or later (false ) |
source | string | The source of the call |
Returns: Array
- The returned array will be used as Handsontable's new dataset.
beforeValidate
Source codebeforeValidate(value, row, prop, [source])
Fired before cell validation, only if validator function is defined. This can be used to manipulate the value of changed cell before it is applied to the validator function.
Note: this will not affect values of changes. This will change value ONLY for validation.
Param | Type | Description |
---|---|---|
value | * | Value of the cell. |
row | number | Visual row index. |
prop | string number | Property name / column index. |
[source] | string | optional String that identifies source of hook call (list of all available sources). |
beforeValueRender
Source codebeforeValueRender(value, cellProperties)
Fired before cell value is rendered into the DOM (through renderer function). This can be used to manipulate the value which is passed to the renderer without modifying the renderer itself.
Param | Type | Description |
---|---|---|
value | * | Cell value to render. |
cellProperties | object | An object containing the cell properties. |
beforeViewportScroll
Source codebeforeViewportScroll
Fired before the vertical or horizontal viewport scroll. Triggered by the scrollViewportTo()
method or table internals.
Since: 14.0.0
beforeViewportScrollHorizontally
Source codebeforeViewportScrollHorizontally(visualColumn, [snapping]) ⇒ number | boolean
Fired before the horizontal viewport scroll. Triggered by the scrollViewportTo()
method or table internals.
Since: 14.0.0
Param | Type | Default | Description |
---|---|---|---|
visualColumn | number | Visual column index. | |
[snapping] | 'auto' 'start' 'end' | 'auto' | optional If 'start' , viewport is scrolled to show the cell on the left of the table. If 'end' , viewport is scrolled to show the cell on the right of the table. When 'auto' , the viewport is scrolled only when the column is outside of the viewport. |
Returns: number
| boolean
- Returns modified column index (or the same as passed in the method argument) to which
the viewport will be scrolled. If the returned value is false
, the scrolling will be canceled.
beforeViewportScrollVertically
Source codebeforeViewportScrollVertically(visualRow, [snapping]) ⇒ number | boolean
Fired before the vertical viewport scroll. Triggered by the scrollViewportTo()
method or table internals.
Since: 14.0.0
Param | Type | Default | Description |
---|---|---|---|
visualRow | number | Visual row index. | |
[snapping] | 'auto' 'top' 'bottom' | 'auto' | optional If 'top' , viewport is scrolled to show the cell on the top of the table. If 'bottom' , viewport is scrolled to show the cell on the bottom of the table. When 'auto' , the viewport is scrolled only when the row is outside of the viewport. |
Returns: number
| boolean
- Returns modified row index (or the same as passed in the method argument) to which
the viewport will be scrolled. If the returned value is false
, the scrolling will be canceled.
beforeViewRender
Source codebeforeViewRender(isForced, skipRender)
Fired before Handsontable's view-rendering engine is rendered.
Note: In Handsontable 9.x and earlier, the beforeViewRender
hook was named beforeRender
.
Since: 10.0.0
Param | Type | Description |
---|---|---|
isForced | boolean | If set to true , the rendering gets triggered by a change of settings, a change of data, or a logic that needs a full Handsontable render cycle. If set to false , the rendering gets triggered by scrolling or moving the selection. |
skipRender | object | Object with skipRender property, if it is set to true the next rendering cycle will be skipped. |
construct
Source codeconstruct
Fired after Handsontable instance is constructed (using new
operator).
init
Source codeinit
Fired after Handsontable instance is initiated but before table is rendered.
modifyAutoColumnSizeSeed
Source codemodifyAutoColumnSizeSeed(seed, cellProperties, cellValue)
Fired by AutoColumnSize plugin within SampleGenerator utility.
Since: 8.4.0
Param | Type | Description |
---|---|---|
seed | string undefined | Seed ID, unique name to categorize samples. |
cellProperties | object | Object containing the cell properties. |
cellValue | * | Value of the cell. |
modifyAutofillRange
Source codemodifyAutofillRange(startArea, entireArea)
Fired by Autofill plugin after setting range of autofill. This hook is fired when Options#fillHandle option is enabled.
Param | Type | Description |
---|---|---|
startArea | Array | Array of visual coordinates of the starting point for the drag-down operation ([startRow, startColumn, endRow, endColumn] ). |
entireArea | Array | Array of visual coordinates of the entire area of the drag-down operation ([startRow, startColumn, endRow, endColumn] ). |
modifyColHeader
Source codemodifyColHeader(column)
Fired when a column header index is about to be modified by a callback function.
Param | Type | Description |
---|---|---|
column | number | Visual column header index. |
modifyColumnHeaderHeight
Source codemodifyColumnHeaderHeight
Fired while retrieving the column header height.
modifyColumnHeaderValue
Source codemodifyColumnHeaderValue(value, visualColumnIndex, [headerLevel]) ⇒ string
Fired while retrieving a column header's value.
Since: 12.3.0
Param | Type | Default | Description |
---|---|---|---|
value | string | A column header value. | |
visualColumnIndex | number | A visual column index. | |
[headerLevel] | number | 0 | optional Header level index. Accepts positive (0 to n ) and negative (-1 to -n ) values. For positive values, 0 points to the topmost header. For negative values, -1 points to the bottom-most header (the header closest to the cells). |
Returns: string
- The column header value to be updated.
modifyColWidth
Source codemodifyColWidth(width, column, [source])
Fired when a column width is about to be modified by a callback function.
Param | Type | Description |
---|---|---|
width | number | Current column width. |
column | number | Visual column index. |
[source] | string | optional String that identifies source of hook call. |
modifyCopyableRange
Source codemodifyCopyableRange(copyableRanges)
Fired to allow modifying the copyable range with a callback function.
Param | Type | Description |
---|---|---|
copyableRanges | Array<Array> | Array of objects defining copyable cells. |
modifyData
Source codemodifyData(row, column, valueHolder, ioMode)
Fired when a data was retrieved or modified.
Param | Type | Description |
---|---|---|
row | number | Physical row index. |
column | number | Visual column index. |
valueHolder | object | Object which contains original value which can be modified by overwriting .value property. |
ioMode | string | String which indicates for what operation hook is fired (get or set ). |
modifyFiltersMultiSelectValue
Source codemodifyFiltersMultiSelectValue(item, meta)
Fired when rendering the list of values in the multiple-selection component of the Filters dropdown. The hook allows modifying the displayed values in that component.
Since: 14.2.0
Param | Type | Description |
---|---|---|
item | object | The item in the list of values. |
meta | object | The cell properties object. |
modifyFocusedElement
Source codemodifyFocusedElement(row, column, focusedElement)
Fired when focusing a cell or a header element. Allows replacing the element to be focused by returning a different HTML element.
Since: 14.0.0
Param | Type | Description |
---|---|---|
row | number | Row index. |
column | number | Column index. |
focusedElement | HTMLElement undefined | The element to be focused. null for focusedElement is intended when focused cell is hidden. |
modifyFocusOnTabNavigation
Source codemodifyFocusOnTabNavigation(tabActivationDir, visualCoords)
Used to modify the cell coordinates when the table is activated (going into the listen mode).
Since: 14.0.0
Param | Type | Description |
---|---|---|
tabActivationDir | 'from_above' 'from_below' | The browsers Tab navigation direction. Depending on whether the user activated the table from the element above or below, another cell can be selected. |
visualCoords | CellCoords | The coords that will be used to select a cell. |
modifyGetCellCoords
Source codemodifyGetCellCoords(row, column, topmost, source) ⇒ undefined | Array<number>
Used to modify the cell coordinates when using the getCell
method, opening editor, getting value from the editor
and saving values from the closed editor.
Since: 0.36.0
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
topmost | boolean | If set to true , it returns the TD element from the topmost overlay. For example, if the wanted cell is in the range of fixed rows, it will return a TD element from the top overlay. |
source | string | String that identifies how this coords change will be processed. Possible values: meta the change will affect the cell meta and data; render the change will affect the DOM element that will be returned by the getCell method. |
modifyGetCoordsElement
Source codemodifyGetCoordsElement(row, column) ⇒ undefined | Array<number>
Used to modify the returned cell coordinates of clicked cells (TD or TH elements).
Since: 14.6.0
Param | Type | Description |
---|---|---|
row | number | Visual row index. |
column | number | Visual column index. |
modifyRowData
Source codemodifyRowData(row)
Fired when a data was retrieved or modified.
Param | Type | Description |
---|---|---|
row | number | Physical row index. |
modifyRowHeader
Source codemodifyRowHeader(row)
Fired when a row header index is about to be modified by a callback function.
Param | Type | Description |
---|---|---|
row | number | Visual row header index. |
modifyRowHeaderWidth
Source codemodifyRowHeaderWidth(rowHeaderWidth)
Fired while retrieving the row header width.
Param | Type | Description |
---|---|---|
rowHeaderWidth | number | Row header width. |
modifyRowHeight
Source codemodifyRowHeight(height, row, [source])
Fired when a row height is about to be modified by a callback function.
Param | Type | Description |
---|---|---|
height | number | Row height. |
row | number | Visual row index. |
[source] | string | optional String that identifies source of hook call. |
modifyRowHeightByOverlayName
Source codemodifyRowHeightByOverlayName(height, row, overlayName)
Fired when a row height is about to be modified by a callback function. The hook allows to change the row height for the specified overlay type.
Since: 14.5.0
Param | Type | Description |
---|---|---|
height | number | Row height. |
row | number | Visual row index. |
overlayName | 'inline_start' 'top' 'top_inline_start_corner' 'bottom' 'bottom_inline_start_corner' 'master' | Overlay name. |
modifySourceData
Source codemodifySourceData(row, column, valueHolder, ioMode)
Fired when a data was retrieved or modified from the source data set.
Since: 8.0.0
Param | Type | Description |
---|---|---|
row | number | Physical row index. |
column | number | Physical column index or property name. |
valueHolder | object | Object which contains original value which can be modified by overwriting .value property. |
ioMode | string | String which indicates for what operation hook is fired (get or set ). |
modifyTransformEnd
Source codemodifyTransformEnd(delta)
Fired when the end of the selection is being modified (e.g. Moving the selection with the arrow keys).
Param | Type | Description |
---|---|---|
delta | CellCoords | Cell coords object declaring the delta of the new selection relative to the previous one. |
modifyTransformFocus
Source codemodifyTransformFocus(delta)
Fired when the focus of the selection is being modified (e.g. Moving the focus with the enter/tab keys).
Since: 14.3.0
Param | Type | Description |
---|---|---|
delta | CellCoords | Cell coords object declaring the delta of the new selection relative to the previous one. |
modifyTransformStart
Source codemodifyTransformStart(delta)
Fired when the start of the selection is being modified (e.g. Moving the selection with the arrow keys).
Param | Type | Description |
---|---|---|
delta | CellCoords | Cell coords object declaring the delta of the new selection relative to the previous one. |
persistentStateLoad
Source codepersistentStateLoad(key, valuePlaceholder)
Fired by PersistentState plugin, after loading value, saved under given key, from browser local storage.
The persistentStateLoad
hook is fired even when the Options#persistentState option is disabled.
Param | Type | Description |
---|---|---|
key | string | Key. |
valuePlaceholder | object | Object containing the loaded value under valuePlaceholder.value (if no value have been saved, value key will be undefined). |
persistentStateReset
Source codepersistentStateReset([key])
Fired by PersistentState plugin after resetting data from local storage. If no key is given, all values associated with table will be cleared. This hook is fired when Options#persistentState option is enabled.
Param | Type | Description |
---|---|---|
[key] | string | optional Key. |
persistentStateSave
Source codepersistentStateSave(key, value)
Fired by PersistentState plugin, after saving value under given key in browser local storage.
The persistentStateSave
hook is fired even when the Options#persistentState option is disabled.
Param | Type | Description |
---|---|---|
key | string | Key. |
value | Mixed | Value to save. |