handsontable
Version:
Handsontable is a JavaScript Spreadsheet Component available for React, Angular and Vue.
1,735 lines (1,643 loc) • 88.3 kB
JavaScript
"use strict";
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.symbol.iterator.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
exports.__esModule = true;
exports.default = void 0;
var _mixed = require("../../helpers/mixed");
var _object = require("../../helpers/object");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
/* eslint-disable jsdoc/require-description-complete-sentence */
/**
* @alias Options
* @class Options
* @description
*
* ## Constructor options.
*
* Constructor options are applied using an object literal passed as a second argument to the Handsontable constructor.
*
* ```js
* const container = document.getElementById('example');
* const hot = new Handsontable(container, {
* data: myArray,
* width: 400,
* height: 300
* });
* ```
*
* ---
* ## Cascading configuration.
*
* Handsontable is using *Cascading Configuration*, which is a fast way to provide configuration options
* for the entire table, including its columns and particular cells.
*
* Consider the following example:
* ```js
* const container = document.getElementById('example');
* const hot = new Handsontable(container, {
* readOnly: true,
* columns: [
* {readOnly: false},
* {},
* {},
* ],
* cells: function(row, col, prop) {
* var cellProperties = {};
*
* if (row === 0 && col === 0) {
* cellProperties.readOnly = true;
* }.
*
* return cellProperties;
* }
* });
* ```
*
* The above notation will result in all TDs being *read only*, except for first column TDs which will be *editable*, except for the TD in top left corner which will still be *read only*.
*
* ### The Cascading Configuration model
*
* ##### 1. Constructor
*
* Configuration options that are provided using first-level `handsontable(container, {option: "value"})` and `updateSettings` method.
*
* ##### 2. Columns
*
* Configuration options that are provided using second-level object `handsontable(container, {columns: {option: "value"}]})`
*
* ##### 3. Cells
*
* Configuration options that are provided using third-level function `handsontable(container, {cells: function: (row, col, prop){ }})`
*
* ---
* ## Architecture performance
*
* The Cascading Configuration model is based on prototypical inheritance. It is much faster and memory efficient
* compared to the previous model that used jQuery extend. See: [http://jsperf.com/extending-settings](http://jsperf.com/extending-settings).
*
* ---
* __Important notice:__ In order for the data separation to work properly, make sure that each instance of Handsontable has a unique `id`.
*/
/* eslint-enable jsdoc/require-description-complete-sentence */
var _default = function _default() {
return {
/**
* License key for commercial version of Handsontable.
*
* @memberof Options#
* @type {string}
* @default undefined
* @example
* ```js
* licenseKey: '00000-00000-00000-00000-00000',
* // or
* licenseKey: 'non-commercial-and-evaluation',
* ```
*/
licenseKey: void 0,
/**
* @description
* Initial data source that will be bound to the data grid __by reference__ (editing data grid alters the data source).
* Can be declared as an array of arrays or an array of objects.
*
* See [Understanding binding as reference](https://docs.handsontable.com/tutorial-data-binding.html#page-reference).
*
* @memberof Options#
* @type {Array[]|object[]}
* @default undefined
* @example
* ```js
* // as an array of arrays
* data: [
* ['A', 'B', 'C'],
* ['D', 'E', 'F'],
* ['G', 'H', 'J']
* ]
*
* // as an array of objects
* data: [
* {id: 1, name: 'Ted Right'},
* {id: 2, name: 'Frank Honest'},
* {id: 3, name: 'Joan Well'},
* {id: 4, name: 'Gail Polite'},
* {id: 5, name: 'Michael Fair'},
* ]
* ```
*/
data: void 0,
/**
* @description
* Defines the structure of a new row when data source is an array of objects.
*
* See [data-schema](https://docs.handsontable.com/tutorial-data-sources.html#page-data-schema) for more options.
*
* @memberof Options#
* @type {object}
* @default undefined
*
* @example
* ```
* // with data schema we can start with an empty table
* data: null,
* dataSchema: {id: null, name: {first: null, last: null}, address: null},
* colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
* columns: [
* {data: 'id'},
* {data: 'name.first'},
* {data: 'name.last'},
* {data: 'address'}
* ],
* startRows: 5,
* minSpareRows: 1
* ```
*/
dataSchema: void 0,
/**
* Width of the grid. Can be a value or a function that returns a value.
*
* @memberof Options#
* @type {number|string|Function}
* @default undefined
*
* @example
* ```
* // as a number
* width: 500,
*
* // as a string
* width: '75vw',
*
* // as a function
* width: function() {
* return 500;
* },
* ```
*/
width: void 0,
/**
* Height of the grid. Can be a number or a function that returns a number.
*
* @memberof Options#
* @type {number|string|Function}
* @default undefined
*
* @example
* ```js
* // as a number
* height: 500,
*
* // as a string
* height: '75vh',
*
* // as a function
* height: function() {
* return 500;
* },
* ```
*/
height: void 0,
/**
* @description
* Initial number of rows.
*
* __Note:__ This option only has effect in Handsontable constructor and only if `data` option is not provided.
*
* @memberof Options#
* @type {number}
* @default 5
*
* @example
* ```js
* // start with 15 empty rows
* startRows: 15,
* ```
*/
startRows: 5,
/**
* @description
* Initial number of columns.
*
* __Note:__ This option only has effect in Handsontable constructor and only if `data` option is not provided.
*
* @memberof Options#
* @type {number}
* @default 5
*
* @example
* ```js
* // start with 15 empty columns
* startCols: 15,
* ```
*/
startCols: 5,
/**
* Setting `true` or `false` will enable or disable the default row headers (1, 2, 3).
* You can also define an array `['One', 'Two', 'Three', ...]` or a function to define the headers.
* If a function is set the index of the row is passed as a parameter.
*
* @memberof Options#
* @type {boolean|string[]|Function}
* @default undefined
*
* @example
* ```js
* // as a boolean
* rowHeaders: true,
*
* // as an array
* rowHeaders: ['1', '2', '3'],
*
* // as a function
* rowHeaders: function(index) {
* return index + ': AB';
* },
* ```
*/
rowHeaders: void 0,
/**
* Setting `true` or `false` will enable or disable the default column headers (A, B, C).
* You can also define an array `['One', 'Two', 'Three', ...]` or a function to define the headers.
* If a function is set, then the index of the column is passed as a parameter.
*
* @memberof Options#
* @type {boolean|string[]|Function}
* @default null
*
* @example
* ```js
* // as a boolean
* colHeaders: true,
*
* // as an array
* colHeaders: ['A', 'B', 'C'],
*
* // as a function
* colHeaders: function(index) {
* return index + ': AB';
* },
* ```
*/
colHeaders: null,
/**
* Defines column widths in pixels. Accepts number, string (that will be converted to a number), array of numbers
* (if you want to define column width separately for each column) or a function (if you want to set column width
* dynamically on each render).
*
* The default width for columns in the rendering process equals 50px.
*
* An `undefined` value is for detection in {@link Hooks#modifyColWidth} hook if plugin or setting changed the default size.
*
* Note: This option will forcely disable {@link AutoColumnSize} plugin.
*
* @memberof Options#
* @type {number|number[]|string|string[]|Array<undefined>|Function}
* @default undefined
*
* @example
* ```js
* // as a number, for each column.
* colWidths: 100,
*
* // as a string, for each column.
* colWidths: '100px',
*
* // as an array, based on visual indexes. Unspecified columns have a default width.
* colWidths: [100, 120, undefined, 90],
*
* // as a function, based on visual indexes.
* colWidths: function(index) {
* return index * 10;
* },
* ```
*/
colWidths: void 0,
/**
* Defines row heights in pixels. Accepts numbers, strings (that will be converted into a number), array of numbers
* (if you want to define row height separately for each row) or a function (if you want to set row height dynamically
* on each render).
*
* If the {@link ManualRowResize} or {@link AutoRowSize} plugins are enabled, this is also the minimum height that can
* be set via either of those two plugins.
*
* The default height for rows in the rendering process equals 23px.
* Height should be equal or greater than 23px. Table is rendered incorrectly if height is less than 23px.
*
* An `undefined` value is for detection in {@link Hooks#modifyRowHeight} hook if plugin or setting changed the default size.
*
* @memberof Options#
* @type {number|number[]|string|string[]|Array<undefined>|Function}
* @default undefined
*
* @example
* ```js
* // as a number, the same for all rows
* rowHeights: 100,
*
* // as a string, the same for all row
* rowHeights: '100px',
*
* // as an array, based on visual indexes. The rest of the rows have a default height
* rowHeights: [100, 120, 90],
*
* // as a function, based on visual indexes
* rowHeights: function(index) {
* return index * 10;
* },
* ```
*/
rowHeights: void 0,
/**
* @description
* Defines the cell properties and data binding for certain columns.
*
* __Note:__ Using this option sets a fixed number of columns (options `startCols`, `minCols`, `maxCols` will be ignored).
*
* See [documentation -> datasources.html](https://docs.handsontable.com/tutorial-data-sources.html#page-nested) for examples.
*
* @memberof Options#
* @type {object[]|Function}
* @default undefined
*
* @example
* ```js
* // as an array of objects
* // order of the objects in array is representation of physical indexes.
* columns: [
* {
* // column options for the first column
* type: 'numeric',
* numericFormat: {
* pattern: '0,0.00 $'
* }
* },
* {
* // column options for the second column
* type: 'text',
* readOnly: true
* }
* ],
*
* // or as a function, based on physical indexes
* columns: function(index) {
* return {
* type: index > 0 ? 'numeric' : 'text',
* readOnly: index < 1
* }
* }
* ```
*/
columns: void 0,
/**
* @description
* Defines the cell properties for given `row`, `col`, `prop` coordinates. Any constructor or column option may be
* overwritten for a particular cell (row/column combination) using the `cells` property in the Handsontable constructor.
*
* __Note:__ Parameters `row` and `col` always represent __physical indexes__. Example below show how to execute
* operations based on the __visual__ representation of Handsontable.
*
* Possible values of `prop`:
* - property name for column's data source object, when dataset is an [array of objects](https://handsontable.com/docs/tutorial-data-sources.html#page-object)
* - the same number as `col`, when dataset is an [array of arrays](https://handsontable.com/docs/tutorial-data-sources.html#page-array).
*
* @memberof Options#
* @type {Function}
* @default undefined
*
* @example
* ```js
* cells: function(row, column, prop) {
* const cellProperties = { readOnly: false };
* const visualRowIndex = this.instance.toVisualRow(row);
* const visualColIndex = this.instance.toVisualColumn(column);
*
* if (visualRowIndex === 0 && visualColIndex === 0) {
* cellProperties.readOnly = true;
* }
*
* return cellProperties;
* },
* ```
*/
cells: void 0,
/**
* Any constructor or column option may be overwritten for a particular cell (row/column combination), using `cell`
* array passed to the Handsontable constructor.
*
* @memberof Options#
* @type {Array[]}
* @default []
*
* @example
* ```js
* // make cell with coordinates (0, 0) read only
* cell: [
* {
* row: 0,
* col: 0,
* readOnly: true
* }
* ],
* ```
*/
cell: [],
/**
* @description
* If `true`, enables the {@link Comments} plugin, which enables an option to apply cell comments through the context menu
* (configurable with context menu keys `commentsAddEdit`, `commentsRemove`).
*
* To initialize Handsontable with predefined comments, provide cell coordinates and comment text values in a form of
* an array.
*
* See [Comments](https://docs.handsontable.com/demo-comments_.html) demo for examples.
*
* @memberof Options#
* @type {boolean|object[]}
* @default false
*
* @example
* ```js
* // enable comments plugin
* comments: true,
*
* // or an object with extra predefined plugin config:
*
* comments: {
* displayDelay: 1000
* }
*
* // or
* // enable comments plugin and add predefined comments
* const hot = new Handsontable(document.getElementById('example'), {
* data: getData(),
* comments: true,
* cell: [
* { row: 1, col: 1, comment: { value: 'Foo' } },
* { row: 2, col: 2, comment: { value: 'Bar' } }
* ]
* });
* ```
*/
comments: false,
/**
* @description
* If `true`, enables the {@link CustomBorders} plugin, which enables an option to apply custom borders through the context
* menu (configurable with context menu key `borders`). To initialize Handsontable with predefined custom borders,
* provide cell coordinates and border styles in a form of an array.
*
* See [Custom Borders](https://docs.handsontable.com/demo-custom-borders.html) demo for examples.
*
* @memberof Options#
* @type {boolean|object[]}
* @default false
*
* @example
* ```js
* // enable custom borders
* customBorders: true,
*
* // or
* // enable custom borders and start with predefined left border
* customBorders: [
* {
* range: {
* from: {
* row: 1,
* col: 1
* },
* to: {
* row: 3,
* col: 4
* }
* },
* left: {
* width: 2,
* color: 'red'
* },
* right: {},
* top: {},
* bottom: {}
* }
* ],
*
* // or
* customBorders: [
* {
* row: 2,
* col: 2,
* left: {
* width: 2,
* color: 'red'
* },
* right: {
* width: 1,
* color: 'green'
* },
* top: '',
* bottom: ''
* }
* ],
* ```
*/
customBorders: false,
/**
* Minimum number of rows. At least that number of rows will be created during initialization.
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // set minimum table size to 10 rows
* minRows: 10,
* ```
*/
minRows: 0,
/**
* Minimum number of columns. At least that number of columns will be created during initialization.
* Works only with an array data source. When data source in an object, you can only have as many columns
* as defined in the first data row, data schema, or the `columns` setting.
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // set minimum table size to 10 columns
* minCols: 10,
* ```
*/
minCols: 0,
/**
* Maximum number of rows. If set to a value lower than the initial row count, the data will be trimmed to the provided
* value as the number of rows.
*
* @memberof Options#
* @type {number}
* @default Infinity
*
* @example
* ```js
* // limit table size to maximum 300 rows
* maxRows: 300,
* ```
*/
maxRows: Infinity,
/**
* Maximum number of cols. If set to a value lower than the initial col count, the data will be trimmed to the provided
* value as the number of cols.
*
* @memberof Options#
* @type {number}
* @default Infinity
*
* @example
* ```js
* // limit table size to maximum 300 columns
* maxCols: 300,
* ```
*/
maxCols: Infinity,
/**
* When set to 1 (or more), Handsontable will add a new row at the end of grid if there are no more empty rows.
* (unless the number of rows exceeds the one set in the `maxRows` property).
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // always add 3 empty rows at the table end
* minSpareRows: 3,
* ```
*/
minSpareRows: 0,
/**
* When set to 1 (or more), Handsontable will add a new column at the end of grid if there are no more empty columns.
* (unless the number of rows exceeds the one set in the `maxCols` property).
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // always add 3 empty columns at the table end
* minSpareCols: 3,
* ```
*/
minSpareCols: 0,
/**
* If set to `false`, there won't be an option to insert new rows in the Context Menu.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // hide "Insert row above" and "Insert row below" options from the Context Menu
* allowInsertRow: false,
* ```
*/
allowInsertRow: true,
/**
* If set to `false`, there won't be an option to insert new columns in the Context Menu.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // hide "Insert column left" and "Insert column right" options from the Context Menu
* allowInsertColumn: false,
* ```
*/
allowInsertColumn: true,
/**
* If set to `false`, there won't be an option to remove rows in the Context Menu.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // hide "Remove row" option from the Context Menu
* allowRemoveRow: false,
* ```
*/
allowRemoveRow: true,
/**
* If set to `false`, there won't be an option to remove columns in the Context Menu.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // hide "Remove column" option from the Context Menu
* allowRemoveColumn: false,
* ```
*/
allowRemoveColumn: true,
/**
* @description
* Defines how the table selection reacts. The selection support three different behaviors defined as:
* * `'single'` Only a single cell can be selected.
* * `'range'` Multiple cells within a single range can be selected.
* * `'multiple'` Multiple ranges of cells can be selected.
*
* To see how to interact with selection by getting selected data or change styles of the selected cells go to
* [https://docs.handsontable.com/demo-selecting-ranges.html](https://docs.handsontable.com/demo-selecting-ranges.html).
*
* @memberof Options#
* @type {string}
* @default 'multiple'
*
* @example
* ```js
* // only one cell can be selected at a time
* selectionMode: 'single',
* ```
*/
selectionMode: 'multiple',
/**
* Enables the fill handle (drag-down and copy-down) functionality, which shows a small rectangle in bottom
* right corner of the selected area, that let's you expand values to the adjacent cells.
*
* Setting to `true` enables the fillHandle plugin. Possible values: `true` (to enable in all directions),
* `'vertical'` or `'horizontal'` (to enable in one direction), `false` (to disable completely), an object with
* options: `autoInsertRow`, `direction`.
*
* If `autoInsertRow` option is `true`, fill-handler will create new rows till it reaches the last row.
* It is enabled by default.
*
* @memberof Options#
* @type {boolean|string|object}
* @default true
*
* @example
* ```js
* // enable plugin in all directions and with autoInsertRow as true
* fillHandle: true,
*
* // or
* // enable plugin in vertical direction and with autoInsertRow as true
* fillHandle: 'vertical',
*
* // or
* fillHandle: {
* // enable plugin in both directions and with autoInsertRow as false
* autoInsertRow: false,
* },
*
* // or
* fillHandle: {
* // enable plugin in vertical direction and with autoInsertRow as false
* autoInsertRow: false,
* direction: 'vertical'
* },
* ```
*/
fillHandle: {
autoInsertRow: false
},
/**
* Allows to specify the number of fixed (or *frozen*) rows at the top of the table.
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // freeze the first 3 rows of the table.
* fixedRowsTop: 3,
* ```
*/
fixedRowsTop: 0,
/**
* Allows to specify the number of fixed (or *frozen*) rows at the bottom of the table.
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // freeze the last 3 rows of the table.
* fixedRowsBottom: 3,
* ```
*/
fixedRowsBottom: 0,
/**
* Allows to specify the number of fixed (or *frozen*) columns on the left of the table.
*
* @memberof Options#
* @type {number}
* @default 0
*
* @example
* ```js
* // freeze first 3 columns of the table.
* fixedColumnsLeft: 3,
* ```
*/
fixedColumnsLeft: 0,
/**
* If `true`, mouse click outside the grid will deselect the current selection. Can be a function that takes the
* click event target and returns a boolean.
*
* @memberof Options#
* @type {boolean|Function}
* @default true
*
* @example
* ```js
* // don't clear current selection when mouse click was outside the grid
* outsideClickDeselects: false,
*
* // or
* outsideClickDeselects: function(event) {
* return false;
* }
* ```
*/
outsideClickDeselects: true,
/**
* If `true`, <kbd>ENTER</kbd> begins editing mode (like in Google Docs). If `false`, <kbd>ENTER</kbd> moves to next
* row (like Excel) and adds a new row if necessary. <kbd>TAB</kbd> adds new column if necessary.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* enterBeginsEditing: false,
* ```
*/
enterBeginsEditing: true,
/**
* Defines the cursor movement after <kbd>ENTER</kbd> was pressed (<kbd>SHIFT</kbd> + <kbd>ENTER</kbd> uses a negative vector). Can
* be an object or a function that returns an object. The event argument passed to the function is a DOM Event object
* received after the <kbd>ENTER</kbd> key has been pressed. This event object can be used to check whether user pressed
* <kbd>ENTER</kbd> or <kbd>SHIFT</kbd> + <kbd>ENTER</kbd>.
*
* @memberof Options#
* @type {object|Function}
* @default {col: 0, row: 1}
*
* @example
* ```js
* // move selection diagonal by 1 cell in x and y axis
* enterMoves: {col: 1, row: 1},
* // or as a function
* enterMoves: function(event) {
* return {col: 1, row: 1};
* },
* ```
*/
enterMoves: {
col: 0,
row: 1
},
/**
* Defines the cursor movement after <kbd>TAB</kbd> is pressed (<kbd>SHIFT</kbd> + <kbd>TAB</kbd> uses a negative vector). Can
* be an object or a function that returns an object. The event argument passed to the function is a DOM Event object
* received after the <kbd>TAB</kbd> key has been pressed. This event object can be used to check whether user pressed
* <kbd>TAB</kbd> or <kbd>SHIFT</kbd> + <kbd>TAB</kbd>.
*
* @memberof Options#
* @type {object|Function}
* @default {row: 0, col: 1}
*
* @example
* ```js
* // move selection 2 cells away after TAB pressed.
* tabMoves: {row: 2, col: 2},
* // or as a function
* tabMoves: function(event) {
* return {row: 2, col: 2};
* },
* ```
*/
tabMoves: {
row: 0,
col: 1
},
/**
* If `true`, pressing <kbd>TAB</kbd> or right arrow in the last column will move to first column in next row.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // stop TAB key navigation on the last column
* autoWrapRow: false,
* ```
*/
autoWrapRow: true,
/**
* If `true`, pressing <kbd>ENTER</kbd> or down arrow in the last row will move to the first row in the next column.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // stop ENTER key navigation on the last row
* autoWrapCol: false,
* ```
*/
autoWrapCol: true,
/**
* @description
* Turns on saving the state of column sorting, column positions and column sizes in local storage.
*
* You can save any sort of data in local storage to preserve table state between page reloads. In order to enable
* data storage mechanism, `persistentState` option must be set to `true` (you can set it either during Handsontable
* initialization or using the `updateSettings` method). When `persistentState` is enabled it exposes 3 hooks:
*
* __persistentStateSave__ (key: String, value: Mixed).
*
* * Saves value under given key in browser local storage.
*
* __persistentStateLoad__ (key: String, valuePlaceholder: Object).
*
* * Loads `value`, saved under given key, form browser local storage. The loaded `value` will be saved in
* `valuePlaceholder.value` (this is due to specific behaviour of `Hooks.run()` method). If no value have
* been saved under key `valuePlaceholder.value` will be `undefined`.
*
* __persistentStateReset__ (key: String).
*
* * Clears the value saved under `key`. If no `key` is given, all values associated with table will be cleared.
*
* __Note:__ The main reason behind using `persistentState` hooks rather than regular LocalStorage API is that it
* ensures separation of data stored by multiple Handsontable instances. In other words, if you have two (or more)
* instances of Handsontable on one page, data saved by one instance won't be accessible by the second instance.
* Those two instances can store data under the same key and no data would be overwritten.
*
* __Important:__ In order for the data separation to work properly, make sure that each instance of Handsontable has a unique `id`.
*
* @memberof Options#
* @type {boolean}
* @default false
*
* @example
* ```js
* // enable the persistent state plugin
* persistentState: true,
* ```
*/
persistentState: void 0,
/**
* Class name for all visible rows in the current selection.
*
* @memberof Options#
* @type {string}
* @default undefined
*
* @example
* ```js
* // This will add a 'currentRow' class name to appropriate table cells.
* currentRowClassName: 'currentRow',
* ```
*/
currentRowClassName: void 0,
/**
* Class name for all visible columns in the current selection.
*
* @memberof Options#
* @type {string}
* @default undefined
*
* @example
* ```js
* // This will add a 'currentColumn' class name to appropriate table cells.
* currentColClassName: 'currentColumn',
* ```
*/
currentColClassName: void 0,
/**
* Class name for all visible headers in current selection.
*
* @memberof Options#
* @type {string}
* @default 'ht__highlight'
*
* @example
* ```js
* // This will add a 'ht__highlight' class name to appropriate table headers.
* currentHeaderClassName: 'ht__highlight',
* ```
*/
currentHeaderClassName: 'ht__highlight',
/**
* Class name for all active headers in selections. The header will be marked with this class name
* only when a whole column or row will be selected.
*
* @memberof Options#
* @type {string}
* @since 0.38.2
* @default 'ht__active_highlight'
*
* @example
* ```js
* // this will add a 'ht__active_highlight' class name to appropriate table headers.
* activeHeaderClassName: 'ht__active_highlight',
* ```
*/
activeHeaderClassName: 'ht__active_highlight',
/**
* Class name for the current element.
* The interpretation depends on the level on which this option is provided in the [cascading configuration](https://handsontable.com/docs/Options.html).
* If `className` is provided on the first (constructor) level, it is the applied to the Handsontable container.
* If `className` is provided on the second (`column`) or the third (`cell` or `cells`) level, it is applied to the table cell.
*
* @memberof Options#
* @type {string|string[]}
* @default undefined
*
* @example
* ```js
* // can be set as a string
* className: 'your__class--name',
*
* // or as an array of strings
* className: ['first-class-name', 'second-class-name'],
* ```
*/
className: void 0,
/**
* Class name for all tables inside container element.
*
* @memberof Options#
* @type {string|string[]}
* @default undefined
*
* @example
* ```js
* // set custom class for table element
* tableClassName: 'your__class--name',
*
* // or
* tableClassName: ['first-class-name', 'second-class-name'],
* ```
*/
tableClassName: void 0,
/**
* @description
* Defines how the columns react, when the declared table width is different than the calculated sum of all column widths.
* [See more](https://docs.handsontable.com/demo-stretching.html) mode. Possible values:
* * `'none'` Disable stretching
* * `'last'` Stretch only the last column
* * `'all'` Stretch all the columns evenly.
*
* @memberof Options#
* @type {string}
* @default 'none'
*
* @example
* ```js
* // fit table to the container
* stretchH: 'all',
* ```
*/
stretchH: 'none',
/**
* Overwrites the default `isEmptyRow` method, which checks if row at the provided index is empty.
*
* @memberof Options#
* @type {Function}
* @param {number} row Visual row index.
* @returns {boolean}
*
* @example
* ```js
* // define custom checks for empty row
* isEmptyRow: function(row) {
* ...
* },
* ```
*/
isEmptyRow: function isEmptyRow(row) {
var col;
var colLen;
var value;
var meta;
for (col = 0, colLen = this.countCols(); col < colLen; col++) {
value = this.getDataAtCell(row, col);
if (value !== '' && value !== null && (0, _mixed.isDefined)(value)) {
if (_typeof(value) === 'object') {
meta = this.getCellMeta(row, col);
return (0, _object.isObjectEqual)(this.getSchema()[meta.prop], value);
}
return false;
}
}
return true;
},
/**
* Overwrites the default `isEmptyCol` method, which checks if column at the provided index is empty.
*
* @memberof Options#
* @type {Function}
* @param {number} col Visual column index.
* @returns {boolean}
*
* @example
* ```js
* // define custom checks for empty column
* isEmptyCol: function(column) {
* return false;
* },
* ```
*/
isEmptyCol: function isEmptyCol(col) {
var row;
var rowLen;
var value;
for (row = 0, rowLen = this.countRows(); row < rowLen; row++) {
value = this.getDataAtCell(row, col);
if (value !== '' && value !== null && (0, _mixed.isDefined)(value)) {
return false;
}
}
return true;
},
/**
* When set to `true`, the table is re-rendered when it is detected that it was made visible in DOM.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // don't rerender the table on visibility changes
* observeDOMVisibility: false,
* ```
*/
observeDOMVisibility: true,
/**
* If set to `true`, Handsontable will accept values that were marked as invalid by the cell `validator`. It will
* result with *invalid* cells being treated as *valid* (will save the *invalid* value into the Handsontable data source).
* If set to `false`, Handsontable will *not* accept the invalid values and won't allow the user to close the editor.
* This option will be particularly useful when used with the Autocomplete's `strict` mode.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // don't save the invalid values
* allowInvalid: false,
* ```
*/
allowInvalid: true,
/**
* If set to `true`, Handsontable will accept values that are empty (`null`, `undefined` or `''`). If set
* to `false`, Handsontable will *not* accept the empty values and mark cell as invalid.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* // allow empty values for all cells (whole table)
* allowEmpty: true,
*
* // or
* columns: [
* {
* data: 'date',
* dateFormat: 'DD/MM/YYYY',
* // allow empty values only for the 'date' column
* allowEmpty: true
* }
* ],
* ```
*/
allowEmpty: true,
/**
* CSS class name for cells that did not pass validation.
*
* @memberof Options#
* @type {string}
* @default 'htInvalid'
*
* @example
* ```js
* // set custom validation error class
* invalidCellClassName: 'highlight--error',
* ```
*/
invalidCellClassName: 'htInvalid',
/**
* When set to an non-empty string, displayed as the cell content for empty cells. If a value of a different type is provided,
* it will be stringified and applied as a string.
*
* @memberof Options#
* @type {string}
* @default undefined
*
* @example
* ```js
* // add custom placeholder content to empty cells
* placeholder: 'Empty Cell',
* ```
*/
placeholder: void 0,
/**
* CSS class name for cells that have a placeholder in use.
*
* @memberof Options#
* @type {string}
* @default 'htPlaceholder'
*
* @example
* ```js
* // set custom placeholder class
* placeholderCellClassName: 'has-placeholder',
* ```
*/
placeholderCellClassName: 'htPlaceholder',
/**
* CSS class name for read-only cells.
*
* @memberof Options#
* @type {string}
* @default 'htDimmed'
*
* @example
* ```js
* // set custom read-only class
* readOnlyCellClassName: 'is-readOnly',
* ```
*/
readOnlyCellClassName: 'htDimmed',
/* eslint-disable jsdoc/require-description-complete-sentence */
/**
* @description
* If a string is provided, it may be one of the following predefined values:
* * `autocomplete`,
* * `checkbox`,
* * `html`,
* * `numeric`,
* * `password`.
* * `text`.
*
* Or you can [register](https://docs.handsontable.com/demo-custom-renderers.html) the custom renderer under specified name and use its name as an alias in your
* configuration.
*
* If a function is provided, it will receive the following arguments:
* ```js
* function(instance, TD, row, col, prop, value, cellProperties) {}
* ```
*
* You can read more about custom renderes [in the documentation](https://docs.handsontable.com/demo-custom-renderers.html).
*
* @memberof Options#
* @type {string|Function}
* @default undefined
*
* @example
* ```js
* // register custom renderer
* Handsontable.renderers.registerRenderer('my.renderer', function(instance, TD, row, col, prop, value, cellProperties) {
* TD.innerHTML = value;
* });
*
* // use it for selected column:
* columns: [
* {
* // as a string with the name of build in renderer
* renderer: 'autocomplete',
* editor: 'select'
* },
* {
* // as an alias to custom renderer registered above
* renderer: 'my.renderer'
* },
* {
* // renderer as custom function
* renderer: function(hotInstance, TD, row, col, prop, value, cellProperties) {
* TD.style.color = 'blue';
* TD.innerHTML = value;
* }
* }
* ],
* ```
*/
renderer: void 0,
/* eslint-enable jsdoc/require-description-complete-sentence */
/**
* CSS class name added to the commented cells.
*
* @memberof Options#
* @type {string}
* @default 'htCommentCell'
*
* @example
* ```js
* // set custom class for commented cells
* commentedCellClassName: 'has-comment',
* ```
*/
commentedCellClassName: 'htCommentCell',
/**
* If set to `true`, it enables the browser's native selection of a fragment of the text within a single cell, between
* adjacent cells or in a whole table. If set to `'cell'`, it enables the possibility of selecting a fragment of the
* text within a single cell's body.
*
* @memberof Options#
* @type {boolean|string}
* @default false
*
* @example
* ```js
* // enable text selection within table
* fragmentSelection: true,
*
* // or
* // enable text selection within cells only
* fragmentSelection: 'cell',
* ```
*/
fragmentSelection: false,
/**
* @description
* Makes cell, column or comment [read only](https://docs.handsontable.com/demo-read-only.html).
*
* @memberof Options#
* @type {boolean}
* @default false
*
* @example
* ```js
* // set as read only
* readOnly: true,
* ```
*/
readOnly: false,
/**
* @description
* When added to a `column` property, it skips the column on paste and pastes the data on the next column to the right.
*
* @memberof Options#
* @type {boolean}
* @default false
*
* @example
* ```js
* columns: [
* {
* // don't paste data to this column
* skipColumnOnPaste: true
* }
* ],
* ```
*/
skipColumnOnPaste: false,
/**
* @description
* When added to a cell property, it skips the row on paste and pastes the data on the following row.
*
* @memberof Options#
* @type {boolean}
* @default false
*
* @example
* ```js
* cells: function(row, column) {
* const cellProperties = {};
*
* // don't paste data to the second row
* if (row === 1) {
* cellProperties.skipRowOnPaste = true;
* }
*
* return cellProperties;
* }
* ```
*/
skipRowOnPaste: false,
/**
* @description
* Setting to `true` enables the {@link Search} plugin (see [demo](https://docs.handsontable.com/demo-search-for-values.html)).
*
* @memberof Options#
* @type {boolean}
* @default false
*
* @example
* ```js
* // enable search plugin
* search: true,
*
* // or
* // as an object with detailed configuration
* search: {
* searchResultClass: 'customClass',
* queryMethod: function(queryStr, value) {
* ...
* },
* callback: function(instance, row, column, value, result) {
* ...
* }
* }
* ```
*/
search: false,
/**
* @description
* Shortcut to define the combination of the cell renderer, editor and validator for the column, cell or whole table.
*
* Possible values:
* * [autocomplete](https://docs.handsontable.com/demo-autocomplete.html)
* * [checkbox](https://docs.handsontable.com/demo-checkbox.html)
* * [date](https://docs.handsontable.com/demo-date.html)
* * [dropdown](https://docs.handsontable.com/demo-dropdown.html)
* * [handsontable](https://docs.handsontable.com/demo-handsontable.html)
* * [numeric](https://docs.handsontable.com/demo-numeric.html)
* * [password](https://docs.handsontable.com/demo-password.html)
* * text
* * [time](https://docs.handsontable.com/demo-time.html).
*
* Or you can register the custom cell type under specified name and use
* its name as an alias in your configuration.
*
* @memberof Options#
* @type {string}
* @default 'text'
*
* @example
* ```js
* // register custom cell type:
* Handsontable.cellTypes.registerCellType('my.type', {
* editor: MyEditorClass,
* renderer: function(hot, td, row, col, prop, value, cellProperties) {
* td.innerHTML = value;
* },
* validator: function(value, callback) {
* callback(value === 'foo' ? true : false);
* }
* });
*
* // use it in column settings:
* columns: [
* {
* type: 'text'
* },
* {
* // an alias to custom type
* type: 'my.type'
* },
* {
* type: 'checkbox'
* }
* ],
* ```
*/
type: 'text',
/**
* @description
* Makes a cell copyable (pressing <kbd>CTRL</kbd> + <kbd>C</kbd> on your keyboard moves its value to system clipboard).
*
* __Note:__ this setting is `false` by default for cells with type `password`.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* cells: [
* {
* cell: 0,
* row: 0,
* // cell with coordinates (0, 0) can't be copied
* copyable: false,
* }
* ],
* ```
*/
copyable: true,
/**
* Defines the editor for the table/column/cell.
*
* If a string is provided, it may be one of the following predefined values:
* * [autocomplete](https://docs.handsontable.com/demo-autocomplete.html)
* * [checkbox](https://docs.handsontable.com/demo-checkbox.html)
* * [date](https://docs.handsontable.com/demo-date.html)
* * [dropdown](https://docs.handsontable.com/demo-dropdown.html)
* * [handsontable](https://docs.handsontable.com/demo-handsontable.html)
* * [mobile](https://docs.handsontable.com/demo-mobiles-and-tablets.html)
* * [password](https://docs.handsontable.com/demo-password.html)
* * [select](https://docs.handsontable.com/demo-select.html)
* * text.
*
* Or you can [register](https://docs.handsontable.com/tutorial-cell-editor.html#registering-an-editor) the custom editor under specified name and use its name as an alias in your
* configuration.
*
* To disable cell editing completely set `editor` property to `false`.
*
* @memberof Options#
* @type {string|Function|boolean}
* @default undefined
*
* @example
* ```js
* columns: [
* {
* // set editor for the first column
* editor: 'select'
* },
* {
* // disable editor for the second column
* editor: false
* }
* ],
* ```
*/
editor: void 0,
/**
* Control number of choices for the autocomplete (or dropdown) typed cells. After exceeding it, a scrollbar for the
* dropdown list of choices will appear.
*
* @memberof Options#
* @type {number}
* @default 10
*
* @example
* ```js
* columns: [
* {
* type: 'autocomplete',
* // set autocomplete options list height
* visibleRows: 15,
* }
* ],
* ```
*/
visibleRows: 10,
/**
* Makes autocomplete or dropdown width the same as the edited cell width. If `false` then editor will be scaled
* according to its content.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* columns: [
* {
* type: 'autocomplete',
* // don't trim dropdown width with column width
* trimDropdown: false,
* }
* ],
* ```
*/
trimDropdown: true,
/**
* When set to `true`, the text of the cell content is wrapped if it does not fit in the fixed column width.
*
* @memberof Options#
* @type {boolean}
* @default true
*
* @example
* ```js
* colWidths: 100,
* columns: [
* {
* // fixed column width is set but don't wrap the content
* wordWrap: false,
* }
* ],
* ```
*/
wordWrap: true,
/**
* CSS class name added to cells with cell meta `wordWrap: false`.
*
* @memberof Options#
* @type {string}
* @default 'htNoWrap'
*
* @example
* ```js
* // set custom class for cells which content won't be wrapped
* noWordWrapClassName: 'is-noWrapCell',
* ```
*/
noWordWrapClassName: 'htNoWrap',
/**
* @description
* Defines if the right-click context menu should be enabled. Context menu allows to create new row or column at any
* place in the grid among [other features](https://docs.handsontable.com/demo-context-menu.html).
* Possible values:
* * `true` (to enable default options),
* * `false` (to disable completely)
* * an array of [predefined options](https://docs.handsontable.com/demo-context-menu.html#page-specific),
* * an object [with defined structure](https://docs.handsontable.com/demo-context-menu.html#page-custom).
*
* If the value is an object, you can also customize the options with:
* * `disableSelection` - a `boolean`, if set to true it prevents mouseover from highlighting the item for selection
* * `isCommand` - a `boolean`, if set to false it prevents clicks from executing the command and closing the menu.
*
* See [the context menu demo](https://docs.handsontable.com/demo-context-menu.html) for examples.
*
* @memberof Options#
* @type {boolean|string[]|object}
* @default undefined
*
* @example
* ```js
* // as a boolean
* contextMenu: true,
*
* // as an array
* contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],
*
* // as an object (`name` attribute is required in the custom keys)
* contextMenu: {
* items: {
* "option1": {
* name: "option1"
* },
* "option2": {
* name: "option2",
* submenu: {
* items: [
* {
* key: "option2:suboption1",
* name: "option2:suboption1",
* callback: function(key, options) {
* ...
* }
* },
* ...
* ]
* }
* }
* }
* },