Hooks

Members

afterAddChild

Ask AI

Source code

afterAddChild(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

Ask AI

Source code

afterAutofill(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

Ask AI

Source code

afterBeginEditing(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

Ask AI

Source code

afterCellMetaReset

Fired after resetting a cell’s meta. This happens when the Core#updateSettings method is called.

afterChange

Ask AI

Source code

afterChange(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

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

Ask AI

Source code

afterColumnCollapse(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

Ask AI

Source code

afterColumnExpand(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

Ask AI

Source code

afterColumnFreeze(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

Ask AI

Source code

afterColumnMove(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

Ask AI

Source code

afterColumnResize(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.

afterColumnSequenceCacheUpdate

Ask AI

Source code

afterColumnSequenceCacheUpdate(indexesChangesState)

Fired after the cache of the column sequence has been updated.

Since: 16.2.0

Param	Type	Description
indexesChangesState	object	Object containing information about the changes to the column sequence.
indexesChangesState.indexesSequenceChanged	boolean	Indicates if the sequence of indexes has changed.
indexesChangesState.trimmedIndexesChanged	boolean	Indicates if the trimmed indexes have changed.
indexesChangesState.hiddenIndexesChanged	boolean	Indicates if the hidden indexes have changed.

afterColumnSequenceChange

Ask AI

Source code

afterColumnSequenceChange([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

Ask AI

Source code

afterColumnSort(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

Ask AI

Source code

afterColumnUnfreeze(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

Ask AI

Source code

afterContextMenuDefaultOptions(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

Ask AI

Source code

afterContextMenuHide(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 ContextMenu plugin instance.

afterContextMenuShow

Ask AI

Source code

afterContextMenuShow(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 ContextMenu plugin instance.

afterCopy

Ask AI

Source code

afterCopy(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

Ask AI

Source code

afterCopyLimit(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

Ask AI

Source code

afterCreateCol(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

Ask AI

Source code

afterCreateRow(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

Ask AI

Source code

afterCut(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.

afterDataProviderFetch

Ask AI

Source code

afterDataProviderFetch(result)

Fired after the dataProvider has fetched and loaded data.

Since: 17.1.0

Param	Type	Description
result	object	Result object: { rows, totalRows, queryParameters, columnSortConfig, filtersConditionsStack }.

afterDataProviderFetchAbort

Ask AI

Source code

afterDataProviderFetchAbort(queryParameters, reason)

Fired after a dataProvider fetchRows request ends without loading data because it was aborted (superseded by a newer fetch, AbortSignal, or plugin disable/destroy).

Since: 17.1.0

Param	Type	Description
queryParameters	object	The query parameters that were used for the aborted request.
reason	Error undefined	Abort reason when available (e.g. AbortError).

afterDataProviderFetchError

Ask AI

Source code

afterDataProviderFetchError(error, queryParameters)

Fired when the dataProvider fetch throws an error (e.g. network error).

Since: 17.1.0

Param	Type	Description
error	Error	The thrown error.
queryParameters	object	The query parameters that were used for the request.

afterDeselect

Ask AI

Source code

afterDeselect

Fired after all selected cells are deselected.

afterDestroy

Ask AI

Source code

afterDestroy

Fired after destroying the Handsontable instance.

afterDetachChild

Ask AI

Source code

afterDetachChild(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.

afterDialogFocus

Ask AI

Source code

afterDialogFocus(focusSource)

Fired by Dialog plugin when the focus is set. This hook is fired when Options#dialog option is enabled.

Since: 16.1.0

Param	Type	Description
focusSource	'tab_from_above' 'tab_from_below' 'click' 'show'	The source of the focus.

afterDialogHide

Ask AI

Source code

afterDialogHide

Fired by Dialog plugin after hiding the dialog. This hook is fired when Options#dialog option is enabled.

Since: 16.1.0

afterDialogShow

Ask AI

Source code

afterDialogShow

Fired by Dialog plugin after showing the dialog. This hook is fired when Options#dialog option is enabled.

Since: 16.1.0

afterDocumentKeyDown

Ask AI

Source code

afterDocumentKeyDown(event)

Hook fired after keydown event is handled.

Param	Type	Description
event	Event	A native keydown event object.

afterDrawSelection

Ask AI

Source code

afterDrawSelection(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

Ask AI

Source code

afterDropdownMenuDefaultOptions(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 dropdown menu items.

afterDropdownMenuHide

Ask AI

Source code

afterDropdownMenuHide(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

Ask AI

Source code

afterDropdownMenuShow(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.

afterEmptyDataStateHide

Ask AI

Source code

afterEmptyDataStateHide

Fired by EmptyDataState plugin after hiding the empty data state overlay. This hook is fired when Options#emptyDataState option is enabled.

Since: 16.2.0

afterEmptyDataStateShow

Ask AI

Source code

afterEmptyDataStateShow

Fired by EmptyDataState plugin after showing the empty data state overlay. This hook is fired when Options#emptyDataState option is enabled.

Since: 16.2.0

afterFilter

Ask AI

Source code

afterFilter(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

Ask AI

Source code

afterFormulasValuesUpdate(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:

• Guides: Formula calculation
• HyperFormula documentation: valuesUpdated

Since: 9.0.0

Param	Type	Description
changes	Array	The addresses and new values of all the changed and recalculated cells.

afterGetCellMeta

Ask AI

Source code

afterGetCellMeta(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

Ask AI

Source code

afterGetColHeader(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

Ask AI

Source code

afterGetColumnHeaderRenderers(renderers)

Fired after getting the column header renderers.

The renderers array initially contains one renderer function when colHeaders is enabled, or zero functions when it is disabled. Each function in the array renders one layer of column headers above the grid. By pushing additional renderer functions to the array, you can display more than one layer of column headers simultaneously.

Each renderer function receives the following arguments:

Argument	Type	Description
renderedColumnIndex	number	The renderable index of the column.
TH	HTMLTableCellElement	The <th> element to modify.

new Handsontable(container, {
  colHeaders: true,
  afterGetColumnHeaderRenderers(renderers) {
    // Add a second layer of column headers above the default one.
    renderers.push((renderedColumnIndex, TH) => {
      TH.innerText = `Extra: ${renderedColumnIndex}`;
    });
  },
});

Read more:

• Options: colHeaders
• Guides: Column header

Param	Type	Description
renderers	Array<function()>	An array of the column header renderers.

afterGetRowHeader

Ask AI

Source code

afterGetRowHeader(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

Ask AI

Source code

afterGetRowHeaderRenderers(renderers)

Fired after getting the row header renderers.

The renderers array initially contains one renderer function when rowHeaders is enabled, or zero functions when it is disabled. Each function in the array renders one layer of row headers to the left of the grid. By pushing additional renderer functions to the array, you can display more than one layer of row headers simultaneously.

Each renderer function receives the following arguments:

Argument	Type	Description
renderableRowIndex	number	The renderable index of the row.
TH	HTMLTableCellElement	The <th> element to modify.

new Handsontable(container, {
  rowHeaders: true,
  afterGetRowHeaderRenderers(renderers) {
    // Add a second layer of row headers next to the default one.
    renderers.push((renderableRowIndex, TH) => {
      TH.innerText = `Extra: ${renderableRowIndex}`;
    });
  },
});

Read more:

• Options: rowHeaders
• Guides: Row header

Param	Type	Description
renderers	Array<function()>	An array of the row header renderers.

afterHideColumns

Ask AI

Source code

afterHideColumns(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

Ask AI

Source code

afterHideRows(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

Ask AI

Source code

afterInit

Fired after the Handsontable instance is initiated.

afterLanguageChange

Ask AI

Source code

afterLanguageChange(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

Ask AI

Source code

afterListen

Fired after the table was switched into listening mode. This allows Handsontable to capture keyboard events and respond in the right way.

afterLoadData

Ask AI

Source code

afterLoadData(sourceData, initialLoad, source)

Fired after Handsontable’s data gets modified by the loadData() method or the updateSettings() method.

Read more:

• Binding to data
• Saving data

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

afterLoadingHide

Ask AI

Source code

afterLoadingHide

Fired by Loading plugin after hiding the loading indicator. This hook is fired when Options#loading option is enabled.

Since: 16.1.0

afterLoadingShow

Ask AI

Source code

afterLoadingShow

Fired by Loading plugin after showing the loading indicator. This hook is fired when Options#loading option is enabled.

Since: 16.1.0

afterMergeCells

Ask AI

Source code

afterMergeCells(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

Ask AI

Source code

afterModifyTransformEnd(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

Ask AI

Source code

afterModifyTransformFocus(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

Ask AI

Source code

afterModifyTransformStart(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

Ask AI

Source code

afterMomentumScroll

Fired after a scroll event, which is identified as a momentum scroll (e.g. on an iPad).

afterNamedExpressionAdded

Ask AI

Source code

afterNamedExpressionAdded(namedExpressionName, changes)

Fired by the Formulas plugin when a named expression is added to the 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

Ask AI

Source code

afterNamedExpressionRemoved(namedExpressionName, changes)

Fired by the Formulas plugin when a named expression is removed from the 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.

afterNotificationHide

Ask AI

Source code

afterNotificationHide(id)

Fired by Notification plugin after a toast is hidden.

Since: 17.1.0

Param	Type	Description
id	string	Toast id.

afterNotificationShow

Ask AI

Source code

afterNotificationShow(id, options)

Fired by Notification plugin after a toast is shown.

Since: 17.1.0

Param	Type	Description
id	string	Toast id.
options	object	Normalized toast options.

afterOnCellContextMenu

Ask AI

Source code

afterOnCellContextMenu(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

Ask AI

Source code

afterOnCellCornerDblClick(event)

Fired after a dblclick event is triggered on the cell corner (the drag handle).

Param	Type	Description
event	Event	dblclick event object.

afterOnCellCornerMouseDown

Ask AI

Source code

afterOnCellCornerMouseDown(event)

Fired after a mousedown event is triggered on the cell corner (the drag handle).

Param	Type	Description
event	Event	mousedown event object.

afterOnCellMouseDown

Ask AI

Source code

afterOnCellMouseDown(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

Ask AI

Source code

afterOnCellMouseOut(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

Ask AI

Source code

afterOnCellMouseOver(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.

afterOnCellMouseOverOutside

Ask AI

Source code

afterOnCellMouseOverOutside(event, coords, TD)

Fired after the mouse cursor moves outside the visible viewport while a mouse button is held down (e.g. during a drag-to-scroll operation). The event fires once per mousemove tick for as long as the cursor remains outside the viewport.

Since: 17.2.0

Param	Type	Description
event	Event	mousemove event object.
coords	CellCoords	Visual coordinates of the nearest viewport-edge cell.
TD	HTMLTableCellElement	Cell’s TD (or TH) element.

afterOnCellMouseUp

Ask AI

Source code

afterOnCellMouseUp(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.

afterPageChange

Ask AI

Source code

afterPageChange(oldPage, newPage)

Fired by Pagination plugin after changing the page. This hook is fired when Options#pagination option is enabled. When a complete [[Options#dataProvider]] configuration handles paging, DataProvider loads the requested page via fetchRows. Pagination then aligns its UI from [[Hooks#afterDataProviderFetch]].

Since: 16.1.0

Param	Type	Description
oldPage	number	The old page number.
newPage	number	The new page number.

afterPageCounterVisibilityChange

Ask AI

Source code

afterPageCounterVisibilityChange(isVisible)

Fired by Pagination plugin after changing the visibility state of the page counter section. This hook is fired when Options#pagination option is enabled.

Since: 16.1.0

Param	Type	Description
isVisible	boolean	The visibility state of the page size section.

afterPageNavigationVisibilityChange

Ask AI

Source code

afterPageNavigationVisibilityChange(isVisible)

Fired by Pagination plugin after changing the visibility state of the page navigation section. This hook is fired when Options#pagination option is enabled.

Since: 16.1.0

Param	Type	Description
isVisible	boolean	The visibility state of the page size section.

afterPageSizeChange

Ask AI

Source code

afterPageSizeChange(oldPageSize, newPageSize)

Fired by Pagination plugin after changing the page size. This hook is fired when Options#pagination option is enabled. When a complete [[Options#dataProvider]] configuration handles paging, DataProvider loads page 1 for the new size via fetchRows. Pagination then aligns its UI from [[Hooks#afterDataProviderFetch]].

Since: 16.1.0

Param	Type	Description
oldPageSize	number 'auto'	The old page size.
newPageSize	number 'auto'	The new page size.

afterPageSizeVisibilityChange

Ask AI

Source code

afterPageSizeVisibilityChange(isVisible)

Fired by Pagination plugin after changing the visibility state of the page size section. This hook is fired when Options#pagination option is enabled.

Since: 16.1.0

Param	Type	Description
isVisible	boolean	The visibility state of the page size section.

afterPaste

Ask AI

Source code

afterPaste(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

Ask AI

Source code

afterPluginsInitialized

Fired after initializing all the plugins. This hook should be added before Handsontable is initialized.

Example

Handsontable.hooks.add('afterPluginsInitialized', myCallback);

afterRedo

Ask AI

Source code

afterRedo(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

Ask AI

Source code

afterRedoStackChange(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

Ask AI

Source code

afterRefreshDimensions(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

Ask AI

Source code

afterRemoveCellMeta(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

Ask AI

Source code

afterRemoveCol(index, amount, physicalColumns, [source])

Fired after one or more columns are removed.

When consecutive columns are removed, this hook is fired once with the amount reflecting the total number of removed columns. When non-consecutive columns are removed (for example, by selecting columns with Ctrl/Cmd held), this hook is fired separately for each removed column, with amount equal to 1 each time. This is by design.

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

Ask AI

Source code

afterRemoveRow(index, amount, physicalRows, [source])

Fired after one or more rows are removed.

When consecutive rows are removed, this hook is fired once with the amount reflecting the total number of removed rows. When non-consecutive rows are removed (for example, by selecting rows with Ctrl/Cmd held), this hook is fired separately for each removed row, with amount equal to 1 each time. This is by design.

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

Ask AI

Source code

afterRender(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

Ask AI

Source code

afterRenderer(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

Ask AI

Source code

afterRowMove(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

Ask AI

Source code

afterRowResize(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.

afterRowSequenceCacheUpdate

Ask AI

Source code

afterRowSequenceCacheUpdate(indexesChangesState)

Fired after the cache of the row sequence has been updated.

Since: 16.2.0

Param	Type	Description
indexesChangesState	object	Object containing information about the changes to the row sequence.
indexesChangesState.indexesSequenceChanged	boolean	Indicates if the sequence of indexes has changed.
indexesChangesState.trimmedIndexesChanged	boolean	Indicates if the trimmed indexes have changed.
indexesChangesState.hiddenIndexesChanged	boolean	Indicates if the hidden indexes have changed.

afterRowSequenceChange

Ask AI

Source code

afterRowSequenceChange([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.

afterRowsMutation

Ask AI

Source code

afterRowsMutation(operation, payload)

Fired after rows mutation (create, update, remove) succeeds on the server.

Since: 17.1.0

Param	Type	Description
operation	string	One of 'create', 'update', 'remove'.
payload	object	Operation-specific payload.

afterRowsMutationError

Ask AI

Source code

afterRowsMutationError(operation, error, payload)

Fired when rows mutation (create, update, remove) fails on the server.

Since: 17.1.0

Param	Type	Description
operation	string	One of 'create', 'update', 'remove'.
error	Error	The thrown error.
payload	object	Operation-specific payload.

afterScroll

Ask AI

Source code

afterScroll

Fired after the vertical or horizontal scroll event.

Since: 14.0.0

afterScrollHorizontally

Ask AI

Source code

afterScrollHorizontally

Fired after the horizontal scroll event.

afterScrollVertically

Ask AI

Source code

afterScrollVertically

Fired after the vertical scroll event.

afterSelectAll

Ask AI

Source code

afterSelectAll(from, to, [highlight])

Fired after all cells are selected (e.g. during mouse corner click or Core#selectAll API call).

Since: 16.1.0

Param	Type	Description
from	CellCoords	Selection start coords object.
to	CellCoords	Selection end coords object.
[highlight]	CellCoords	optional Selection cell focus coords object.

afterSelectColumns

Ask AI

Source code

afterSelectColumns(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

Ask AI

Source code

afterSelection(row, column, row2, column2, preventScrolling, selectionLayerLevel)

Fired after one or more cells are selected (e.g. during mouse move).

Example

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

Ask AI

Source code

afterSelectionByProp(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

| 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

<button type="button" class="ask-about-api-btn" data-option="afterSelectionEnd" data-plugin="Hooks" aria-label="Ask AI about afterSelectionEnd">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L857" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSelectionEnd(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

<button type="button" class="ask-about-api-btn" data-option="afterSelectionEndByProp" data-plugin="Hooks" aria-label="Ask AI about afterSelectionEndByProp">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L867" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSelectionEndByProp(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

<button type="button" class="ask-about-api-btn" data-option="afterSelectionFocusSet" data-plugin="Hooks" aria-label="Ask AI about afterSelectionFocusSet">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L879" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSelectionFocusSet(row, column, preventScrolling)_

Fired after the focus position within a selected range is changed.

**Since**: 14.3.0
**Example**
```js



| 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

<button type="button" class="ask-about-api-btn" data-option="afterSelectRows" data-plugin="Hooks" aria-label="Ask AI about afterSelectRows">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1043" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSelectRows(from, to, highlight)_

Fired after one or more rows are selected (e.g. during mouse header click or [Core#selectRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="afterSetCellMeta" data-plugin="Hooks" aria-label="Ask AI about afterSetCellMeta">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1112" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSetCellMeta(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

<button type="button" class="ask-about-api-btn" data-option="afterSetDataAtCell" data-plugin="Hooks" aria-label="Ask AI about afterSetDataAtCell">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1130" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSetDataAtCell(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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |



### afterSetDataAtRowProp

<button type="button" class="ask-about-api-btn" data-option="afterSetDataAtRowProp" data-plugin="Hooks" aria-label="Ask AI about afterSetDataAtRowProp">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1138" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSetDataAtRowProp(changes, [source])_

Fired after cell data was changed.
Called only when [`setDataAtRowProp`](/docs/vue-data-grid/api/core/#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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |



### afterSetSourceDataAtCell

<button type="button" class="ask-about-api-btn" data-option="afterSetSourceDataAtCell" data-plugin="Hooks" aria-label="Ask AI about afterSetSourceDataAtCell">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1147" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSetSourceDataAtCell(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

<button type="button" class="ask-about-api-btn" data-option="afterSetTheme" data-plugin="Hooks" aria-label="Ask AI about afterSetTheme">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1155" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSetTheme(themeName, firstRun)_

Fired after a theme is enabled, changed, or disabled.

**Since**: 15.0.0

| Param | Type | Description |
| --- | --- | --- |
| themeName | `string` <br/> `boolean` <br/> `undefined` | The theme name. |
| firstRun | `boolean` | `true` if it's the initial setting of the theme, `false` otherwise. |



### afterSheetAdded

<button type="button" class="ask-about-api-btn" data-option="afterSheetAdded" data-plugin="Hooks" aria-label="Ask AI about afterSheetAdded">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2555" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSheetAdded(addedSheetDisplayName)_

Fired by the [Formulas](/docs/vue-data-grid/api/formulas/) plugin when a new sheet is added to the engine instance.

**Since**: 9.0.0

| Param | Type | Description |
| --- | --- | --- |
| addedSheetDisplayName | `string` | The name of the added sheet. |



### afterSheetRemoved

<button type="button" class="ask-about-api-btn" data-option="afterSheetRemoved" data-plugin="Hooks" aria-label="Ask AI about afterSheetRemoved">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2570" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSheetRemoved(removedSheetDisplayName, changes)_

Fired by the [Formulas](/docs/vue-data-grid/api/formulas/) plugin when a sheet is removed from the 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

<button type="button" class="ask-about-api-btn" data-option="afterSheetRenamed" data-plugin="Hooks" aria-label="Ask AI about afterSheetRenamed">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2562" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterSheetRenamed(oldDisplayName, newDisplayName)_

Fired by the [Formulas](/docs/vue-data-grid/api/formulas/) plugin when a sheet in the 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

<button type="button" class="ask-about-api-btn" data-option="afterTrimRow" data-plugin="Hooks" aria-label="Ask AI about afterTrimRow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2821" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterTrimRow(currentTrimConfig, destinationTrimConfig, actionPossible, stateChanged) ⇒ undefined | boolean_

Fired by [TrimRows](/docs/vue-data-grid/api/trim-rows/) plugin after trimming rows. This hook is fired when [Options#trimRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="afterUndo" data-plugin="Hooks" aria-label="Ask AI about afterUndo">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2615" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUndo(action)_

Fired by [UndoRedo](/docs/vue-data-grid/api/undo-redo/) plugin after the undo action. Contains information about the action that is being undone.
This hook is fired when [Options#undo](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="afterUndoStackChange" data-plugin="Hooks" aria-label="Ask AI about afterUndoStackChange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2623" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUndoStackChange(doneActionsBefore, doneActionsAfter)_

Fired by [UndoRedo](/docs/vue-data-grid/api/undo-redo/) 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

<button type="button" class="ask-about-api-btn" data-option="afterUnhideColumns" data-plugin="Hooks" aria-label="Ask AI about afterUnhideColumns">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2803" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUnhideColumns(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)_

Fired by [HiddenColumns](/docs/vue-data-grid/api/hidden-columns/) plugin after marking the columns as not hidden. Fired only if the [Options#hiddenColumns](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="afterUnhideRows" data-plugin="Hooks" aria-label="Ask AI about afterUnhideRows">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2765" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUnhideRows(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)_

Fired by [HiddenRows](/docs/vue-data-grid/api/hidden-rows/) plugin after marking the rows as not hidden. Fired only if the [Options#hiddenRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="afterUnlisten" data-plugin="Hooks" aria-label="Ask AI about afterUnlisten">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3112" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUnlisten_

Fired after the table was switched off from the listening mode. This makes the Handsontable inert for any
keyboard events.



### afterUnmergeCells

<button type="button" class="ask-about-api-btn" data-option="afterUnmergeCells" data-plugin="Hooks" aria-label="Ask AI about afterUnmergeCells">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3098" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUnmergeCells(cellRange, [auto])_

Fired by [MergeCells](/docs/vue-data-grid/api/merge-cells/) plugin after unmerging the cells. This hook is fired when [Options#mergeCells](/docs/vue-data-grid/api/options/#mergecells)
option is enabled.


| Param | Type | Default | Description |
| --- | --- | --- | --- |
| cellRange | `CellRange` |  | Selection cell range. |
| [auto] | `boolean` | <code>false</code> | `optional` `true` if called automatically by the plugin. |



### afterUntrimRow

<button type="button" class="ask-about-api-btn" data-option="afterUntrimRow" data-plugin="Hooks" aria-label="Ask AI about afterUntrimRow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2840" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUntrimRow(currentTrimConfig, destinationTrimConfig, actionPossible, stateChanged) ⇒ undefined | boolean_

Fired by [TrimRows](/docs/vue-data-grid/api/trim-rows/) plugin after untrimming rows. This hook is fired when [Options#trimRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="afterUpdateData" data-plugin="Hooks" aria-label="Ask AI about afterUpdateData">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L457" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUpdateData(sourceData, initialLoad, source)_

Fired after the [`updateData()`](/docs/vue-data-grid/api/core/#updatedata) method
modifies Handsontable's [`data`](/docs/vue-data-grid/api/options/#data).

Read more:
- [Binding to data](/docs/vue-data-grid/binding-to-data/)
- [Saving data](/docs/vue-data-grid/saving-data/)

**Since**: 11.1.0

| Param | Type | Description |
| --- | --- | --- |
| sourceData | `Array` | An [array of arrays](/docs/vue-data-grid/binding-to-data/#array-of-arrays), or an [array of objects](/docs/vue-data-grid/binding-to-data/#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

<button type="button" class="ask-about-api-btn" data-option="afterUpdateSettings" data-plugin="Hooks" aria-label="Ask AI about afterUpdateSettings">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1163" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterUpdateSettings(newSettings)_

Fired after calling the [`updateSettings`](/docs/vue-data-grid/api/core/#updatesettings) method.


| Param | Type | Description |
| --- | --- | --- |
| newSettings | `object` | New settings object. |



### afterValidate

<button type="button" class="ask-about-api-btn" data-option="afterValidate" data-plugin="Hooks" aria-label="Ask AI about afterValidate">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1169" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterValidate(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` <br/> `number` | Property name / visual column index. |
| [source] | `string` | `optional` String that identifies source of hook call                          ([list of all available sources](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `undefined` | `boolean` - If `false` the cell will be marked as invalid, `true` otherwise.

### afterViewportColumnCalculatorOverride

<button type="button" class="ask-about-api-btn" data-option="afterViewportColumnCalculatorOverride" data-plugin="Hooks" aria-label="Ask AI about afterViewportColumnCalculatorOverride">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2719" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterViewportColumnCalculatorOverride(calc)_

Fired inside the `viewportColumnCalculatorOverride` method. Allows modifying the row calculator parameters.


| Param | Type | Description |
| --- | --- | --- |
| calc | `object` | The row calculator. |



### afterViewportRowCalculatorOverride

<button type="button" class="ask-about-api-btn" data-option="afterViewportRowCalculatorOverride" data-plugin="Hooks" aria-label="Ask AI about afterViewportRowCalculatorOverride">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2713" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterViewportRowCalculatorOverride(calc)_

Fired inside the `viewportRowCalculatorOverride` method. Allows modifying the row calculator parameters.


| Param | Type | Description |
| --- | --- | --- |
| calc | `object` | The row calculator. |



### afterViewRender

<button type="button" class="ask-about-api-btn" data-option="afterViewRender" data-plugin="Hooks" aria-label="Ask AI about afterViewRender">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1545" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_afterViewRender(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

<button type="button" class="ask-about-api-btn" data-option="beforeAddChild" data-plugin="Hooks" aria-label="Ask AI about beforeAddChild">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2871" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeAddChild(parent, element, index)_

Fired by [NestedRows](/docs/vue-data-grid/api/nested-rows/) plugin before adding a children to the `NestedRows` structure. This hook is fired when
[Options#nestedRows](/docs/vue-data-grid/api/options/#nestedrows) option is enabled.


| Param | Type | Description |
| --- | --- | --- |
| parent | `object` | The parent object. |
| element | `object` <br/> `undefined` | The element added as a child. If `undefined`, a blank child was added. |
| index | `number` <br/> `undefined` | The index within the parent where the new child was added. If `undefined`, the element was added as the last child. |



### beforeAlter

<button type="button" class="ask-about-api-btn" data-option="beforeAlter" data-plugin="Hooks" aria-label="Ask AI about beforeAlter">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L357" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeAlter(action, index, amount, [source], [keepEmptyRows]) ⇒ \* | boolean_

Fired before an alter action is applied (e.g. `insert_row_above`, `insert_row_below`, `remove_row`).
Return `false` to cancel the default alter behavior (e.g. so a plugin can handle it via server-side CRUD).

**Since**: 17.1.0

| Param | Type | Description |
| --- | --- | --- |
| action | `string` | The alter action: `'insert_row_above'`, `'insert_row_below'`, `'remove_row'`,                        `'insert_col_start'`, `'insert_col_end'`, `'remove_col'`. |
| index | `number` <br/> `Array` | Visual row/column index, or for remove actions an array of `[[index, amount], ...]`. |
| amount | `number` | Number of rows/columns to insert or remove (default 1). |
| [source] | `string` | `optional` Source of the alter call (e.g. `'ContextMenu.rowAbove'`). |
| [keepEmptyRows] | `boolean` | `optional` Whether to keep empty rows (remove_row only). |


**Returns**: `*` | `boolean` - Return `false` to cancel the alter; the table will not be modified locally.

### beforeAutofill

<button type="button" class="ask-about-api-btn" data-option="beforeAutofill" data-plugin="Hooks" aria-label="Ask AI about beforeAutofill">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1199" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeAutofill(selectionData, sourceRange, targetRange, direction) ⇒ boolean | Array&lt;Array&gt;_

Fired by [Autofill](/docs/vue-data-grid/api/autofill/) plugin before populating the data in the autofill feature. This hook is fired when
[Options#fillHandle](/docs/vue-data-grid/api/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`](/docs/vue-data-grid/api/core/#populatefromarray) instead of the default autofill
                             algorithm's result.

### beforeBeginEditing

<button type="button" class="ask-about-api-btn" data-option="beforeBeginEditing" data-plugin="Hooks" aria-label="Ask AI about beforeBeginEditing">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2906" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeBeginEditing(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` <br/> `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 <kbd>**Enter**</kbd> key. Returning `undefined` (or other value
than boolean) will result in default behavior, which disallows opening an editor for non-contiguous
selection (while pressing <kbd>**Ctrl**</kbd>/<kbd>**Cmd**</kbd>) and for multiple selected cells (while pressing <kbd>**Shift**</kbd>).
Returning `true` removes those restrictions.

### beforeCellAlignment

<button type="button" class="ask-about-api-btn" data-option="beforeCellAlignment" data-plugin="Hooks" aria-label="Ask AI about beforeCellAlignment">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1225" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeCellAlignment(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

<button type="button" class="ask-about-api-btn" data-option="beforeChange" data-plugin="Hooks" aria-label="Ask AI about beforeChange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1235" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeChange(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**



| 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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `undefined` | `boolean` - If `false` all changes were cancelled, `true` otherwise.

### beforeChangeRender

<button type="button" class="ask-about-api-btn" data-option="beforeChangeRender" data-plugin="Hooks" aria-label="Ask AI about beforeChangeRender">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1345" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeChangeRender(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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |



### beforeColumnCollapse

<button type="button" class="ask-about-api-btn" data-option="beforeColumnCollapse" data-plugin="Hooks" aria-label="Ask AI about beforeColumnCollapse">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3136" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnCollapse(currentCollapsedColumns, destinationCollapsedColumns, collapsePossible) ⇒ undefined | boolean_

Fired by [CollapsibleColumns](/docs/vue-data-grid/api/collapsible-columns/) plugin before columns collapse. This hook is fired when [Options#collapsibleColumns](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeColumnExpand" data-plugin="Hooks" aria-label="Ask AI about beforeColumnExpand">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3156" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnExpand(currentCollapsedColumns, destinationCollapsedColumns, expandPossible) ⇒ undefined | boolean_

Fired by [CollapsibleColumns](/docs/vue-data-grid/api/collapsible-columns/) plugin before columns expand. This hook is fired when [Options#collapsibleColumns](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeColumnFreeze" data-plugin="Hooks" aria-label="Ask AI about beforeColumnFreeze">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2131" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnFreeze(column, freezePerformed) ⇒ boolean | undefined_

Fired by the [ManualColumnFreeze](/docs/vue-data-grid/api/manual-column-freeze/) 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

<button type="button" class="ask-about-api-btn" data-option="beforeColumnMove" data-plugin="Hooks" aria-label="Ask AI about beforeColumnMove">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2148" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnMove(movedColumns, finalIndex, dropIndex, movePossible) ⇒ undefined | boolean_

Fired by [ManualColumnMove](/docs/vue-data-grid/api/manual-column-move/) plugin before change order of the visual indexes. This hook is fired when
[Options#manualColumnMove](/docs/vue-data-grid/api/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](/docs/vue-data-grid/column-moving/). |
| dropIndex | `number` <br/> `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](/docs/vue-data-grid/column-moving/).                                     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

<button type="button" class="ask-about-api-btn" data-option="beforeColumnResize" data-plugin="Hooks" aria-label="Ask AI about beforeColumnResize">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2237" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnResize(newSize, column, isDoubleClick) ⇒ number | false | undefined_

Fired by [ManualColumnResize](/docs/vue-data-grid/api/manual-column-resize/) plugin before rendering the table with modified column sizes. This hook is
fired when [Options#manualColumnResize](/docs/vue-data-grid/api/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` | `false` | `undefined` - Returns a new column size, `false` to cancel the resize, or `undefined` to keep the size set by the drag or auto-calculation.

### beforeColumnSort

<button type="button" class="ask-about-api-btn" data-option="beforeColumnSort" data-plugin="Hooks" aria-label="Ask AI about beforeColumnSort">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1830" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnSort(currentSortConfig, destinationSortConfigs) ⇒ boolean | undefined_

Fired by [ColumnSorting](/docs/vue-data-grid/api/column-sorting/) and [MultiColumnSorting](/docs/vue-data-grid/api/multi-column-sorting/) 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](/docs/vue-data-grid/api/options/#columnsorting) or [Options#multiColumnSorting](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeColumnUnfreeze" data-plugin="Hooks" aria-label="Ask AI about beforeColumnUnfreeze">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2184" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnUnfreeze(column, unfreezePerformed) ⇒ boolean | undefined_

Fired by the [ManualColumnFreeze](/docs/vue-data-grid/api/manual-column-freeze/) 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

<button type="button" class="ask-about-api-btn" data-option="beforeColumnWrap" data-plugin="Hooks" aria-label="Ask AI about beforeColumnWrap">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1592" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeColumnWrap(isWrapEnabled, newCoords, isFlipped)_

When the focus position is moved to the next or previous column caused by the [Options#autoWrapCol](/docs/vue-data-grid/api/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](/docs/vue-data-grid/api/options/#minsparerows) is defined, the [Options#autoWrapCol](/docs/vue-data-grid/api/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. |



### beforeCompositionStart

<button type="button" class="ask-about-api-btn" data-option="beforeCompositionStart" data-plugin="Hooks" aria-label="Ask AI about beforeCompositionStart">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L405" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeCompositionStart(event)_

Hook fired after `compositionstart` event is handled.

**Since**: 15.3.0

| Param | Type | Description |
| --- | --- | --- |
| event | `Event` | A native `composition` event object. |



### beforeContextMenuSetItems

<button type="button" class="ask-about-api-btn" data-option="beforeContextMenuSetItems" data-plugin="Hooks" aria-label="Ask AI about beforeContextMenuSetItems">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L210" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeContextMenuSetItems(menuItems)_

Fired each time user opens [ContextMenu](/docs/vue-data-grid/api/context-menu/) plugin before setting up the context menu's items but after filtering these options by
user ([`contextMenu`](/docs/vue-data-grid/api/options/#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

<button type="button" class="ask-about-api-btn" data-option="beforeContextMenuShow" data-plugin="Hooks" aria-label="Ask AI about beforeContextMenuShow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L241" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeContextMenuShow(context)_

Fired by [ContextMenu](/docs/vue-data-grid/api/context-menu/) plugin before opening the context menu. This hook is fired when [Options#contextMenu](/docs/vue-data-grid/api/options/#contextmenu)
option is enabled.


| Param | Type | Description |
| --- | --- | --- |
| context | `object` | The [ContextMenu](/docs/vue-data-grid/api/context-menu/) instance. |



### beforeCopy

<button type="button" class="ask-about-api-btn" data-option="beforeCopy" data-plugin="Hooks" aria-label="Ask AI about beforeCopy">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1949" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeCopy(data, coords, copiedHeadersCount) ⇒ \*_

Fired before values are copied to the clipboard.

**Example**



| 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

<button type="button" class="ask-about-api-btn" data-option="beforeCreateCol" data-plugin="Hooks" aria-label="Ask AI about beforeCreateCol">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L265" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeCreateCol(index, amount, [source]) ⇒ \*_

Fired before created a new column.

**Example**



| 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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `*` - If `false` then creating columns is cancelled.

### beforeCreateRow

<button type="button" class="ask-about-api-btn" data-option="beforeCreateRow" data-plugin="Hooks" aria-label="Ask AI about beforeCreateRow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L338" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeCreateRow(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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `*` | `boolean` - If false is returned the action is canceled.

### beforeCut

<button type="button" class="ask-about-api-btn" data-option="beforeCut" data-plugin="Hooks" aria-label="Ask AI about beforeCut">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1864" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeCut(data, coords) ⇒ \*_

Fired by [CopyPaste](/docs/vue-data-grid/api/copy-paste/) plugin before copying the values to the clipboard and before clearing values of
the selected cells. This hook is fired when [Options#copyPaste](/docs/vue-data-grid/api/options/#copypaste) option is enabled.

**Example**



| 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.

### beforeDataProviderFetch

<button type="button" class="ask-about-api-btn" data-option="beforeDataProviderFetch" data-plugin="Hooks" aria-label="Ask AI about beforeDataProviderFetch">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1436" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDataProviderFetch(queryParameters) ⇒ \* | boolean_

Fired before the dataProvider fetches data. Return `false` to cancel the fetch.

**Since**: 17.1.0

| Param | Type | Description |
| --- | --- | --- |
| queryParameters | `object` | Current query parameters: `{ page, pageSize, sort, filters }`. May include `skipLoading` when the fetch was triggered internally (for example after column sort or CRUD); not sent to `fetchRows`. |


**Returns**: `*` | `boolean` - Return `false` to cancel the fetch; otherwise the fetch proceeds.

### beforeDetachChild

<button type="button" class="ask-about-api-btn" data-option="beforeDetachChild" data-plugin="Hooks" aria-label="Ask AI about beforeDetachChild">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2889" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDetachChild(parent, element)_

Fired by [NestedRows](/docs/vue-data-grid/api/nested-rows/) plugin before detaching a child from its parent. This hook is fired when
[Options#nestedRows](/docs/vue-data-grid/api/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. |



### beforeDialogHide

<button type="button" class="ask-about-api-btn" data-option="beforeDialogHide" data-plugin="Hooks" aria-label="Ask AI about beforeDialogHide">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2937" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDialogHide_

Fired by [Dialog](/docs/vue-data-grid/api/dialog/) plugin before hiding the dialog. This hook is fired when [Options#dialog](/docs/vue-data-grid/api/options/#dialog)
option is enabled.

**Since**: 16.1.0


### beforeDialogShow

<button type="button" class="ask-about-api-btn" data-option="beforeDialogShow" data-plugin="Hooks" aria-label="Ask AI about beforeDialogShow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2944" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDialogShow_

Fired by [Dialog](/docs/vue-data-grid/api/dialog/) plugin before showing the dialog. This hook is fired when [Options#dialog](/docs/vue-data-grid/api/options/#dialog)
option is enabled.

**Since**: 16.1.0


### beforeDrawBorders

<button type="button" class="ask-about-api-btn" data-option="beforeDrawBorders" data-plugin="Hooks" aria-label="Ask AI about beforeDrawBorders">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1369" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDrawBorders(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

<button type="button" class="ask-about-api-btn" data-option="beforeDropdownMenuSetItems" data-plugin="Hooks" aria-label="Ask AI about beforeDropdownMenuSetItems">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L226" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDropdownMenuSetItems(menuItems)_

Fired by [DropdownMenu](/docs/vue-data-grid/api/dropdown-menu/) plugin before setting up the dropdown menu's items but after filtering these options
by user ([`dropdownMenu`](/docs/vue-data-grid/api/options/#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

<button type="button" class="ask-about-api-btn" data-option="beforeDropdownMenuShow" data-plugin="Hooks" aria-label="Ask AI about beforeDropdownMenuShow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2850" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeDropdownMenuShow(dropdownMenu)_

Fired by [DropdownMenu](/docs/vue-data-grid/api/dropdown-menu/) plugin before opening the dropdown menu. This hook is fired when [Options#dropdownMenu](/docs/vue-data-grid/api/options/#dropdownmenu)
option is enabled.


| Param | Type | Description |
| --- | --- | --- |
| dropdownMenu | `DropdownMenu` | The `DropdownMenu` instance. |



### beforeEmptyDataStateHide

<button type="button" class="ask-about-api-btn" data-option="beforeEmptyDataStateHide" data-plugin="Hooks" aria-label="Ask AI about beforeEmptyDataStateHide">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3017" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeEmptyDataStateHide_

Fired by [EmptyDataState](/docs/vue-data-grid/api/empty-data-state/) plugin before hiding the empty data state overlay. This hook is fired when [Options#emptyDataState](/docs/vue-data-grid/api/options/#emptydatastate)
option is enabled.

**Since**: 16.2.0


### beforeEmptyDataStateShow

<button type="button" class="ask-about-api-btn" data-option="beforeEmptyDataStateShow" data-plugin="Hooks" aria-label="Ask AI about beforeEmptyDataStateShow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3003" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeEmptyDataStateShow_

Fired by [EmptyDataState](/docs/vue-data-grid/api/empty-data-state/) plugin before showing the empty data state overlay. This hook is fired when [Options#emptyDataState](/docs/vue-data-grid/api/options/#emptydatastate)
option is enabled.

**Since**: 16.2.0


### beforeFilter

<button type="button" class="ask-about-api-btn" data-option="beforeFilter" data-plugin="Hooks" aria-label="Ask AI about beforeFilter">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2351" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeFilter(conditionsStack, previousConditionsStack) ⇒ boolean_

Fired by the [`Filters`](/docs/vue-data-grid/api/filters/) plugin,
before a [column filter](/docs/vue-data-grid/column-filter/) gets applied.

[`beforeFilter`](#beforefilter) takes two arguments: `conditionsStack` and `previousConditionsStack`, both are
arrays of objects.

Each object represents one of your [column filters](/docs/vue-data-grid/api/filters/#addcondition),
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()`](/docs/vue-data-grid/api/filters/#addcondition).                |
| `operation`  | `'conjunction'` \| `'disjunction'` \| `'disjunctionWithExtraCondition'` | An operation to perform on your set of `conditions`. For details, see [`addCondition()`](/docs/vue-data-grid/api/filters/#addcondition). |

An example of the format of the `conditionsStack` argument:

```js
[
  {
    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

Ask AI

Source code

beforeGetCellMeta(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.

beforeHeightChange

Ask AI

Source code

beforeHeightChange(height) ⇒ number | string

Fired before the height of the table is changed.

Since: 16.1.0

Param	Type	Description
height	number string	Table height.

Returns: number | string - Modified table height.

beforeHideColumns

Ask AI

Source code

beforeHideColumns(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

Ask AI

Source code

beforeHideRows(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

Ask AI

Source code

beforeHighlightingColumnHeader(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

Ask AI

Source code

beforeHighlightingRowHeader(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

Ask AI

Source code

beforeInit

Fired before the Handsontable instance is initiated.

beforeInitWalkontable

Ask AI

Source code

beforeInitWalkontable(walkontableConfig)

Fired before the Walkontable instance is initiated.

Param	Type	Description
walkontableConfig	object	Walkontable configuration object.

beforeKeyDown

Ask AI

Source code

beforeKeyDown(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

Ask AI

Source code

beforeLanguageChange(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

Ask AI

Source code

beforeLoadData(sourceData, initialLoad, source) ⇒ Array

Fired before Handsontable’s data gets modified by the loadData() method or the updateSettings() method.

Read more:

• Binding to data
• Saving data

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.

beforeLoadingHide

Ask AI

Source code

beforeLoadingHide ⇒ boolean | undefined

Fired by Loading plugin before hiding the loading indicator. This hook is fired when Options#loading option is enabled.

Since: 16.1.0

Returns: boolean | undefined - If returns false, the action will be skipped.

beforeLoadingShow

Ask AI

Source code

beforeLoadingShow ⇒ boolean | undefined

Fired by Loading plugin before showing the loading indicator. This hook is fired when Options#loading option is enabled. The callback can return false to prevent the loading indicator from being shown.

Since: 16.1.0

Returns: boolean | undefined - If returns false, the action will be skipped.

beforeMergeCells

Ask AI

Source code

beforeMergeCells(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.

beforeNotificationHide

Ask AI

Source code

beforeNotificationHide(id) ⇒ boolean | undefined

Fired by Notification plugin before a toast is hidden. Return false to keep it visible. Timed toasts keep their auto-dismiss countdown; if the hide was triggered because the countdown reached zero, the countdown restarts from the configured duration.

Since: 17.1.0

Param	Type	Description
id	string	Toast id.

Returns: boolean | undefined - If returns false, the toast stays visible.

beforeNotificationShow

Ask AI

Source code

beforeNotificationShow(options) ⇒ boolean | undefined

Fired by Notification plugin before a toast is shown or enqueued. This hook is fired when Options#notification option is enabled. Return false to cancel Notification#showMessage (no id returned, nothing enqueued). Queued toasts already passed this hook once when Notification#showMessage ran; it is not fired again when a slot opens.

Since: 17.1.0

Param	Type	Description
options	object	Normalized toast options including id, variant, message, duration, position, closable, and actions.

Returns: boolean | undefined - If returns false, the toast is not shown and not queued.

beforeOnCellContextMenu

Ask AI

Source code

beforeOnCellContextMenu(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	Cell’s TD (or TH) element.

beforeOnCellMouseDown

Ask AI

Source code

beforeOnCellMouseDown(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	Cell’s TD (or TH) 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

Ask AI

Source code

beforeOnCellMouseOut(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	Cell’s TD (or TH) element.

beforeOnCellMouseOver

Ask AI

Source code

beforeOnCellMouseOver(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	Cell’s TD (or TH) 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.

beforeOnCellMouseOverOutside

Ask AI

Source code

beforeOnCellMouseOverOutside(event, coords, TD, controller)

Fired when the mouse cursor moves outside the visible viewport while a mouse button is held down (e.g. during a drag-to-scroll operation), before selection changes are applied. Use the controller object to suppress row, column, or cell selection changes for this tick.

Since: 17.2.0

Param	Type	Description
event	Event	mousemove event object.
coords	CellCoords	Visual coordinates of the nearest viewport-edge cell.
TD	HTMLTableCellElement	Cell’s TD (or TH) 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

Ask AI

Source code

beforeOnCellMouseUp(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	Cell’s TD (or TH) element.

beforePageChange

Ask AI

Source code

beforePageChange(oldPage, newPage) ⇒ * | boolean

Fired by Pagination plugin before changing the page. This hook is fired when Options#pagination option is enabled.

Since: 16.1.0

Param	Type	Description
oldPage	number	The old page number.
newPage	number	The new page number.

Returns: * | boolean - If false is returned the action is canceled.

beforePageSizeChange

Ask AI

Source code

beforePageSizeChange(oldPageSize, newPageSize) ⇒ * | boolean

Fired by Pagination plugin before changing the page size. This hook is fired when Options#pagination option is enabled.

Since: 16.1.0

Param	Type	Description
oldPageSize	number 'auto'	The old page size.
newPageSize	number 'auto'	The new page size.

Returns: * | boolean - If false is returned the action is canceled.

beforePaste

Ask AI

Source code

beforePaste(data, coords) ⇒ *

Fired by CopyPaste plugin before values are pasted into table. This hook is fired when Options#copyPaste option is enabled.

Example

| 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

<button type="button" class="ask-about-api-btn" data-option="beforeRedo" data-plugin="Hooks" aria-label="Ask AI about beforeRedo">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2631" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRedo(action) ⇒ \* | boolean_

Fired by [UndoRedo](/docs/vue-data-grid/api/undo-redo/) plugin before the redo action. Contains information about the action that is being redone.
This hook is fired when [Options#undo](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeRedoStackChange" data-plugin="Hooks" aria-label="Ask AI about beforeRedoStackChange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2640" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRedoStackChange(undoneActions)_

Fired by [UndoRedo](/docs/vue-data-grid/api/undo-redo/) plugin before changing redo stack.

**Since**: 8.4.0

| Param | Type | Description |
| --- | --- | --- |
| undoneActions | `Array` | Stack of actions which may be redone. |



### beforeRefreshDimensions

<button type="button" class="ask-about-api-btn" data-option="beforeRefreshDimensions" data-plugin="Hooks" aria-label="Ask AI about beforeRefreshDimensions">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3126" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRefreshDimensions(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

<button type="button" class="ask-about-api-btn" data-option="beforeRemoveCellClassNames" data-plugin="Hooks" aria-label="Ask AI about beforeRemoveCellClassNames">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L398" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRemoveCellClassNames ⇒ Array&lt;string&gt; | 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

<button type="button" class="ask-about-api-btn" data-option="beforeRemoveCellMeta" data-plugin="Hooks" aria-label="Ask AI about beforeRemoveCellMeta">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1384" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRemoveCellMeta(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

<button type="button" class="ask-about-api-btn" data-option="beforeRemoveCol" data-plugin="Hooks" aria-label="Ask AI about beforeRemoveCol">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1511" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRemoveCol(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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `*` | `boolean` - If false is returned the action is canceled.

### beforeRemoveRow

<button type="button" class="ask-about-api-btn" data-option="beforeRemoveRow" data-plugin="Hooks" aria-label="Ask AI about beforeRemoveRow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1522" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRemoveRow(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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `*` | `boolean` - If false is returned the action is canceled.

### beforeRender

<button type="button" class="ask-about-api-btn" data-option="beforeRender" data-plugin="Hooks" aria-label="Ask AI about beforeRender">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1557" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRender(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

<button type="button" class="ask-about-api-btn" data-option="beforeRenderer" data-plugin="Hooks" aria-label="Ask AI about beforeRenderer">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L643" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRenderer(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` <br/> `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

<button type="button" class="ask-about-api-btn" data-option="beforeRowMove" data-plugin="Hooks" aria-label="Ask AI about beforeRowMove">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2201" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRowMove(movedRows, finalIndex, dropIndex, movePossible) ⇒ \* | boolean_

Fired by [ManualRowMove](/docs/vue-data-grid/api/manual-row-move/) plugin before changing the order of the visual indexes. This hook is fired when
[Options#manualRowMove](/docs/vue-data-grid/api/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](/docs/vue-data-grid/row-moving/). |
| dropIndex | `number` <br/> `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](/docs/vue-data-grid/row-moving/).                                     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

<button type="button" class="ask-about-api-btn" data-option="beforeRowResize" data-plugin="Hooks" aria-label="Ask AI about beforeRowResize">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2256" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRowResize(newSize, row, isDoubleClick) ⇒ number | false | undefined_

Fired by [ManualRowResize](/docs/vue-data-grid/api/manual-row-resize/) plugin before rendering the table with modified row sizes. This hook is
fired when [Options#manualRowResize](/docs/vue-data-grid/api/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` | `false` | `undefined` - Returns a new row size, `false` to cancel the resize, or `undefined` to keep the size set by the drag or auto-calculation.

### beforeRowsMutation

<button type="button" class="ask-about-api-btn" data-option="beforeRowsMutation" data-plugin="Hooks" aria-label="Ask AI about beforeRowsMutation">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L504" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRowsMutation(operation, payload)_

Fired before rows mutation (create, update, remove) is sent to the server. Return `false` to cancel.

**Since**: 17.1.0

| Param | Type | Description |
| --- | --- | --- |
| operation | `string` | One of `'create'`, `'update'`, `'remove'`. |
| payload | `object` | Operation-specific payload (`{ rowsCreate }`, `{ rows: [...] }`, or `{ rowsRemove: [...] }`). |



### beforeRowWrap

<button type="button" class="ask-about-api-btn" data-option="beforeRowWrap" data-plugin="Hooks" aria-label="Ask AI about beforeRowWrap">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1577" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeRowWrap(isWrapEnabled, newCoords, isFlipped)_

When the focus position is moved to the next or previous row caused by the [Options#autoWrapRow](/docs/vue-data-grid/api/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](/docs/vue-data-grid/api/options/#minsparecols) is defined, the [Options#autoWrapRow](/docs/vue-data-grid/api/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. |



### beforeSelectAll

<button type="button" class="ask-about-api-btn" data-option="beforeSelectAll" data-plugin="Hooks" aria-label="Ask AI about beforeSelectAll">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1052" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSelectAll(from, to, [highlight])_

Fired before all cells are selected (e.g. during mouse corner click or [Core#selectAll](/docs/vue-data-grid/api/core/#selectall) API call).

**Since**: 16.1.0
**Example**



| Param | Type | Description |
| --- | --- | --- |
| from | `CellCoords` | Selection start coords object. |
| to | `CellCoords` | Selection end coords object. |
| [highlight] | `CellCoords` | `optional` Selection cell focus coords object. |



### beforeSelectColumns

<button type="button" class="ask-about-api-btn" data-option="beforeSelectColumns" data-plugin="Hooks" aria-label="Ask AI about beforeSelectColumns">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L936" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSelectColumns(from, to, highlight)_

Fired before one or more columns are selected (e.g. during mouse header click or [Core#selectColumns](/docs/vue-data-grid/api/core/#selectcolumns) API call).

**Since**: 14.0.0
**Example**



| Param | Type | Description |
| --- | --- | --- |
| from | `CellCoords` | Selection start coords object. |
| to | `CellCoords` | Selection end coords object. |
| highlight | `CellCoords` | Selection cell focus coords object. |



### beforeSelectionFocusSet

<button type="button" class="ask-about-api-btn" data-option="beforeSelectionFocusSet" data-plugin="Hooks" aria-label="Ask AI about beforeSelectionFocusSet">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1618" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSelectionFocusSet(coords)_

Fired before setting focus selection.

**Since**: 14.3.0

| Param | Type | Description |
| --- | --- | --- |
| coords | `CellCoords` | CellCoords instance. |



### beforeSelectionHighlightSet

<button type="button" class="ask-about-api-btn" data-option="beforeSelectionHighlightSet" data-plugin="Hooks" aria-label="Ask AI about beforeSelectionHighlightSet">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1643" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSelectionHighlightSet_

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 <kbd>**Shift**</kbd>+<kbd>**Tab**</kbd> differs from <kbd>**←**</kbd> when there's no further movement possible.

**Since**: 14.0.0


### beforeSelectRows

<button type="button" class="ask-about-api-btn" data-option="beforeSelectRows" data-plugin="Hooks" aria-label="Ask AI about beforeSelectRows">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L994" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSelectRows(from, to, highlight)_

Fired before one or more rows are selected (e.g. during mouse header click or [Core#selectRows](/docs/vue-data-grid/api/core/#selectrows) API call).

**Since**: 14.0.0
**Example**



| Param | Type | Description |
| --- | --- | --- |
| from | `CellCoords` | Selection start coords object. |
| to | `CellCoords` | Selection end coords object. |
| highlight | `CellCoords` | Selection cell focus coords object. |



### beforeSetCellMeta

<button type="button" class="ask-about-api-btn" data-option="beforeSetCellMeta" data-plugin="Hooks" aria-label="Ask AI about beforeSetCellMeta">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1607" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSetCellMeta(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

<button type="button" class="ask-about-api-btn" data-option="beforeSetRangeEnd" data-plugin="Hooks" aria-label="Ask AI about beforeSetRangeEnd">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1637" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSetRangeEnd(coords)_

Fired before setting range is ended.


| Param | Type | Description |
| --- | --- | --- |
| coords | `CellCoords` | `CellCoords` instance. |



### beforeSetRangeStart

<button type="button" class="ask-about-api-btn" data-option="beforeSetRangeStart" data-plugin="Hooks" aria-label="Ask AI about beforeSetRangeStart">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1631" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSetRangeStart(coords)_

Fired before setting range is started.


| Param | Type | Description |
| --- | --- | --- |
| coords | `CellCoords` | `CellCoords` instance. |



### beforeSetRangeStartOnly

<button type="button" class="ask-about-api-btn" data-option="beforeSetRangeStartOnly" data-plugin="Hooks" aria-label="Ask AI about beforeSetRangeStartOnly">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1625" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeSetRangeStartOnly(coords)_

Fired before setting range is started but not finished yet.


| Param | Type | Description |
| --- | --- | --- |
| coords | `CellCoords` | `CellCoords` instance. |



### beforeStretchingColumnWidth

<button type="button" class="ask-about-api-btn" data-option="beforeStretchingColumnWidth" data-plugin="Hooks" aria-label="Ask AI about beforeStretchingColumnWidth">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2343" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeStretchingColumnWidth(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

<button type="button" class="ask-about-api-btn" data-option="beforeTouchScroll" data-plugin="Hooks" aria-label="Ask AI about beforeTouchScroll">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1651" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeTouchScroll_

Fired before the logic of handling a touch scroll, when user started scrolling on a touch-enabled device.



### beforeTrimRow

<button type="button" class="ask-about-api-btn" data-option="beforeTrimRow" data-plugin="Hooks" aria-label="Ask AI about beforeTrimRow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2812" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeTrimRow(currentTrimConfig, destinationTrimConfig, actionPossible) ⇒ undefined | boolean_

Fired by [TrimRows](/docs/vue-data-grid/api/trim-rows/) plugin before trimming rows. This hook is fired when [Options#trimRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeUndo" data-plugin="Hooks" aria-label="Ask AI about beforeUndo">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2596" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUndo(action) ⇒ \* | boolean_

Fired by [UndoRedo](/docs/vue-data-grid/api/undo-redo/) plugin before the undo action. Contains information about the action that is being undone.
This hook is fired when [Options#undo](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeUndoStackChange" data-plugin="Hooks" aria-label="Ask AI about beforeUndoStackChange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2605" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUndoStackChange(doneActions, [source]) ⇒ \* | boolean_

Fired by [UndoRedo](/docs/vue-data-grid/api/undo-redo/) 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](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |


**Returns**: `*` | `boolean` - If false is returned the action of changing undo stack is canceled.

### beforeUnhideColumns

<button type="button" class="ask-about-api-btn" data-option="beforeUnhideColumns" data-plugin="Hooks" aria-label="Ask AI about beforeUnhideColumns">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2793" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUnhideColumns(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean_

Fired by [HiddenColumns](/docs/vue-data-grid/api/hidden-columns/) plugin before marking the columns as not hidden. Fired only if the [Options#hiddenColumns](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeUnhideRows" data-plugin="Hooks" aria-label="Ask AI about beforeUnhideRows">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2755" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUnhideRows(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean_

Fired by [HiddenRows](/docs/vue-data-grid/api/hidden-rows/) plugin before marking the rows as not hidden. Fired only if the [Options#hiddenRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeUnmergeCells" data-plugin="Hooks" aria-label="Ask AI about beforeUnmergeCells">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3090" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUnmergeCells(cellRange, [auto])_

Fired by [MergeCells](/docs/vue-data-grid/api/merge-cells/) plugin before unmerging the cells. This hook is fired when [Options#mergeCells](/docs/vue-data-grid/api/options/#mergecells)
option is enabled.


| Param | Type | Default | Description |
| --- | --- | --- | --- |
| cellRange | `CellRange` |  | Selection cell range. |
| [auto] | `boolean` | <code>false</code> | `optional` `true` if called automatically by the plugin. |



### beforeUntrimRow

<button type="button" class="ask-about-api-btn" data-option="beforeUntrimRow" data-plugin="Hooks" aria-label="Ask AI about beforeUntrimRow">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2831" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUntrimRow(currentTrimConfig, destinationTrimConfig, actionPossible) ⇒ undefined | boolean_

Fired by [TrimRows](/docs/vue-data-grid/api/trim-rows/) plugin before untrimming rows. This hook is fired when [Options#trimRows](/docs/vue-data-grid/api/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

<button type="button" class="ask-about-api-btn" data-option="beforeUpdateData" data-plugin="Hooks" aria-label="Ask AI about beforeUpdateData">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1421" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeUpdateData(sourceData, initialLoad, source) ⇒ Array_

Fired before the [`updateData()`](/docs/vue-data-grid/api/core/#updatedata) method
modifies Handsontable's [`data`](/docs/vue-data-grid/api/options/#data).

Read more:
- [Binding to data](/docs/vue-data-grid/binding-to-data/)
- [Saving data](/docs/vue-data-grid/saving-data/)

**Since**: 11.1.0

| Param | Type | Description |
| --- | --- | --- |
| sourceData | `Array` | An [array of arrays](/docs/vue-data-grid/binding-to-data/#array-of-arrays), or an [array of objects](/docs/vue-data-grid/binding-to-data/#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

<button type="button" class="ask-about-api-btn" data-option="beforeValidate" data-plugin="Hooks" aria-label="Ask AI about beforeValidate">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1656" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeValidate(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` <br/> `number` | Property name / column index. |
| [source] | `string` | `optional` String that identifies source of hook call                          ([list of all available sources](/docs/vue-data-grid/events-and-hooks/#definition-for-source-argument)). |



### beforeValueRender

<button type="button" class="ask-about-api-btn" data-option="beforeValueRender" data-plugin="Hooks" aria-label="Ask AI about beforeValueRender">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1669" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeValueRender(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

<button type="button" class="ask-about-api-btn" data-option="beforeViewportScroll" data-plugin="Hooks" aria-label="Ask AI about beforeViewportScroll">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L709" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeViewportScroll_

Fired before the vertical or horizontal viewport scroll. Triggered by the [`scrollViewportTo()`](/docs/vue-data-grid/api/core/#scrollviewportto)
method or table internals.

**Since**: 14.0.0


### beforeViewportScrollHorizontally

<button type="button" class="ask-about-api-btn" data-option="beforeViewportScrollHorizontally" data-plugin="Hooks" aria-label="Ask AI about beforeViewportScrollHorizontally">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L696" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeViewportScrollHorizontally(visualColumn, [snapping]) ⇒ number | boolean_

Fired before the horizontal viewport scroll. Triggered by the [`scrollViewportTo()`](/docs/vue-data-grid/api/core/#scrollviewportto)
method or table internals.

**Since**: 14.0.0

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| visualColumn | `number` |  | Visual column index. |
| [snapping] | `'auto'` <br/> `'start'` <br/> `'end'` | <code>&#x27;auto&#x27;</code> | `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

<button type="button" class="ask-about-api-btn" data-option="beforeViewportScrollVertically" data-plugin="Hooks" aria-label="Ask AI about beforeViewportScrollVertically">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L682" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeViewportScrollVertically(visualRow, [snapping]) ⇒ number | boolean_

Fired before the vertical viewport scroll. Triggered by the [`scrollViewportTo()`](/docs/vue-data-grid/api/core/#scrollviewportto)
method or table internals.

**Since**: 14.0.0

| Param | Type | Default | Description |
| --- | --- | --- | --- |
| visualRow | `number` |  | Visual row index. |
| [snapping] | `'auto'` <br/> `'top'` <br/> `'bottom'` | <code>&#x27;auto&#x27;</code> | `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

<button type="button" class="ask-about-api-btn" data-option="beforeViewRender" data-plugin="Hooks" aria-label="Ask AI about beforeViewRender">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1533" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeViewRender(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. |



### beforeWidthChange

<button type="button" class="ask-about-api-btn" data-option="beforeWidthChange" data-plugin="Hooks" aria-label="Ask AI about beforeWidthChange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1361" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_beforeWidthChange(width) ⇒ number | string_

Fired before the width of the table is changed.

**Since**: 16.1.0

| Param | Type | Description |
| --- | --- | --- |
| width | `number` <br/> `string` | Table width. |


**Returns**: `number` | `string` - Modified table width.

### construct

<button type="button" class="ask-about-api-btn" data-option="construct" data-plugin="Hooks" aria-label="Ask AI about construct">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1677" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_construct_

Fired after Handsontable instance is constructed (using `new` operator).



### dialogFocusNextElement

<button type="button" class="ask-about-api-btn" data-option="dialogFocusNextElement" data-plugin="Hooks" aria-label="Ask AI about dialogFocusNextElement">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2958" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_dialogFocusNextElement_

Fired by [Dialog](/docs/vue-data-grid/api/dialog/) plugin before focusing the next element. This hook is fired when [Options#dialog](/docs/vue-data-grid/api/options/#dialog)
option is enabled.

**Since**: 16.1.0


### dialogFocusPreviousElement

<button type="button" class="ask-about-api-btn" data-option="dialogFocusPreviousElement" data-plugin="Hooks" aria-label="Ask AI about dialogFocusPreviousElement">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2951" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_dialogFocusPreviousElement_

Fired by [Dialog](/docs/vue-data-grid/api/dialog/) plugin before focusing the previous element. This hook is fired when [Options#dialog](/docs/vue-data-grid/api/options/#dialog)
option is enabled.

**Since**: 16.1.0


### hasExternalDataSource

<button type="button" class="ask-about-api-btn" data-option="hasExternalDataSource" data-plugin="Hooks" aria-label="Ask AI about hasExternalDataSource">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L495" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_hasExternalDataSource ⇒ boolean | void_

Queried to determine if the instance uses an external data source (complete [[Options#dataProvider]] configuration).
When the DataProvider plugin is enabled, it adds an instance handler in `enablePlugin()`. Callbacks may return
`true`, `false`, or `undefined`; the value propagates through the hook chain like other [[Hooks#run]] hooks.

**Since**: 17.1.0


### init

<button type="button" class="ask-about-api-btn" data-option="init" data-plugin="Hooks" aria-label="Ask AI about init">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1682" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_init_

Fired after Handsontable instance is initiated but before table is rendered.



### modifyAutoColumnSizeSeed

<button type="button" class="ask-about-api-btn" data-option="modifyAutoColumnSizeSeed" data-plugin="Hooks" aria-label="Ask AI about modifyAutoColumnSizeSeed">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L3176" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyAutoColumnSizeSeed(seed, cellProperties, cellValue)_

Fired by [AutoColumnSize](/docs/vue-data-grid/api/auto-column-size/) plugin within SampleGenerator utility.

**Since**: 8.4.0

| Param | Type | Description |
| --- | --- | --- |
| seed | `string` <br/> `undefined` | Seed ID, unique name to categorize samples. |
| cellProperties | `object` | Object containing the cell properties. |
| cellValue | `*` | Value of the cell. |



### modifyAutofillRange

<button type="button" class="ask-about-api-btn" data-option="modifyAutofillRange" data-plugin="Hooks" aria-label="Ask AI about modifyAutofillRange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1849" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyAutofillRange(entireArea, startArea) ⇒ Array&lt;number&gt;_

Fired by [Autofill](/docs/vue-data-grid/api/autofill/) plugin to allow modifying the autofill range. This hook is fired when [Options#fillHandle](/docs/vue-data-grid/api/options/#fillhandle)
option is enabled.


| Param | Type | Description |
| --- | --- | --- |
| entireArea | `Array<number>` | Visual coordinates of the entire area of the drag-down operation (`[startRow, startColumn, endRow, endColumn]`). |
| startArea | `Array<number>` | Visual coordinates of the starting point for the drag-down operation (`[startRow, startColumn, endRow, endColumn]`). |


**Returns**: `Array<number>` - The modified autofill range (`[startRow, startColumn, endRow, endColumn]`).

### modifyColHeader

<button type="button" class="ask-about-api-btn" data-option="modifyColHeader" data-plugin="Hooks" aria-label="Ask AI about modifyColHeader">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1687" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyColHeader(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

<button type="button" class="ask-about-api-btn" data-option="modifyColumnHeaderHeight" data-plugin="Hooks" aria-label="Ask AI about modifyColumnHeaderHeight">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2578" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyColumnHeaderHeight_

Fired while retrieving the column header height.



### modifyColumnHeaderValue

<button type="button" class="ask-about-api-btn" data-option="modifyColumnHeaderValue" data-plugin="Hooks" aria-label="Ask AI about modifyColumnHeaderValue">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2583" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyColumnHeaderValue(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` | <code>0</code> | `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

<button type="button" class="ask-about-api-btn" data-option="modifyColWidth" data-plugin="Hooks" aria-label="Ask AI about modifyColWidth">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1693" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyColWidth(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

<button type="button" class="ask-about-api-btn" data-option="modifyCopyableRange" data-plugin="Hooks" aria-label="Ask AI about modifyCopyableRange">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1858" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyCopyableRange(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

<button type="button" class="ask-about-api-btn" data-option="modifyData" data-plugin="Hooks" aria-label="Ask AI about modifyData">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1744" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyData(row, column, valueHolder, ioMode)_

Fired when a data was retrieved or modified.


| Param | Type | Description |
| --- | --- | --- |
| row | `number` | Visual 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

<button type="button" class="ask-about-api-btn" data-option="modifyFiltersMultiSelectValue" data-plugin="Hooks" aria-label="Ask AI about modifyFiltersMultiSelectValue">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1701" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyFiltersMultiSelectValue(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

<button type="button" class="ask-about-api-btn" data-option="modifyFocusedElement" data-plugin="Hooks" aria-label="Ask AI about modifyFocusedElement">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1710" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyFocusedElement(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` <br/> `undefined` | The element to be focused. `null` for focusedElement is intended when focused cell is hidden. |



### modifyFocusOnTabNavigation

<button type="button" class="ask-about-api-btn" data-option="modifyFocusOnTabNavigation" data-plugin="Hooks" aria-label="Ask AI about modifyFocusOnTabNavigation">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1794" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyFocusOnTabNavigation(tabActivationDir, visualCoords) ⇒ undefined | boolean_

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'` <br/> `'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. |


**Returns**: `undefined` | `boolean` - If `false` is returned, the table will not be focused.

### modifyGetCellCoords

<button type="button" class="ask-about-api-btn" data-option="modifyGetCellCoords" data-plugin="Hooks" aria-label="Ask AI about modifyGetCellCoords">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1769" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyGetCellCoords(row, column, topmost, source) ⇒ undefined | Array&lt;number&gt;_

Used to modify the cell coordinates when using the [`getCell`](/docs/vue-data-grid/api/core/#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

<button type="button" class="ask-about-api-btn" data-option="modifyGetCoordsElement" data-plugin="Hooks" aria-label="Ask AI about modifyGetCoordsElement">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1785" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyGetCoordsElement(row, column) ⇒ undefined | Array&lt;number&gt;_

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

<button type="button" class="ask-about-api-btn" data-option="modifyRowData" data-plugin="Hooks" aria-label="Ask AI about modifyRowData">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1763" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyRowData(row)_

Fired when a data was retrieved or modified.


| Param | Type | Description |
| --- | --- | --- |
| row | `number` | Physical row index. |



### modifyRowHeader

<button type="button" class="ask-about-api-btn" data-option="modifyRowHeader" data-plugin="Hooks" aria-label="Ask AI about modifyRowHeader">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1720" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyRowHeader(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

<button type="button" class="ask-about-api-btn" data-option="modifyRowHeaderWidth" data-plugin="Hooks" aria-label="Ask AI about modifyRowHeaderWidth">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2663" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyRowHeaderWidth(rowHeaderWidth)_

Fired while retrieving the row header width.


| Param | Type | Description |
| --- | --- | --- |
| rowHeaderWidth | `number` | Row header width. |



### modifyRowHeight

<button type="button" class="ask-about-api-btn" data-option="modifyRowHeight" data-plugin="Hooks" aria-label="Ask AI about modifyRowHeight">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1726" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyRowHeight(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

<button type="button" class="ask-about-api-btn" data-option="modifyRowHeightByOverlayName" data-plugin="Hooks" aria-label="Ask AI about modifyRowHeightByOverlayName">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1734" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyRowHeightByOverlayName(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'` <br/> `'top'` <br/> `'top_inline_start_corner'` <br/> `'bottom'` <br/> `'bottom_inline_start_corner'` <br/> `'master'` | Overlay name. |



### modifySourceData

<button type="button" class="ask-about-api-btn" data-option="modifySourceData" data-plugin="Hooks" aria-label="Ask AI about modifySourceData">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L1753" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifySourceData(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

<button type="button" class="ask-about-api-btn" data-option="modifyTransformEnd" data-plugin="Hooks" aria-label="Ask AI about modifyTransformEnd">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2682" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyTransformEnd(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

<button type="button" class="ask-about-api-btn" data-option="modifyTransformFocus" data-plugin="Hooks" aria-label="Ask AI about modifyTransformFocus">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2669" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyTransformFocus(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

<button type="button" class="ask-about-api-btn" data-option="modifyTransformStart" data-plugin="Hooks" aria-label="Ask AI about modifyTransformStart">Ask AI</button>

<a href="https://github.com/handsontable/handsontable/blob/293312680cf4a3681f12797c551172d82fee68a5/handsontable/handsontable/tmp/core/hooks/constants.ts#L2676" target="_blank" rel="noopener noreferrer" class="source-code-link">Source code</a>

_modifyTransformStart(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. |