Core

Source code

After Handsontable is constructed, you can modify the grid behavior using the available public methods.

How to call methods

These are 2 equal ways to call a Handsontable method:

// all following examples assume that you constructed Handsontable like this
const hot = new Handsontable(document.getElementById('example1'), options);

// now, to use setDataAtCell method, you can either:
ht.setDataAtCell(0, 0, 'new value');

Alternatively, you can call the method using jQuery wrapper (obsolete, requires initialization using our jQuery guide

  $('#example1').handsontable('setDataAtCell', 0, 0, 'new value');

Methods

Source code

addHook(key, callback)

Adds listener to the specified hook name (only for this Handsontable instance).

Parameters:
Name Type Description
key String

Hook name (see Hooks).
callback function | Array

Function or array of functions.
See:
Example
hot.addHook('beforeInit', myCallback);
Source code

addHookOnce(key, callback)

Adds listener to specified hook name (only for this Handsontable instance). After the listener is triggered,
it will be automatically removed.

Parameters:
Name Type Description
key String

Hook name (see Hooks).
callback function | Array

Function or array of functions.
See:
Example
hot.addHookOnce('beforeInit', myCallback);
Source code

alter(action, index, amount, source, keepEmptyRows)

Allows altering the table structure by either inserting/removing rows or columns.

Parameters:
Name Type Default Description
action String

Possible alter operations:

  • 'insert_row'
  • 'insert_col'
  • 'remove_row'
  • 'remove_col'
index Number | Array.<Number>

Visual index of the row/column before which the new row/column will be
inserted/removed or an array of arrays in format [[index, amount],...].
amount Number 1 optional

Amount of rows/columns to be inserted or removed.
source String optional

Source indicator.
keepEmptyRows Boolean optional

Flag for preventing deletion of empty rows.
Example
// Insert new row above the row at given visual index.
hot.alter('insert_row', 10);
// Insert 3 new columns before 10th column.
hot.alter('insert_col', 10, 3);
// Remove 2 rows starting from 10th row.
hot.alter('remove_row', 10, 2);
// Remove 5 non-contiquous rows (it removes 3 rows from visual index 1 and 2 rows from visual index 5).
hot.alter('remove_row', [[1, 3], [5, 2]]);
Source code

clear()

Clears the data from the table (the table settings remain intact).

Source code

colOffset(){Number}

Returns the visual index of the first rendered column.
Returns -1 if no column is rendered.

Returns: {Number} Visual index of the first visible column.
Source code

colToProp(column){String|Number}

Returns the property name that corresponds with the given column index (see DataMap#colToProp).
If the data source is an array of arrays, it returns the columns index.

Parameters:
Name Type Description
column Number

Visual column index.
Returns: {String|Number} Column property or physical column index.
Source code

countCols(){Number}

Returns the total number of visible columns in the table.

Returns: {Number} Total number of columns.
Source code

countEmptyCols(ending){Number}

Returns the number of empty columns. If the optional ending parameter is true, returns the number of empty
columns at right hand edge of the table.

Parameters:
Name Type Default Description
ending Boolean false optional

If true, will only count empty columns at the end of the data source row.
Returns: {Number} Count empty cols.
Source code

countEmptyRows(ending){Number}

Returns the number of empty rows. If the optional ending parameter is true, returns the
number of empty rows at the bottom of the table.

Parameters:
Name Type Default Description
ending Boolean false optional

If true, will only count empty rows at the end of the data source.
Returns: {Number} Count empty rows.
Source code

countRenderedCols(){Number}

Returns the number of rendered columns (including columns partially or fully rendered outside viewport).

Returns: {Number} Returns -1 if table is not visible.
Source code

countRenderedRows(){Number}

Returns the number of rendered rows (including rows partially or fully rendered outside viewport).

Returns: {Number} Returns -1 if table is not visible.
Source code

countRows(){Number}

Returns the total number of visual rows in the table.

Returns: {Number} Total number of rows.
Source code

countSourceCols(){Number}

Returns the total number of columns in the data source.

Returns: {Number} Total number of columns.
Source code

countSourceRows(){Number}

Returns the total number of rows in the data source.

Returns: {Number} Total number of rows.
Source code

countVisibleCols(){Number}

Returns the number of visible columns. Returns -1 if table is not visible

Returns: {Number} Number of visible columns or -1.
Source code

countVisibleRows(){Number}

Returns the number of visible rows (rendered rows that fully fit inside viewport).

Returns: {Number} Number of visible rows or -1.
Source code

deselectCell()

Deselects the current cell selection on the table.

Source code

destroy()

Removes the table from the DOM and destroys the instance of the Handsontable.

Fires:
Source code

destroyEditor(revertOriginal, prepareEditorIfNeeded)

Destroys the current editor, render the table and prepares the editor of the newly selected cell.

Parameters:
Name Type Default Description
revertOriginal Boolean false optional

If true, the previous value will be restored. Otherwise, the edited value will be saved.
prepareEditorIfNeeded Boolean true optional

If true the editor under the selected cell will be prepared to open.
Source code

emptySelectedCells(source)

Erases content from cells that have been selected in the table.

Parameters:
Name Type Description
source String optional

String that identifies how this change will be described in the changes array (useful in onAfterChange or onBeforeChange callback).
Since: 0.36.0
Source code

getActiveEditor(){BaseEditor}

Returns the active editor class instance.

Returns: {BaseEditor} The active editor instance.
Source code

getCell(row, column, topmost){HTMLTableCellElement|null}

Returns a TD element for the given row and column arguments, if it is rendered on screen.
Returns null if the TD is not rendered on screen (probably because that part of the table is not visible).

Parameters:
Name Type Default Description
row Number

Visual row index.
column Number

Visual column index.
topmost Boolean false optional

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.
Returns: {HTMLTableCellElement|null} The cell's TD element.
Source code

getCellEditor(row, column){function}

Returns the cell editor class by the provided row and column arguments.

Parameters:
Name Type Description
row Number

Visual row index or cell meta object (see Core#getCellMeta).
column Number

Visual column index.
Returns: {function} The editor class.
Example
// Get cell editor class using `row` and `column` coordinates.
hot.getCellEditor(1, 1);
// Get cell editor class using cell meta object.
hot.getCellEditor(hot.getCellMeta(1, 1));
Source code

getCellMeta(row, column){Object}

Returns the cell properties object for the given row and column coordinates.

Parameters:
Name Type Description
row Number

Visual row index.
column Number

Visual column index.
Fires:
Returns: {Object} The cell properties object.
Source code

getCellMetaAtRow(row){Array}

Returns an array of cell meta objects for specyfied physical row index.

Parameters:
Name Type Description
row Number

Physical row index.
Returns: {Array}
Source code

getCellRenderer(row, column){function}

Returns the cell renderer function by given row and column arguments.

Parameters:
Name Type Description
row Number | Object

Visual row index or cell meta object (see Core#getCellMeta).
column Number

Visual column index.
Returns: {function} The renderer function.
Example
// Get cell renderer using `row` and `column` coordinates.
hot.getCellRenderer(1, 1);
// Get cell renderer using cell meta object.
hot.getCellRenderer(hot.getCellMeta(1, 1));
Source code

getCellsMeta(){Array}

Get all the cells meta settings at least once generated in the table (in order of cell initialization).

Returns: {Array} Returns an array of ColumnSettings object instances.
Source code

getCellValidator(row, column){function|RegExp|undefined}

Returns the cell validator by row and column.

Parameters:
Name Type Description
row Number | Object

Visual row index or cell meta object (see Core#getCellMeta).
column Number

Visual column index.
Returns: {function|RegExp|undefined} The validator function.
Example
// Get cell valiator using `row` and `column` coordinates.
hot.getCellValidator(1, 1);
// Get cell valiator using cell meta object.
hot.getCellValidator(hot.getCellMeta(1, 1));
Source code

getColHeader(column){Array|String|Number}

Returns an array of column headers (in string format, if they are enabled). If param column is given, it
returns the header at the given column.

Parameters:
Name Type Description
column Number optional

Visual column index.
Fires:
Returns: {Array|String|Number} The column header(s).
Source code

getColWidth(column){Number}

Returns the width of the requested column.

Parameters:
Name Type Description
column Number

Visual column index.
Fires:
Returns: {Number} Column width.
Source code

getCoords(element){CellCoords}

Returns the coordinates of the cell, provided as a HTML table cell element.

Parameters:
Name Type Description
element HTMLTableCellElement

The HTML Element representing the cell.
Returns: {CellCoords} Visual coordinates object.
Example
hot.getCoords(hot.getCell(1, 1));
// it returns CellCoords object instance with props row: 1 and col: 1.
Source code

getCopyableData(row, column){String}

Returns the data's copyable value at specified row and column index (see DataMap#getCopyable).

Parameters:
Name Type Description
row Number

Visual row index.
column Number

Visual column index.
Returns: {String}
Source code

getCopyableText(startRow, startCol, endRow, endCol){String}

Returns a string value of the selected range. Each column is separated by tab, each row is separated by a new
line character (see DataMap#getCopyableText).

Parameters:
Name Type Description
startRow Number

From visual row index.
startCol Number

From visual column index.
endRow Number

To visual row index.
endCol Number

To visual column index.
Returns: {String}
Source code

getData(row, column, row2, column2){Array.<Array>}

Returns the current data object (the same one that was passed by data configuration option or loadData method,
unless the modifyRow hook was used to trim some of the rows. If that's the case - use the Core#getSourceData method.).

Optionally you can provide cell range by defining row, column, row2, column2 to get only a fragment of table data.

Parameters:
Name Type Description
row Number optional

From visual row index.
column Number optional

From visual column index.
row2 Number optional

To visual row index.
column2 Number optional

To visual column index.
Returns: {Array.<Array>} Array with the data.
Example
// Get all data (in order how it is rendered in the table).
hot.getData();
// Get data fragment (from top-left 0, 0 to bottom-right 3, 3).
hot.getData(3, 3);
// Get data fragment (from top-left 2, 1 to bottom-right 3, 3).
hot.getData(2, 1, 3, 3);
Source code

getDataAtCell(row, column){*}

Returns the cell value at row, column.

Note: If data is reordered, sorted or trimmed, the currently visible order will be used.

Parameters:
Name Type Description
row Number

Visual row index.
column Number

Visual column index.
Returns: {*} Data at cell.
Source code

getDataAtCol(column){Array}

Returns array of column values from the data source.

Note: If columns were reordered or sorted, the currently visible order will be used.

Parameters:
Name Type Description
column Number

Visual column index.
Returns: {Array} Array of cell values.
Source code

getDataAtProp(prop){Array}

Given the object property name (e.g. 'first.name' or '0'), returns an array of column's values from the table data.
You can also provide a column index as the first argument.

Parameters:
Name Type Description
prop String | Number

Property name or physical column index.
Returns: {Array} Array of cell values.
Source code

getDataAtRow(row){Array}

Returns a single row of the data.

Note: If rows were reordered, sorted or trimmed, the currently visible order will be used.

Parameters:
Name Type Description
row Number

Visual row index.
Returns: {Array} Array of row's cell data.
Source code

getDataAtRowProp(row, prop){*}

Returns value at visual row and prop indexes (see DataMap#get).

Note: If data is reordered, sorted or trimmed, the currently visible order will be used.

Parameters:
Name Type Description
row Number

Visual row index.
prop String

Property name.
Returns: {*} Cell value.
Source code

getDataType(rowFrom, columnFrom, rowTo, columnTo){String}

Returns a data type defined in the Handsontable settings under the type key (Options#type).
If there are cells with different types in the selected range, it returns 'mixed'.

Note: If data is reordered, sorted or trimmed, the currently visible order will be used.

Parameters:
Name Type Description
rowFrom Number

From visual row index.
columnFrom Number

From visual column index.
rowTo Number

To visual row index.
columnTo Number

To visual column index.
Returns: {String} Cell type (e.q: 'mixed', 'text', 'numeric', 'autocomplete').
Source code

getInstance(){Handsontable}

Returns the Handsontable instance.

Returns: {Handsontable} The Handsontable instance.
Source code

getPlugin(pluginName){BasePlugin}

Returns plugin instance by provided its name.

Parameters:
Name Type Description
pluginName String

The plugin name.
Returns: {BasePlugin} The plugin instance.
Source code

getRowHeader(row){Array|String|Number}

Returns an array of row headers' values (if they are enabled). If param row was given, it returns the header of the given row as a string.

Parameters:
Name Type Description
row Number optional

Visual row index.
Fires:
Returns: {Array|String|Number} Array of header values / single header value.
Source code

getRowHeight(row){Number}

Returns the row height.

Parameters:
Name Type Description
row Number

Visual row index.
Fires:
Returns: {Number} The given row's height.
Source code

getSchema(){Object}

Returns schema provided by constructor settings. If it doesn't exist then it returns the schema based on the data
structure in the first row.

Returns: {Object} Schema object.
Source code

getSelected(){Array.<Array>|undefined}

Returns indexes of the currently selected cells as an array of arrays [[startRow, startCol, endRow, endCol],...].

Start row and start column are the coordinates of the active cell (where the selection was started).

The version 0.36.0 adds a non-consecutive selection feature. Since this version, the method returns an array of arrays.
Additionally to collect the coordinates of the currently selected area (as it was previously done by the method)
you need to use getSelectedLast method.

Returns: {Array.<Array>|undefined} An array of arrays of the selection's coordinates.
Source code

getSelectedLast(){Array|undefined}

Returns the last coordinates applied to the table as a an array [startRow, startCol, endRow, endCol].

Since: 0.36.0
Returns: {Array|undefined} An array of the selection's coordinates.
Source code

getSelectedRange(){Array.<CellRange>|undefined}

Returns the current selection as an array of CellRange objects.

The version 0.36.0 adds a non-consecutive selection feature. Since this version, the method returns an array of arrays.
Additionally to collect the coordinates of the currently selected area (as it was previously done by the method)
you need to use getSelectedRangeLast method.

Returns: {Array.<CellRange>|undefined} Selected range object or undefined if there is no selection.
Source code

getSelectedRangeLast(){CellRange|undefined}

Returns the last coordinates applied to the table as a CellRange object.

Since: 0.36.0
Returns: {CellRange|undefined} Selected range object or undefined` if there is no selection.
Source code

getSettings(){Object}

Returns the object settings.

Returns: {Object} Object containing the current table settings.
Source code

getSourceData(row, column, row2, column2){Array.<Array>|Array.<Object>}

Returns the source data object (the same that was passed by data configuration option or loadData method).
Optionally you can provide a cell range by using the row, column, row2, column2 arguments, to get only a
fragment of the table data.

Note: This method does not participate in data transformation. If the visual data of the table is reordered,
sorted or trimmed only physical indexes are correct.

Parameters:
Name Type Description
row Number optional

From physical row index.
column Number optional

From physical column index (or visual index, if data type is an array of objects).
row2 Number optional

To physical row index.
column2 Number optional

To physical column index (or visual index, if data type is an array of objects).
Returns: {Array.<Array>|Array.<Object>} The table data.
Source code

getSourceDataArray(row, column, row2, column2){Array}

Returns the source data object as an arrays of arrays format even when source data was provided in another format.
Optionally you can provide a cell range by using the row, column, row2, column2 arguments, to get only a
fragment of the table data.

Note: This method does not participate in data transformation. If the visual data of the table is reordered,
sorted or trimmed only physical indexes are correct.

Parameters:
Name Type Description
row Number optional

From physical row index.
column Number optional

From physical column index (or visual index, if data type is an array of objects).
row2 Number optional

To physical row index.
column2 Number optional

To physical column index (or visual index, if data type is an array of objects).
Returns: {Array} An array of arrays.
Source code

getSourceDataAtCell(row, column){*}

Returns a single value from the data source.

Parameters:
Name Type Description
row Number

Physical row index.
column Number

Visual column index.
Returns: {*} Cell data.
Source code

getSourceDataAtCol(column){Array}

Returns an array of column values from the data source.

Parameters:
Name Type Description
column Number

Visual column index.
Returns: {Array} Array of the column's cell values.
Source code

getSourceDataAtRow(row){Array|Object}

Returns a single row of the data (array or object, depending on what data format you use).

Note: This method does not participate in data transformation. If the visual data of the table is reordered,
sorted or trimmed only physical indexes are correct.

Parameters:
Name Type Description
row Number

Physical row index.
Returns: {Array|Object} Single row of data.
Source code

getTranslatedPhrase(dictionaryKey, extraArguments){String}

Get language phrase for specified dictionary key.

Parameters:
Name Type Description
dictionaryKey String

Constant which is dictionary key.
extraArguments *

Arguments which will be handled by formatters.
Since: 0.35.0
Returns: {String}
Source code

getValue(){*}

Get value from the selected cell.

Returns: {*} Value of selected cell.
Source code

hasColHeaders(){Boolean}

Returns information about if this table is configured to display column headers.

Returns: {Boolean} true if the instance has the column headers enabled, false otherwise.
Source code

hasHook(key){Boolean}

Check if for a specified hook name there are added listeners (only for this Handsontable instance). All available
hooks you will find Hooks.

Parameters:
Name Type Description
key String

Hook name
See:
Returns: {Boolean}
Example
const hasBeforeInitListeners = hot.hasHook('beforeInit');
Source code

hasRowHeaders(){Boolean}

Returns information about if this table is configured to display row headers.

Returns: {Boolean} true if the instance has the row headers enabled, false otherwise.
Source code

isColumnModificationAllowed(){Boolean}

Checks if the data format and config allows user to modify the column structure.

Returns: {Boolean}
Source code

isEmptyCol(column){Boolean}

Check if all cells in the the column declared by the column argument are empty.

Parameters:
Name Type Description
column Number

Column index.
Returns: {Boolean} true if the column at the given col is empty, false otherwise.
Source code

isEmptyRow(row){Boolean}

Check if all cells in the row declared by the row argument are empty.

Parameters:
Name Type Description
row Number

Visual row index.
Returns: {Boolean} true if the row at the given row is empty, false otherwise.
Source code

isListening(){Boolean}

Returns true if the current Handsontable instance is listening to keyboard input on document body.

Returns: {Boolean} true if the instance is listening, false otherwise.
Source code

listen(modifyDocumentFocus)

Listen to the keyboard input on document body. This allows Handsontable to capture keyboard events and respond
in the right way.

Parameters:
Name Type Default Description
modifyDocumentFocus Boolean true optional

If true, currently focused element will be blured (which returns focus
to the document.body). Otherwise the active element does not lose its focus.
Fires:
Source code

loadData(data)

Loads new data to Handsontable. Loading new data resets the cell meta.

Parameters:
Name Type Description
data Array

Array of arrays or array of objects containing data.
Fires:
Source code

populateFromArray(row, column, input, endRow, endCol, source, method, direction, deltas)

Populate cells at position with 2D input array (e.g. [[1, 2], [3, 4]]). Use endRow, endCol when you
want to cut input when a certain row is reached.

Optional method argument has the same effect as pasteMode option (see Options#pasteMode).

Parameters:
Name Type Default Description
row Number

Start visual row index.
column Number

Start visual column index.
input Array

2d array
endRow Number optional

End visual row index (use when you want to cut input when certain row is reached).
endCol Number optional

End visual column index (use when you want to cut input when certain column is reached).
source String populateFromArray optional

Used to identify this call in the resulting events (beforeChange, afterChange).
method String overwrite optional

Populate method, possible values: 'shift_down', 'shift_right', 'overwrite'.
direction String

Populate direction, possible values: 'left', 'right', 'up', 'down'.
deltas Array

The deltas array. A difference between values of adjacent cells.
Useful only when the type of handled cells is numeric.
Source code

propToCol(prop){Number}

Returns column index that corresponds with the given property (see DataMap#propToCol).

Parameters:
Name Type Description
prop String | Number

Property name or physical column index.
Returns: {Number} Visual column index.
Source code

removeCellMeta(row, column, key)

Remove a property defined by the key argument from the cell meta object for the provided row and column coordinates.

Parameters:
Name Type Description
row Number

Visual row index.
column Number

Visual column index.
key String

Property name.
Fires:
Source code

removeHook(key, callback)

Removes the hook listener previously registered with Core#addHook.

Parameters:
Name Type Description
key String

Hook name.
callback function

Reference to the function which has been registered using Core#addHook.
See:
Example
hot.removeHook('beforeInit', myCallback);
Source code

render()

Rerender the table. Calling this method starts the process of recalculating, redrawing and applying the changes
to the DOM. While rendering the table all cell renderers are recalled.

Calling this method manually is not recommended. Handsontable tries to render itself by choosing the most
optimal moments in its lifecycle.

Source code

rowOffset(){Number}

Returns an visual index of the first rendered row.
Returns -1 if no row is rendered.

Returns: {Number} Visual index of first rendered row.
Source code

runHooks(key, p1, p2, p3, p4, p5, p6){*}

Run the callbacks for the hook provided in the key argument using the parameters given in the other arguments.

Parameters:
Name Type Description
key String

Hook name.
p1 * optional

Argument passed to the callback.
p2 * optional

Argument passed to the callback.
p3 * optional

Argument passed to the callback.
p4 * optional

Argument passed to the callback.
p5 * optional

Argument passed to the callback.
p6 * optional

Argument passed to the callback.
See:
Returns: {*}
Example
// Run built-in hook
hot.runHooks('beforeInit');
// Run custom hook
hot.runHooks('customAction', 10, 'foo');
Source code

scrollViewportTo(row, column, snapToBottom, snapToRight){Boolean}

Scroll viewport to coordinates specified by the row and column arguments.

Parameters:
Name Type Default Description
row Number optional

Visual row index.
column Number optional

Visual column index.
snapToBottom Boolean false optional

If true, viewport is scrolled to show the cell on the bottom of the table.
snapToRight Boolean false optional

If true, viewport is scrolled to show the cell on the right side of the table.
Returns: {Boolean} true if scroll was successful, false otherwise.
Source code

selectAll()

Select the whole table. The previous selection will be overwritten.

Since: 0.38.2
Source code

selectCell(row, column, endRow, endColumn, scrollToCell, changeListener){Boolean}

Select cell specified by row and column values or a range of cells finishing at endRow, endCol. If the table
was configured to support data column properties that properties can be used to making a selection.

By default, viewport will be scrolled to the selection. After the selectCell method had finished, the instance
will be listening to keyboard input on the document.

Parameters:
Name Type Default Description
row Number

Visual row index.
column Number | String

Visual column index or column property.
endRow Number optional

Visual end row index (if selecting a range).
endColumn Number | String optional

Visual end column index or column property (if selecting a range).
scrollToCell Boolean true optional

If true, the viewport will be scrolled to the selection.
changeListener Boolean true optional

If false, Handsontable will not change keyboard events listener to himself.
Returns: {Boolean} true if selection was successful, false otherwise.
Example
// select a single cell
hot.selectCell(2, 4);
// select a single cell using column property
hot.selectCell(2, 'address');
// select a range of cells
hot.selectCell(2, 4, 3, 5);
// select a range of cells using column properties
hot.selectCell(2, 'address', 3, 'phone_number');
// select a range of cells without scrolling to them
hot.selectCell(2, 'address', 3, 'phone_number', false);
Source code

selectCells(coords, scrollToCell, changeListener){Boolean}

Make multiple, non-contiguous selection specified by row and column values or a range of cells
finishing at endRow, endColumn. The method supports two input formats which are the same as that
produces by getSelected and getSelectedRange methods.

By default, viewport will be scrolled to selection. After the selectCells method had finished, the instance
will be listening to keyboard input on the document.

Parameters:
Name Type Default Description
coords Array.<Array> | Array.<CellRange>

Visual coords passed as an array of array ([[rowStart, columnStart, rowEnd, columnEnd], ...])
the same format as getSelected method returns or as an CellRange objects
which is the same format what getSelectedRange method returns.
scrollToCell Boolean true optional

If true, the viewport will be scrolled to the selection.
changeListener Boolean true optional

If false, Handsontable will not change keyboard events listener to himself.
Since: 0.38.0
Returns: {Boolean} true if selection was successful, false otherwise.
Example
// Using an array of arrays.
hot.selectCells([[1, 1, 2, 2], [3, 3], [6, 2, 0, 2]]);
// Using an array of arrays with defined columns as props.
hot.selectCells([[1, 'id', 2, 'first_name'], [3, 'full_name'], [6, 'last_name', 0, 'first_name']]);
// Using an array of CellRange objects (produced by `.getSelectedRange()` method).
const selected = hot.getSelectedRange();

selected[0].from.row = 0;
selected[0].from.col = 0;

hot.selectCells(selected);
Source code

selectColumns(startColumn, endColumn){Boolean}

Select column specified by startColumn visual index, column property or a range of columns finishing at endColumn.

Parameters:
Name Type Default Description
startColumn Number

The visual column index from which the selection starts.
endColumn Number startColumn optional

The visual column index to which the selection finishes. If endColumn
is not defined the column defined by startColumn will be selected.
Since: 0.38.0
Returns: {Boolean} true if selection was successful, false otherwise.
Example
// Select column using visual index.
hot.selectColumns(1);
// Select column using column property.
hot.selectColumns('id');
// Select range of columns using visual indexes.
hot.selectColumns(1, 4);
// Select range of columns using column properties.
hot.selectColumns('id', 'last_name');
Source code

selectRows(startRow, endRow){Boolean}

Select row specified by startRow visual index or a range of rows finishing at endRow.

Parameters:
Name Type Default Description
startRow Number

The visual row index from which the selection starts.
endRow Number startRow optional

The visual row index to which the selection finishes. If endRow
is not defined the row defined by startRow will be selected.
Since: 0.38.0
Returns: {Boolean} true if selection was successful, false otherwise.
Example
// Select row using visual index.
hot.selectRows(1);
// Select range of rows using visual indexes.
hot.selectRows(1, 4);
Source code

setCellMeta(row, column, key, value)

Sets a property defined by the key property to the meta object of a cell corresponding to params row and column.

Parameters:
Name Type Description
row Number

Visual row index.
column Number

Visual column index.
key String

Property name.
value String

Property value.
Fires:
Source code

setCellMetaObject(row, column, prop)

Set cell meta data object defined by prop to the corresponding params row and column.

Parameters:
Name Type Description
row Number

Visual row index.
column Number

Visual column index.
prop Object

Meta object.
Source code

setDataAtCell(row, column, value, source)

Set new value to a cell. To change many cells at once (recommended way), pass an array of changes in format
[[row, col, value],...] as the first argument.

Parameters:
Name Type Description
row Number | Array

Visual row index or array of changes in format [[row, col, value],...].
column Number optional

Visual column index.
value String optional

New value.
source String optional

String that identifies how this change will be described in the changes array (useful in onAfterChange or onBeforeChange callback).
Source code

setDataAtRowProp(row, prop, value, source)

Set new value to a cell. To change many cells at once (recommended way), pass an array of changes in format
[[row, prop, value],...] as the first argument.

Parameters:
Name Type Description
row Number | Array

Visual row index or array of changes in format [[row, prop, value], ...].
prop String

Property name or the source string (e.g. 'first.name' or '0').
value String

Value to be set.
source String optional

String that identifies how this change will be described in changes array (useful in onChange callback).
Source code

spliceCol(column, index, amount, elements)

Adds/removes data from the column. This method works the same as Array.splice for arrays (see DataMap#spliceCol).

Parameters:
Name Type Description
column Number

Index of the column in which do you want to do splice.
index Number

Index at which to start changing the array. If negative, will begin that many elements from the end.
amount Number

An integer indicating the number of old array elements to remove. If amount is 0, no elements are removed.
elements Number optional repeatable

The elements to add to the array. If you don't specify any elements, spliceCol simply removes elements from the array.
Source code

spliceRow(row, index, amount, elements)

Adds/removes data from the row. This method works the same as Array.splice for arrays (see DataMap#spliceRow).

Parameters:
Name Type Description
row Number

Index of column in which do you want to do splice.
index Number

Index at which to start changing the array. If negative, will begin that many elements from the end.
amount Number

An integer indicating the number of old array elements to remove. If amount is 0, no elements are removed.
elements Number optional repeatable

The elements to add to the array. If you don't specify any elements, spliceCol simply removes elements from the array.
Source code

toHTML(){String}

Converts instance into outerHTML of HTMLTableElement.

Since: 7.1.0
Returns: {String}
Source code

toPhysicalColumn(column){Number}

Translate visual column index into physical.

This method is useful when you want to retrieve physical column index based on a visual index which can be
reordered, moved or trimmed.

Parameters:
Name Type Description
column Number

Visual column index.
Returns: {Number} Returns physical column index.
Source code

toPhysicalRow(row){Number}

Translate visual row index into physical.

This method is useful when you want to retrieve physical row index based on a visual index which can be
reordered, moved or trimmed.

Parameters:
Name Type Description
row Number

Visual row index.
Returns: {Number} Returns physical row index.
Source code

toTableElement(){HTMLTableElement}

Converts instance into HTMLTableElement.

Since: 7.1.0
Returns: {HTMLTableElement}
Source code

toVisualColumn(column){Number}

Translate physical column index into visual.

This method is useful when you want to retrieve visual column index which can be reordered, moved or trimmed
based on a physical index

Parameters:
Name Type Description
column Number

Physical column index.
Returns: {Number} Returns visual column index.
Source code

toVisualRow(row){Number}

Translate physical row index into visual.

This method is useful when you want to retrieve visual row index which can be reordered, moved or trimmed
based on a physical index

Parameters:
Name Type Description
row Number

Physical row index.
Returns: {Number} Returns visual row index.
Source code

unlisten()

Stop listening to keyboard input on the document body. Calling this method makes the Handsontable inactive for
any keyboard events.

Source code

updateSettings(settings, init)

Use it if you need to change configuration after initialization. The settings argument is an object containing the new
settings, declared the same way as in the initial settings object.

Note, that although the updateSettings method doesn't overwrite the previously declared settings, it might reset
the settings made post-initialization. (for example - ignore changes made using the columnResize feature).

Parameters:
Name Type Default Description
settings Object

New settings object (see Options).
init Boolean false optional

Internally used for in initialization mode.
Fires:
Example
hot.updateSettings({
   contextMenu: true,
   colHeaders: true,
   fixedRowsTop: 2
});
Source code

validateCells(callback)

Validates all cells using their validator functions and calls callback when finished.

If one of the cells is invalid, the callback will be fired with 'valid' arguments as false - otherwise it
would equal true.

Parameters:
Name Type Description
callback function optional

The callback function.
Example
hot.validateCells((valid) => {
  if (valid) {
    // ... code for validated cells
  }
})
Source code

validateColumns(columns, callback)

Validates columns using their validator functions and calls callback when finished.

If one of the cells is invalid, the callback will be fired with 'valid' arguments as false - otherwise it
would equal true.

Parameters:
Name Type Description
columns Array optional

Array of validation target visual columns indexes.
callback function optional

The callback function.
Example
hot.validateColumns([3, 4, 5], (valid) => {
  if (valid) {
    // ... code for validated columns
  }
})
Source code

validateRows(rows, callback)

Validates rows using their validator functions and calls callback when finished.

If one of the cells is invalid, the callback will be fired with 'valid' arguments as false - otherwise it
would equal true.

Parameters:
Name Type Description
rows Array optional

Array of validation target visual row indexes.
callback function optional

The callback function.
Example
hot.validateRows([3, 4, 5], (valid) => {
  if (valid) {
    // ... code for validated rows
  }
})
Class: Core