JavaScript Data GridHooks

Members

afterAddChild

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.

afterAutofill

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

afterBeginEditing

afterBeginEditing(row, column)

Fired after the editor is opened and rendered.

afterCellMetaReset

afterCellMetaReset

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

afterChange

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

new Handsontable(element, {
  afterChange: (changes) => {
    changes?.forEach(([row, prop, oldValue, newValue]) => {
      // Some logic...
    });
  }
})

afterColumnCollapse

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

afterColumnExpand

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

afterColumnFreeze

afterColumnFreeze(column, freezePerformed)

Fired by the ManualColumnFreeze plugin, right after freezing a column.

Since: 12.1.0

afterColumnMove

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.

afterColumnResize

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.

afterColumnSequenceChange

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.

afterColumnSort

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.

afterColumnUnfreeze

afterColumnUnfreeze(column, unfreezePerformed)

Fired by the ManualColumnFreeze plugin, right after unfreezing a column.

Since: 12.1.0

afterContextMenuDefaultOptions

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.

afterContextMenuHide

afterContextMenuHide(context)

Fired by ContextMenu plugin after hiding the Context Menu. This hook is fired when Options#contextMenu option is enabled.

afterContextMenuShow

afterContextMenuShow(context)

Fired by ContextMenu plugin after opening the Context Menu. This hook is fired when Options#contextMenu option is enabled.

afterCopy

afterCopy(data, coords, copiedHeadersCount)

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

afterCopyLimit

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.

afterCreateCol

afterCreateCol(index, amount, [source])

Fired after created a new column.

afterCreateRow

afterCreateRow(index, amount, [source])

Fired after created a new row.

afterCut

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.

afterDeselect

afterDeselect

Fired after all selected cells are deselected.

afterDestroy

afterDestroy

Fired after destroying the Handsontable instance.

afterDetachChild

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.

afterDocumentKeyDown

afterDocumentKeyDown(event)

Hook fired after keydown event is handled.

afterDrawSelection

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

Returns: string | undefined - Can return a String, which will act as an additional className to be added to the currently processed cell.

afterDropdownMenuDefaultOptions

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.

afterDropdownMenuHide

afterDropdownMenuHide(instance)

Fired by DropdownMenu plugin after hiding the Dropdown Menu. This hook is fired when Options#dropdownMenu option is enabled.

afterDropdownMenuShow

afterDropdownMenuShow(dropdownMenu)

Fired by DropdownMenu plugin after opening the Dropdown Menu. This hook is fired when Options#dropdownMenu option is enabled.

afterFilter

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:

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

afterFormulasValuesUpdate

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 (opens new window)

Since: 9.0.0

afterGetCellMeta

afterGetCellMeta(row, column, cellProperties)

Fired after getting the cell settings.

afterGetColHeader

afterGetColHeader(column, TH, [headerLevel])

Fired after retrieving information about a column header and appending it to the table header.

afterGetColumnHeaderRenderers

afterGetColumnHeaderRenderers(renderers)

Fired after getting the column header renderers.

afterGetRowHeader

afterGetRowHeader(row, TH)

Fired after retrieving information about a row header and appending it to the table header.

afterGetRowHeaderRenderers

afterGetRowHeaderRenderers(renderers)

Fired after getting the row header renderers.

afterHideColumns

afterHideColumns(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)

Fired by HiddenColumns plugin after marking the columns as hidden. Fired only if the Options#hiddenColumns option is enabled.

afterHideRows

afterHideRows(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)

Fired by HiddenRows plugin after marking the rows as hidden. Fired only if the Options#hiddenRows option is enabled.

afterInit

afterInit

Fired after the Handsontable instance is initiated.

afterLanguageChange

afterLanguageChange(languageCode)

Fired after successful change of language (when proper language code was set).

Since: 0.35.0

afterListen

afterListen

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

afterLoadData

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

afterMergeCells

afterMergeCells(cellRange, mergeParent, [auto])

Fired by MergeCells plugin after cell merging. This hook is fired when Options#mergeCells option is enabled.

afterModifyTransformEnd

afterModifyTransformEnd(coords, rowTransformDir, colTransformDir)

Fired after the end of the selection is being modified (e.g. Moving the selection with the arrow keys).

afterModifyTransformFocus

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

