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
-
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);
-
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);
-
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]]);
-
clear()
-
Clears the data from the table (the table settings remain intact).
-
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.
-
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.
-
countCols(){Number}
-
Returns the total number of visible columns in the table.
Returns: {Number} Total number of columns.
-
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.
-
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.
-
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.
-
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.
-
countRows(){Number}
-
Returns the total number of visual rows in the table.
Returns: {Number} Total number of rows.
-
countSourceCols(){Number}
-
Returns the total number of columns in the data source.
Returns: {Number} Total number of columns.
-
countSourceRows(){Number}
-
Returns the total number of rows in the data source.
Returns: {Number} Total number of rows.
-
countVisibleCols(){Number}
-
Returns the number of visible columns. Returns -1 if table is not visible
Returns: {Number} Number of visible columns or -1.
-
countVisibleRows(){Number}
-
Returns the number of visible rows (rendered rows that fully fit inside viewport).
Returns: {Number} Number of visible rows or -1.
-
deselectCell()
-
Deselects the current cell selection on the table.
-
destroy()
-
Removes the table from the DOM and destroys the instance of the Handsontable.
Fires:
-
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. -
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
-
getActiveEditor(){BaseEditor}
-
Returns the active editor class instance.
Returns: {BaseEditor} The active editor instance.
-
getCell(row, column, topmost){HTMLTableCellElement|null}
-
Returns a TD element for the given
row
andcolumn
arguments, if it is rendered on screen.
Returnsnull
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 thetop
overlay.Returns: {HTMLTableCellElement|null} The cell's TD element.
-
getCellEditor(row, column){function}
-
Returns the cell editor class by the provided
row
andcolumn
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));
-
getCellMeta(row, column){Object}
-
Returns the cell properties object for the given
row
andcolumn
coordinates.Parameters:
Name Type Description row
Number Visual row index.
column
Number Visual column index.
Fires:
Returns: {Object} The cell properties object.
-
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}
-
getCellRenderer(row, column){function}
-
Returns the cell renderer function by given
row
andcolumn
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));
-
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.
-
getCellValidator(row, column){function|RegExp|undefined}
-
Returns the cell validator by
row
andcolumn
.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));
-
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).
-
getColWidth(column){Number}
-
Returns the width of the requested column.
Parameters:
Name Type Description column
Number Visual column index.
Fires:
Returns: {Number} Column width.
-
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.
-
getCopyableData(row, column){String}
-
Returns the data's copyable value at specified
row
andcolumn
index (seeDataMap#getCopyable
).Parameters:
Name Type Description row
Number Visual row index.
column
Number Visual column index.
Returns: {String}
-
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 (seeDataMap#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}
-
getData(row, column, row2, column2){Array.<Array>}
-
Returns the current data object (the same one that was passed by
data
configuration option orloadData
method,
unless themodifyRow
hook was used to trim some of the rows. If that's the case - use theCore#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);
-
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.
-
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.
-
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.
-
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.
-
getDataAtRowProp(row, prop){*}
-
Returns value at visual
row
andprop
indexes (seeDataMap#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.
-
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'
). -
getInstance(){Handsontable}
-
Returns the Handsontable instance.
Returns: {Handsontable} The Handsontable instance.
-
getPlugin(pluginName){BasePlugin}
-
Returns plugin instance by provided its name.
Parameters:
Name Type Description pluginName
String The plugin name.
Returns: {BasePlugin} The plugin instance.
-
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.
-
getRowHeight(row){Number}
-
Returns the row height.
Parameters:
Name Type Description row
Number Visual row index.
Fires:
Returns: {Number} The given row's height.
-
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.
-
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 usegetSelectedLast
method.Returns: {Array.<Array>|undefined} An array of arrays of the selection's coordinates.
-
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.
-
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 usegetSelectedRangeLast
method.Returns: {Array.<CellRange>|undefined} Selected range object or undefined if there is no selection.
-
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.
-
getSettings(){Object}
-
Returns the object settings.
Returns: {Object} Object containing the current table settings.
-
getSourceData(row, column, row2, column2){Array.<Array>|Array.<Object>}
-
Returns the source data object (the same that was passed by
data
configuration option orloadData
method).
Optionally you can provide a cell range by using therow
,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.
-
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 therow
,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.
-
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.
-
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.
-
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.
-
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}
-
getValue(){*}
-
Get value from the selected cell.
Returns: {*} Value of selected cell.
-
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. -
hasHook(key){Boolean}
-
Check if for a specified hook name there are added listeners (only for this Handsontable instance). All available
hooks you will findHooks
.Parameters:
Name Type Description key
String Hook name
- See:
Returns: {Boolean}
Example
const hasBeforeInitListeners = hot.hasHook('beforeInit');
-
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. -
isColumnModificationAllowed(){Boolean}
-
Checks if the data format and config allows user to modify the column structure.
Returns: {Boolean}
-
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 givencol
is empty,false
otherwise. -
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 givenrow
is empty,false
otherwise. -
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. -
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:
-
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:
-
populateFromArray(row, column, input, endRow, endCol, source, method, direction, deltas)
-
Populate cells at position with 2D input array (e.g.
[[1, 2], [3, 4]]
). UseendRow
,endCol
when you
want to cut input when a certain row is reached.Optional
method
argument has the same effect as pasteMode option (seeOptions#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 isnumeric
. -
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.
-
removeCellMeta(row, column, key)
-
Remove a property defined by the
key
argument from the cell meta object for the providedrow
andcolumn
coordinates.Parameters:
Name Type Description row
Number Visual row index.
column
Number Visual column index.
key
String Property name.
Fires:
-
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);
-
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. -
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.
-
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');
-
scrollViewportTo(row, column, snapToBottom, snapToRight){Boolean}
-
Scroll viewport to coordinates specified by the
row
andcolumn
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. -
selectAll()
-
Select the whole table. The previous selection will be overwritten.
- Since: 0.38.2
-
selectCell(row, column, endRow, endColumn, scrollToCell, changeListener){Boolean}
-
Select cell specified by
row
andcolumn
values or a range of cells finishing atendRow
,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);
-
selectCells(coords, scrollToCell, changeListener){Boolean}
-
Make multiple, non-contiguous selection specified by
row
andcolumn
values or a range of cells
finishing atendRow
,endColumn
. The method supports two input formats which are the same as that
produces bygetSelected
andgetSelectedRange
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 asgetSelected
method returns or as an CellRange objects
which is the same format whatgetSelectedRange
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);
-
selectColumns(startColumn, endColumn){Boolean}
-
Select column specified by
startColumn
visual index, column property or a range of columns finishing atendColumn
.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 bystartColumn
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');
-
selectRows(startRow, endRow){Boolean}
-
Select row specified by
startRow
visual index or a range of rows finishing atendRow
.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 bystartRow
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);
-
setCellMeta(row, column, key, value)
-
Sets a property defined by the
key
property to the meta object of a cell corresponding to paramsrow
andcolumn
.Parameters:
Name Type Description row
Number Visual row index.
column
Number Visual column index.
key
String Property name.
value
String Property value.
Fires:
-
setCellMetaObject(row, column, prop)
-
Set cell meta data object defined by
prop
to the corresponding paramsrow
andcolumn
.Parameters:
Name Type Description row
Number Visual row index.
column
Number Visual column index.
prop
Object Meta object.
-
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).
-
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).
-
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.
-
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.
-
toHTML(){String}
-
Converts instance into outerHTML of HTMLTableElement.
- Since: 7.1.0
Returns: {String}
-
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.
-
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.
-
toTableElement(){HTMLTableElement}
-
Converts instance into HTMLTableElement.
- Since: 7.1.0
Returns: {HTMLTableElement}
-
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 indexParameters:
Name Type Description column
Number Physical column index.
Returns: {Number} Returns visual column index.
-
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 indexParameters:
Name Type Description row
Number Physical row index.
Returns: {Number} Returns visual row index.
-
unlisten()
-
Stop listening to keyboard input on the document body. Calling this method makes the Handsontable inactive for
any keyboard events. -
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 });
-
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 asfalse
- otherwise it
would equaltrue
.Parameters:
Name Type Description callback
function optional The callback function.
Example
hot.validateCells((valid) => { if (valid) { // ... code for validated cells } })
-
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 asfalse
- otherwise it
would equaltrue
.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 } })
-
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 asfalse
- otherwise it
would equaltrue
.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 } })