afterModifyTransformStart

afterModifyTransformStart(coords, rowTransformDir, colTransformDir)

Fired after the start of the selection is being modified (e.g. Moving the selection with the arrow keys).

afterMomentumScroll

afterMomentumScroll

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

afterNamedExpressionAdded

afterNamedExpressionAdded(namedExpressionName, changes)

Fired when a named expression is added to the Formulas' engine instance.

Since: 9.0.0

afterNamedExpressionRemoved

afterNamedExpressionRemoved(namedExpressionName, changes)

Fired when a named expression is removed from the Formulas' engine instance.

Since: 9.0.0

afterOnCellContextMenu

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

afterOnCellCornerDblClick

afterOnCellCornerDblClick(event)

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

afterOnCellCornerMouseDown

afterOnCellCornerMouseDown(event)

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

afterOnCellMouseDown

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

afterOnCellMouseOut

afterOnCellMouseOut(event, coords, TD)

Fired after leaving a cell or row/column header with the mouse cursor.

afterOnCellMouseOver

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

afterOnCellMouseUp

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

afterPaste

afterPaste(data, coords)

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

afterPluginsInitialized

afterPluginsInitialized

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

Example

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

afterRedo

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.

afterRedoStackChange

afterRedoStackChange(undoneActionsBefore, undoneActionsAfter)

Fired by UndoRedo plugin after changing redo stack.

Since: 8.4.0

afterRefreshDimensions

afterRefreshDimensions(previousDimensions, currentDimensions, stateChanged)

Fired after the window was resized or the size of the Handsontable root element was changed.

afterRemoveCellMeta

afterRemoveCellMeta(row, column, key, value)

Fired after cell meta is removed.

afterRemoveCol

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

Fired after one or more columns are removed.

afterRemoveRow

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

Fired after one or more rows are removed.

afterRender

afterRender(isForced)

Fired after Handsontable's view-rendering engine updates the view.

afterRenderer

afterRenderer(TD, row, column, prop, value, cellProperties)

Fired after finishing rendering the cell (after the renderer finishes).

afterRowMove

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.

afterRowResize

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.

afterRowSequenceChange

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.

afterScroll

afterScroll

Fired after the vertical or horizontal scroll event.

Since: 14.0.0

afterScrollHorizontally

afterScrollHorizontally

Fired after the horizontal scroll event.

afterScrollVertically

afterScrollVertically

Fired after the vertical scroll event.

afterSelectColumns

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

afterSelection

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

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

Example

new Handsontable(element, {
  afterSelection: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
    // If set to `false` (default): when cell selection is outside the viewport,
    // Handsontable scrolls the viewport to cell selection's end corner.
    // If set to `true`: when cell selection is outside the viewport,
    // Handsontable doesn't scroll to cell selection's end corner.
    preventScrolling.value = true;
  }
})

afterSelectionByProp

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

new Handsontable(element, {
  afterSelectionByProp: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
    // setting if prevent scrolling after selection
    preventScrolling.value = true;
  }
})

afterSelectionEnd

afterSelectionEnd(row, column, row2, column2, selectionLayerLevel)

Fired after one or more cells are selected (e.g. on mouse up).

afterSelectionEndByProp

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.

afterSelectionFocusSet

afterSelectionFocusSet(row, column, preventScrolling)

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

Since: 14.3.0
Example

new Handsontable(element, {
  afterSelectionFocusSet: (row, column, preventScrolling) => {
    // If set to `false` (default): when focused cell selection is outside the viewport,
    // Handsontable scrolls the viewport to that cell.
    // If set to `true`: when focused cell selection is outside the viewport,
    // Handsontable doesn't scroll the viewport.
    preventScrolling.value = true;
  }
})

afterSelectRows

afterSelectRows(from, to, highlight)

Fired after one or more rows are selected (e.g. during mouse header click or Core#selectRows API call).

Since: 14.0.0

afterSetCellMeta

afterSetCellMeta(row, column, key, value)

Fired after cell meta is changed.

afterSetDataAtCell

afterSetDataAtCell(changes, [source])

Fired after cell data was changed.

afterSetDataAtRowProp

afterSetDataAtRowProp(changes, [source])

Fired after cell data was changed. Called only when setDataAtRowProp was executed.

afterSetSourceDataAtCell

afterSetSourceDataAtCell(changes, [source])

Fired after cell source data was changed.

Since: 8.0.0

afterSetTheme

afterSetTheme(themeName, firstRun)

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

Since: 15.0.0

afterSheetAdded

afterSheetAdded(addedSheetDisplayName)

Fired when a new sheet is added to the Formulas' engine instance.

Since: 9.0.0

afterSheetRemoved

afterSheetRemoved(removedSheetDisplayName, changes)

Fired when a sheet is removed from the Formulas' engine instance.

Since: 9.0.0

afterSheetRenamed

afterSheetRenamed(oldDisplayName, newDisplayName)

Fired when a sheet in the Formulas' engine instance is renamed.

Since: 9.0.0

afterTrimRow

afterTrimRow(currentTrimConfig, destinationTrimConfig, actionPossible, stateChanged) ⇒ undefined | boolean

Fired by TrimRows plugin after trimming rows. This hook is fired when Options#trimRows option is enabled.

Returns: undefined | boolean - If the callback returns false, the trimming action will not be completed.

afterUndo

afterUndo(action)

Fired by UndoRedo plugin after the undo action. Contains information about the action that is being undone. This hook is fired when Options#undo option is enabled.

afterUndoStackChange

afterUndoStackChange(doneActionsBefore, doneActionsAfter)

Fired by UndoRedo plugin after changing undo stack.

Since: 8.4.0

afterUnhideColumns

afterUnhideColumns(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)

Fired by HiddenColumns plugin after marking the columns as not hidden. Fired only if the Options#hiddenColumns option is enabled.

afterUnhideRows

afterUnhideRows(currentHideConfig, destinationHideConfig, actionPossible, stateChanged)

Fired by HiddenRows plugin after marking the rows as not hidden. Fired only if the Options#hiddenRows option is enabled.

afterUnlisten

afterUnlisten

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

afterUnmergeCells

afterUnmergeCells(cellRange, [auto])

Fired by MergeCells plugin after unmerging the cells. This hook is fired when Options#mergeCells option is enabled.

afterUntrimRow

afterUntrimRow(currentTrimConfig, destinationTrimConfig, actionPossible, stateChanged) ⇒ undefined | boolean

Fired by TrimRows plugin after untrimming rows. This hook is fired when Options#trimRows option is enabled.

Returns: undefined | boolean - If the callback returns false, the untrimming action will not be completed.

afterUpdateData

afterUpdateData(sourceData, initialLoad, source)

Fired after the updateData() method modifies Handsontable's data.

Read more:

• Binding to data
• Saving data

Since: 11.1.0

afterUpdateSettings

afterUpdateSettings(newSettings)

Fired after calling the updateSettings method.

afterValidate

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.

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

afterViewportColumnCalculatorOverride

afterViewportColumnCalculatorOverride(calc)

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

afterViewportRowCalculatorOverride

afterViewportRowCalculatorOverride(calc)

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

afterViewRender

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

beforeAddChild

beforeAddChild(parent, element, index)

Fired by NestedRows plugin before adding a children to the NestedRows structure. This hook is fired when Options#nestedRows option is enabled.

beforeAutofill

beforeAutofill(selectionData, sourceRange, targetRange, direction) ⇒ boolean | Array<Array>

Fired by Autofill plugin before populating the data in the autofill feature. This hook is fired when Options#fillHandle option is enabled.

Returns: boolean | Array<Array> - If false, the operation is cancelled. If array of arrays, the returned data will be passed into populateFromArray instead of the default autofill algorithm's result.

beforeBeginEditing

beforeBeginEditing(row, column, initialValue, event, fullEditMode) ⇒ boolean | undefined

Fired before the editor is opened and rendered.

Since: 14.2.0

Returns: boolean | undefined - If the callback returns false, the editor won't be opened after the mouse double click or after pressing the Enter key. Returning undefined (or other value than boolean) will result in default behavior, which disallows opening an editor for non-contiguous selection (while pressing Ctrl/Cmd) and for multiple selected cells (while pressing SHIFT). Returning true removes those restrictions.

beforeCellAlignment

beforeCellAlignment(stateBefore, range, type, alignmentClass)

Fired before aligning the cell contents.

beforeChange

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

// to alter a single change, overwrite the value with `changes[i][3]`
new Handsontable(element, {
  beforeChange: (changes, source) => {
    // [[row, prop, oldVal, newVal], ...]
    changes[0][3] = 10;
  }
});

// to ignore a single change, set `changes[i]` to `null`
// or remove `changes[i]` from the array, by using `changes.splice(i, 1)`
new Handsontable(element, {
  beforeChange: (changes, source) => {
    // [[row, prop, oldVal, newVal], ...]
    changes[0] = null;
  }
});

// to ignore all changes, return `false`
// or set the array's length to 0, by using `changes.length = 0`
new Handsontable(element, {
  beforeChange: (changes, source) => {
    // [[row, prop, oldVal, newVal], ...]
    return false;
  }
});

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

beforeChangeRender

beforeChangeRender(changes, [source])

Fired right before rendering the changes.

beforeColumnCollapse

beforeColumnCollapse(currentCollapsedColumns, destinationCollapsedColumns, collapsePossible) ⇒ undefined | boolean

Fired by CollapsibleColumns plugin before columns collapse. This hook is fired when Options#collapsibleColumns option is enabled.

Since: 8.0.0

Returns: undefined | boolean - If the callback returns false, the collapsing action will not be completed.

beforeColumnExpand

beforeColumnExpand(currentCollapsedColumns, destinationCollapsedColumns, expandPossible) ⇒ undefined | boolean

Fired by CollapsibleColumns plugin before columns expand. This hook is fired when Options#collapsibleColumns option is enabled.

Since: 8.0.0

Returns: undefined | boolean - If the callback returns false, the expanding action will not be completed.

beforeColumnFreeze

beforeColumnFreeze(column, freezePerformed) ⇒ boolean | undefined

Fired by the ManualColumnFreeze plugin, before freezing a column.

Since: 12.1.0

Returns: boolean | undefined - If false: the column is not going to freeze, and the afterColumnFreeze hook won't fire.

beforeColumnMove

beforeColumnMove(movedColumns, finalIndex, dropIndex, movePossible) ⇒ undefined | boolean

Fired by ManualColumnMove plugin before change order of the visual indexes. This hook is fired when Options#manualColumnMove option is enabled.

Returns: undefined | boolean - If false the column will not be moved, true otherwise.

beforeColumnResize

beforeColumnResize(newSize, column, isDoubleClick) ⇒ number

Fired by ManualColumnResize plugin before rendering the table with modified column sizes. This hook is fired when Options#manualColumnResize option is enabled.

Returns: number - Returns a new column size or undefined, if column size should be calculated automatically.

beforeColumnSort

beforeColumnSort(currentSortConfig, destinationSortConfigs) ⇒ boolean | undefined

Fired by ColumnSorting and MultiColumnSorting plugins before sorting the column. If you return false value inside callback for hook, then sorting will be not applied by the Handsontable (useful for server-side sorting).

This hook is fired when Options#columnSorting or Options#multiColumnSorting option is enabled.

Returns: boolean | undefined - If false the column will not be sorted, true otherwise.

beforeColumnUnfreeze

beforeColumnUnfreeze(column, unfreezePerformed) ⇒ boolean | undefined

Fired by the ManualColumnFreeze plugin, before unfreezing a column.

Since: 12.1.0

Returns: boolean | undefined - If false: the column is not going to unfreeze, and the afterColumnUnfreeze hook won't fire.

beforeColumnWrap

beforeColumnWrap(isWrapEnabled, newCoords, isFlipped)

When the focus position is moved to the next or previous column caused by the Options#autoWrapCol option the hook is triggered.

Since: 14.0.0

beforeCompositionStart

beforeCompositionStart(event)

Hook fired after compositionstart event is handled.

Since: 15.3.0

beforeContextMenuSetItems

beforeContextMenuSetItems(menuItems)

Fired each time user opens ContextMenu plugin before setting up the Context Menu's items but after filtering these options by user (contextMenu option). This hook can by helpful to determine if user use specified menu item or to set up one of the menu item to by always visible.

beforeContextMenuShow

beforeContextMenuShow(context)

Fired by ContextMenu plugin before opening the Context Menu. This hook is fired when Options#contextMenu option is enabled.

beforeCopy

beforeCopy(data, coords, copiedHeadersCount) ⇒ *

Fired before values are copied to the clipboard.

Example

// To disregard a single row, remove it from array using data.splice(i, 1).
...
new Handsontable(document.getElementById('example'), {
  beforeCopy: (data, coords) => {
    // data -> [[1, 2, 3], [4, 5, 6]]
    data.splice(0, 1);
    // data -> [[4, 5, 6]]
    // coords -> [{startRow: 0, startCol: 0, endRow: 1, endCol: 2}]
  }
});
...

// To cancel copying, return false from the callback.
...
new Handsontable(document.getElementById('example'), {
  beforeCopy: (data, coords) => {
    return false;
  }
});
...

Returns: * - If returns false then copying is canceled.

beforeCreateCol

beforeCreateCol(index, amount, [source]) ⇒ *

Fired before created a new column.

Example

// Return `false` to cancel column inserting.
new Handsontable(element, {
  beforeCreateCol: function(data, coords) {
    return false;
  }
});

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

beforeCreateRow

beforeCreateRow(index, amount, [source]) ⇒ * | boolean

Fired before created a new row.

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

beforeCut

beforeCut(data, coords) ⇒ *

Fired by CopyPaste plugin before copying the values to the clipboard and before clearing values of the selected cells. This hook is fired when Options#copyPaste option is enabled.

Example

// To disregard a single row, remove it from the array using data.splice(i, 1).
new Handsontable(element, {
  beforeCut: function(data, coords) {
    // data -> [[1, 2, 3], [4, 5, 6]]
    data.splice(0, 1);
    // data -> [[4, 5, 6]]
    // coords -> [{startRow: 0, startCol: 0, endRow: 1, endCol: 2}]
  }
});
// To cancel a cutting action, just return `false`.
new Handsontable(element, {
  beforeCut: function(data, coords) {
    return false;
  }
});

Returns: * - If returns false then operation of the cutting out is canceled.

beforeDetachChild

beforeDetachChild(parent, element)

Fired by NestedRows plugin before detaching a child from its parent. This hook is fired when Options#nestedRows option is enabled.

beforeDrawBorders

beforeDrawBorders(corners, borderClassName)

Fired before drawing the borders.

beforeDropdownMenuSetItems

beforeDropdownMenuSetItems(menuItems)

Fired by DropdownMenu plugin before setting up the Dropdown Menu's items but after filtering these options by user (dropdownMenu option). This hook can by helpful to determine if user use specified menu item or to set up one of the menu item to by always visible.

beforeDropdownMenuShow

beforeDropdownMenuShow(dropdownMenu)

Fired by DropdownMenu plugin before opening the dropdown menu. This hook is fired when Options#dropdownMenu option is enabled.

beforeFilter

beforeFilter(conditionsStack, previousConditionsStack) ⇒ boolean

Fired by the Filters plugin, before a column filter gets applied.

beforeFilter takes two arguments: conditionsStack and previousConditionsStack, both are arrays of objects.

Each object represents one of your column filters, and consists of the following properties:

An example of the format of the conditionsStack argument:

[
  {
    column: 2,
    conditions: [
      {name: 'begins_with', args: [['S']]}
    ],
    operation: 'conjunction'
  },
  {
    column: 4,
    conditions: [
      {name: 'not_empty', args: []}
    ],
    operation: 'conjunction'
  },
]

To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), set beforeFilter to return false:

new Handsontable(document.getElementById('example'), {
  beforeFilter: (conditionsStack) => {
    return false;
  }
});

Read more:

• Guides: Column filter
• Hooks: afterFilter
• Options: filters
• Plugins: Filters – Plugin methods: addCondition()

Returns: boolean - To perform server-side filtering (i.e., to not apply filtering to Handsontable's UI), return false.

beforeGetCellMeta

beforeGetCellMeta(row, column, cellProperties)

Fired before getting cell settings.

beforeHideColumns

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.

Returns: undefined | boolean - If the callback returns false, the hiding action will not be completed.

beforeHideRows

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.

Returns: undefined | boolean - If the callback returns false, the hiding action will not be completed.

beforeHighlightingColumnHeader

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

beforeHighlightingRowHeader

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

beforeInit

beforeInit

Fired before the Handsontable instance is initiated.

beforeInitWalkontable

beforeInitWalkontable(walkontableConfig)

Fired before the Walkontable instance is initiated.

beforeKeyDown

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.

beforeLanguageChange

beforeLanguageChange(languageCode)

Fired before successful change of language (when proper language code was set).

Since: 0.35.0

beforeLoadData

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

Returns: Array - The returned array will be used as Handsontable's new dataset.

beforeMergeCells

beforeMergeCells(cellRange, [auto])

Fired by MergeCells plugin before cell merging. This hook is fired when Options#mergeCells option is enabled.

beforeOnCellContextMenu

beforeOnCellContextMenu(event, coords, TD)

Fired after the user clicked a cell, but before all the calculations related with it.

Since: 4.1.0

beforeOnCellMouseDown

beforeOnCellMouseDown(event, coords, TD, controller)

Fired after the user clicked a cell, but before all the calculations related with it.

beforeOnCellMouseOut

beforeOnCellMouseOut(event, coords, TD)

Fired after the user moved cursor out from a cell, but before all the calculations related with it.

beforeOnCellMouseOver

beforeOnCellMouseOver(event, coords, TD, controller)

Fired after the user moved cursor over a cell, but before all the calculations related with it.

beforeOnCellMouseUp

beforeOnCellMouseUp(event, coords, TD)

Fired after the user clicked a cell.

beforePaste

beforePaste(data, coords) ⇒ *

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

Example

// To disregard a single row, remove it from array using data.splice(i, 1).
new Handsontable(example, {
  beforePaste: (data, coords) => {
    // data -> [[1, 2, 3], [4, 5, 6]]
    data.splice(0, 1);
    // data -> [[4, 5, 6]]
    // coords -> [{startRow: 0, startCol: 0, endRow: 1, endCol: 2}]
  }
});
// To cancel pasting, return false from the callback.
new Handsontable(example, {
  beforePaste: (data, coords) => {
    return false;
  }
});

Returns: * - If returns false then pasting is canceled.

beforeRedo

beforeRedo(action) ⇒ * | boolean

Fired by UndoRedo plugin before the redo action. Contains information about the action that is being redone. This hook is fired when Options#undo option is enabled.

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

beforeRedoStackChange

beforeRedoStackChange(undoneActions)

Fired by UndoRedo plugin before changing redo stack.

Since: 8.4.0

beforeRefreshDimensions

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.

Returns: undefined | boolean - If the callback returns false, the refresh action will not be completed.

beforeRemoveCellClassNames

beforeRemoveCellClassNames ⇒ Array<string> | undefined

Fired inside the Walkontable's refreshSelections method. Can be used to remove additional class names from all cells in the table.

Since: 0.38.1

Returns: Array<string> | undefined - Can return an Array of Strings. Each of these strings will act like class names to be removed from all the cells in the table.

beforeRemoveCellMeta

beforeRemoveCellMeta(row, column, key, value) ⇒ * | boolean

Fired before cell meta is removed.

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

beforeRemoveCol

beforeRemoveCol(index, amount, physicalColumns, [source]) ⇒ * | boolean

Fired before one or more columns are about to be removed.

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

beforeRemoveRow

beforeRemoveRow(index, amount, physicalRows, [source]) ⇒ * | boolean

Fired when one or more rows are about to be removed.

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

beforeRender

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.

beforeRenderer

beforeRenderer(TD, row, column, prop, value, cellProperties)

Fired before starting rendering the cell.

beforeRowMove

beforeRowMove(movedRows, finalIndex, dropIndex, movePossible) ⇒ * | boolean

Fired by ManualRowMove plugin before changing the order of the visual indexes. This hook is fired when Options#manualRowMove option is enabled.

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

beforeRowResize

beforeRowResize(newSize, row, isDoubleClick) ⇒ number | undefined

Fired by ManualRowResize plugin before rendering the table with modified row sizes. This hook is fired when Options#manualRowResize option is enabled.

Returns: number | undefined - Returns the new row size or undefined if row size should be calculated automatically.

beforeRowWrap

beforeRowWrap(isWrapEnabled, newCoords, isFlipped)

When the focus position is moved to the next or previous row caused by the Options#autoWrapRow option the hook is triggered.

Since: 14.0.0

beforeSelectColumns

beforeSelectColumns(from, to, highlight)

Fired before one or more columns are selected (e.g. During mouse header click or Core#selectColumns API call).

Since: 14.0.0
Example

new Handsontable(element, {
  beforeSelectColumns: (from, to, highlight) => {
    // Extend the column selection by one column left and one column right.
    from.col = Math.max(from.col - 1, 0);
    to.col = Math.min(to.col + 1, this.countCols() - 1);
  }
})

beforeSelectionFocusSet

beforeSelectionFocusSet(coords)

Fired before setting focus selection.

Since: 14.3.0

beforeSelectionHighlightSet

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 Shift+Tab differs from Arrow Left when there's no further movement possible.

Since: 14.0.0

beforeSelectRows

beforeSelectRows(from, to, highlight)

Fired before one or more rows are selected (e.g. during mouse header click or Core#selectRows API call).

Since: 14.0.0
Example

new Handsontable(element, {
  beforeSelectRows: (from, to, highlight) => {
    // Extend the row selection by one row up and one row bottom more.
    from.row = Math.max(from.row - 1, 0);
    to.row = Math.min(to.row + 1, this.countRows() - 1);
  }
})

beforeSetCellMeta

beforeSetCellMeta(row, column, key, value) ⇒ boolean | undefined

Fired before cell meta is changed.

Since: 8.0.0

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

beforeSetRangeEnd

beforeSetRangeEnd(coords)

Fired before setting range is ended.

beforeSetRangeStart

beforeSetRangeStart(coords)

Fired before setting range is started.

beforeSetRangeStartOnly

beforeSetRangeStartOnly(coords)

Fired before setting range is started but not finished yet.

beforeStretchingColumnWidth

beforeStretchingColumnWidth(stretchedWidth, column) ⇒ number | undefined

Fired before applying stretched column width to column.

Returns: number | undefined - Returns new width which will be applied to the column element.

beforeTouchScroll

beforeTouchScroll

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

beforeTrimRow

beforeTrimRow(currentTrimConfig, destinationTrimConfig, actionPossible) ⇒ undefined | boolean

Fired by TrimRows plugin before trimming rows. This hook is fired when Options#trimRows option is enabled.

Returns: undefined | boolean - If the callback returns false, the trimming action will not be completed.

beforeUndo

beforeUndo(action) ⇒ * | boolean

Fired by UndoRedo plugin before the undo action. Contains information about the action that is being undone. This hook is fired when Options#undo option is enabled.

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

beforeUndoStackChange

beforeUndoStackChange(doneActions, [source]) ⇒ * | boolean

Fired by UndoRedo plugin before changing undo stack.

Since: 8.4.0

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

beforeUnhideColumns

beforeUnhideColumns(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean

Fired by HiddenColumns plugin before marking the columns as not hidden. Fired only if the Options#hiddenColumns option is enabled. Returning false in the callback will prevent the column revealing action from completing.

Returns: undefined | boolean - If the callback returns false, the hiding action will not be completed.

beforeUnhideRows

beforeUnhideRows(currentHideConfig, destinationHideConfig, actionPossible) ⇒ undefined | boolean

Fired by HiddenRows plugin before marking the rows as not hidden. Fired only if the Options#hiddenRows option is enabled. Returning false in the callback will prevent the row revealing action from completing.

Returns: undefined | boolean - If the callback returns false, the revealing action will not be completed.

beforeUnmergeCells

beforeUnmergeCells(cellRange, [auto])

Fired by MergeCells plugin before unmerging the cells. This hook is fired when Options#mergeCells option is enabled.

beforeUntrimRow

beforeUntrimRow(currentTrimConfig, destinationTrimConfig, actionPossible) ⇒ undefined | boolean

Fired by TrimRows plugin before untrimming rows. This hook is fired when Options#trimRows option is enabled.

Returns: undefined | boolean - If the callback returns false, the untrimming action will not be completed.

beforeUpdateData

beforeUpdateData(sourceData, initialLoad, source) ⇒ Array

Fired before the updateData() method modifies Handsontable's data.

Read more:

• Binding to data
• Saving data

Since: 11.1.0

Returns: Array - The returned array will be used as Handsontable's new dataset.

beforeValidate

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.

beforeValueRender

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.

beforeViewportScroll

beforeViewportScroll

Fired before the vertical or horizontal viewport scroll. Triggered by the scrollViewportTo() method or table internals.

Since: 14.0.0

beforeViewportScrollHorizontally

beforeViewportScrollHorizontally(visualColumn, [snapping]) ⇒ number | boolean

Fired before the horizontal viewport scroll. Triggered by the scrollViewportTo() method or table internals.

Since: 14.0.0

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

beforeViewportScrollVertically(visualRow, [snapping]) ⇒ number | boolean

Fired before the vertical viewport scroll. Triggered by the scrollViewportTo() method or table internals.

Since: 14.0.0

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

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

construct

construct

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

init

init

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

modifyAutoColumnSizeSeed

modifyAutoColumnSizeSeed(seed, cellProperties, cellValue)

Fired by AutoColumnSize plugin within SampleGenerator utility.

Since: 8.4.0

modifyAutofillRange

modifyAutofillRange(startArea, entireArea)

Fired by Autofill plugin after setting range of autofill. This hook is fired when Options#fillHandle option is enabled.

modifyColHeader

modifyColHeader(column)

Fired when a column header index is about to be modified by a callback function.

modifyColumnHeaderHeight

modifyColumnHeaderHeight

Fired while retrieving the column header height.

modifyColumnHeaderValue

modifyColumnHeaderValue(value, visualColumnIndex, [headerLevel]) ⇒ string

Fired while retrieving a column header's value.

Since: 12.3.0

Returns: string - The column header value to be updated.

modifyColWidth

modifyColWidth(width, column, [source])

Fired when a column width is about to be modified by a callback function.

modifyCopyableRange

modifyCopyableRange(copyableRanges)

Fired to allow modifying the copyable range with a callback function.

modifyData

modifyData(row, column, valueHolder, ioMode)

Fired when a data was retrieved or modified.

modifyFiltersMultiSelectValue

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

modifyFocusedElement

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

modifyFocusOnTabNavigation

modifyFocusOnTabNavigation(tabActivationDir, visualCoords)

Used to modify the cell coordinates when the table is activated (going into the listen mode).

Since: 14.0.0

modifyGetCellCoords

modifyGetCellCoords(row, column, topmost, source) ⇒ undefined | Array<number>

Used to modify the cell coordinates when using the getCell method, opening editor, getting value from the editor and saving values from the closed editor.

Since: 0.36.0

modifyGetCoordsElement

modifyGetCoordsElement(row, column) ⇒ undefined | Array<number>

Used to modify the returned cell coordinates of clicked cells (TD or TH elements).

Since: 14.6.0

modifyRowData

modifyRowData(row)

Fired when a data was retrieved or modified.

modifyRowHeader

modifyRowHeader(row)

Fired when a row header index is about to be modified by a callback function.

modifyRowHeaderWidth

modifyRowHeaderWidth(rowHeaderWidth)

Fired while retrieving the row header width.

modifyRowHeight

modifyRowHeight(height, row, [source])

Fired when a row height is about to be modified by a callback function.

modifyRowHeightByOverlayName

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

modifySourceData

modifySourceData(row, column, valueHolder, ioMode)

Fired when a data was retrieved or modified from the source data set.

Since: 8.0.0

modifyTransformEnd

modifyTransformEnd(delta)

Fired when the end of the selection is being modified (e.g. Moving the selection with the arrow keys).

modifyTransformFocus

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

modifyTransformStart

modifyTransformStart(delta)

Fired when the start of the selection is being modified (e.g. Moving the selection with the arrow keys).

persistentStateLoad

persistentStateLoad(key, valuePlaceholder)

Fired by PersistentState plugin, after loading value, saved under given key, from browser local storage.

The persistentStateLoad hook is fired even when the Options#persistentState option is disabled.

persistentStateReset

persistentStateReset([key])

Fired by PersistentState plugin after resetting data from local storage. If no key is given, all values associated with table will be cleared. This hook is fired when Options#persistentState option is enabled.

persistentStateSave

persistentStateSave(key, value)

Fired by PersistentState plugin, after saving value under given key in browser local storage.

The persistentStateSave hook is fired even when the Options#persistentState option is disabled.