handsontable
Version:
Handsontable is a JavaScript Spreadsheet Component available for React, Angular and Vue.
1,045 lines (1,005 loc) • 199 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = void 0;
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.symbol.iterator.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _mixed = require("../../helpers/mixed");
var _object = require("../../helpers/object");
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
/* eslint-disable jsdoc/require-description-complete-sentence */
/**
* @alias Options
* @class Options
* @description
*
* [Configuration options](@/guides/getting-started/setting-options.md) let you heavily customize your Handsontable instance. For example, you can:
*
* - Enable and disable built-in features
* - Enable and configure additional [plugins](@/guides/building-and-testing/plugins.md)
* - Personalize Handsontable's look
* - Adjust Handsontable's behavior
* - Implement your own custom features
*
* To apply [configuration options](@/guides/getting-started/setting-options.md), pass them as
* a second argument of the [Handsontable constructor](@/guides/getting-started/installation.md#initialize-the-grid),
* using the [object literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer):
*
* ```js
* const container = document.getElementById('example');
*
* const hot = new Handsontable(container, {
* // configuration options, in the object literal notation
* licenseKey: 'non-commercial-and-evaluation',
* data: Handsontable.helper.createSpreadsheetData(5, 10),
* width: 400,
* height: 300,
* colHeaders: true,
* rowHeaders: true,
* customBorders: true,
* dropdownMenu: true,
* multiColumnSorting: true,
* filters: true,
* manualRowMove: true,
* });
* ```
*
* Depending on your needs, you can apply [configuration options](@/api/options.md) to different elements of your grid:
* - [The entire grid](@/guides/getting-started/setting-options.md#setting-grid-options)
* - [Individual columns](@/guides/getting-started/setting-options.md#setting-column-options)
* - [Individual rows](@/guides/getting-started/setting-options.md#setting-row-options)
* - [Individual cells](@/guides/getting-started/setting-options.md#setting-cell-options)
* - [Individual grid elements, based on any logic you implement](@/guides/getting-started/setting-options.md#implementing-custom-logic)
*
* Read more:
* - [Configuration options →](@/guides/getting-started/setting-options.md)
*/
var _default = function _default() {
return {
/* eslint-disable jsdoc/require-description-complete-sentence */
/**
* The `activeHeaderClassName` option lets you add a CSS class name
* to every currently-active, currently-selected header (when a whole column or row is selected).
*
* Read more:
* - [`currentRowClassName`](#currentRowClassName)
* - [`currentColClassName`](#currentColClassName)
* - [`currentHeaderClassName`](#currentHeaderClassName)
* - [`invalidCellClassName`](#invalidCellClassName)
* - [`readOnlyCellClassName`](#readOnlyCellClassName)
* - [`commentedCellClassName`](#commentedCellClassName)
* - [`noWordWrapClassName`](#noWordWrapClassName)
* - [`TableClassName`](#TableClassName)
* - [`className`](#className)
*
* @memberof Options#
* @type {string}
* @since 0.38.2
* @default 'ht__active_highlight'
* @category Core
*
* @example
* ```js
* // add an `ht__active_highlight` CSS class name
* // to every currently-active, currently-selected header
* activeHeaderClassName: 'ht__active_highlight',
* ```
*/
activeHeaderClassName: 'ht__active_highlight',
/**
* The `allowEmpty` option determines whether Handsontable accepts the following values:
* - `null`
* - `undefined`
* - `''`
*
* You can set the `allowEmpty` option to one of the following:
*
* | Setting | Description |
* | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
* | `true` (default) | - Accept `null`, `undefined` and `''` values<br>- Mark cells that contain `null`, `undefined` and `''` values as `valid` |
* | `false` | - Don't accept `null`, `undefined` and `''` values<br>- Mark cells that contain `null`, `undefined` and `''` values with as `invalid` |
*
* @memberof Options#
* @type {boolean}
* @default true
* @category Core
*
* @example
* ```js
* // allow empty values in every cell of the entire grid
* allowEmpty: true,
*
* // or
* columns: [
* {
* data: 'date',
* dateFormat: 'DD/MM/YYYY',
* // allow empty values in every cell of the 'date' column
* allowEmpty: true
* }
* ],
* ```
*/
allowEmpty: true,
/**
* The `allowHtml` option configures whether [`autocomplete`](@/guides/cell-types/autocomplete-cell-type.md)
* and [`dropdown`](@/guides/cell-types/dropdown-cell-type.md) cells' [`source`](#source) data
* is treated as HTML.
*
* You can set the `allowHtml` option to one of the following:
*
* | Setting | Description |
* | ----------------- | --------------------------------------------------- |
* | `false` (default) | The [`source`](#source) data is not treated as HTML |
* | `true` | The [`source`](#source) data is treated as HTML |
*
* __Warning:__ Setting the `allowHtml` option to `true` can cause serious XSS vulnerabilities.
*
* Read more:
* - [Autocomplete cell type →](@/guides/cell-types/autocomplete-cell-type.md)
* - [Dropdown cell type →](@/guides/cell-types/dropdown-cell-type.md)
* - [`source`](#source)
*
* @memberof Options#
* @type {boolean}
* @default false
* @category Core
*
* @example
* ```js
* columns: [
* {
* // set the `type` of every cell in this column to `autocomplete`
* type: 'autocomplete',
* // set options available in every `autocomplete` cell of this column
* source: ['<strong>foo</strong>', '<strong>bar</strong>']
* // use HTML in the `source` list
* allowHtml: true,
* },
* ],
* ```
*/
allowHtml: false,
/**
* If set to `true`, the `allowInsertColumn` option adds the following menu items to the [context menu](@/guides/accessories-and-menus/context-menu.md):
* - **Insert column left**
* - **Insert column right**
*
* @memberof Options#
* @type {boolean}
* @default true
* @category Core
*
* @example
* ```js
* // hide the 'Insert column left' and 'Insert column right' menu items from the context menu
* allowInsertColumn: false,
* ```
*/
allowInsertColumn: true,
/**
* If set to `true`, the `allowInsertRow` option adds the following menu items to the [context menu](@/guides/accessories-and-menus/context-menu.md):
* - **Insert row above**
* - **Insert row below**
*
* @memberof Options#
* @type {boolean}
* @default true
* @category Core
*
* @example
* ```js
* // hide the 'Insert row above' and 'Insert row below' menu items from the context menu
* allowInsertRow: false,
* ```
*/
allowInsertRow: true,
/**
* The `allowInvalid` option determines whether Handsontable accepts values
* that were marked as `invalid` by the [cell validator](@/guides/cell-functions/cell-validator.md).
*
* You can set the `allowInvalid` option to one of the following:
*
* | Setting | Description |
* | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
* | `true` (default) | - Accept `invalid` values<br>- Allow the user to close the [cell editor](@/guides/cell-functions/cell-editor.md) with `invalid` values<br>- Save `invalid` values into the data source |
* | `false` | - Don't accept `invalid` values<br>- Don't allow the user to close the [cell editor](@/guides/cell-functions/cell-editor.md) with `invalid` values<br>- Don't save `invalid` values into the data source |
*
* Setting the `allowInvalid` option to `false` can be useful when used with the [Autocomplete strict mode](@/guides/cell-types/autocomplete-cell-type.md#autocomplete-strict-mode).
*
* Read more:
* - [Cell validator →](@/guides/cell-functions/cell-validator.md)
* - [Cell editor →](@/guides/cell-functions/cell-editor.md)
* - [Autocomplete strict mode →](@/guides/cell-types/autocomplete-cell-type.md#autocomplete-strict-mode)
*
* @memberof Options#
* @type {boolean}
* @default true
* @category Core
*
* @example
* ```js
* // don't accept `invalid` values
* // don't allow the user to close the cell editor
* // don't save `invalid` values into the data source
* allowInvalid: false,
* ```
*/
allowInvalid: true,
/**
* If set to `true`, the `allowRemoveColumn` option adds the following menu items to the [context menu](@/guides/accessories-and-menus/context-menu.md):
* - **Remove column**
*
* Read more:
* - [Context menu →](@/guides/accessories-and-menus/context-menu.md)
*
* @memberof Options#
* @type {boolean}
* @default true
* @category Core
*
* @example
* ```js
* // hide the 'Remove column' menu item from the context menu
* allowRemoveColumn: false,
* ```
*/
allowRemoveColumn: true,
/**
* If set to `true`, the `allowRemoveRow` option adds the following menu items to the [context menu](@/guides/accessories-and-menus/context-menu.md):
* - **Remove row**
*
* Read more:
* - [Context menu →](@/guides/accessories-and-menus/context-menu.md)
*
* @memberof Options#
* @type {boolean}
* @default true
* @category Core
*
* @example
* ```js
* // hide the 'Remove row' menu item from the context menu
* allowRemoveRow: false,
* ```
*/
allowRemoveRow: true,
/**
* The `autoColumnSize` option configures the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin.
*
* You can set the `autoColumnSize` option to one of the following:
*
* | Setting | Description |
* | --------- | -------------------------------------------------------------------------------------------- |
* | `false` | Disable the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin |
* | `true` | Enable the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin with the default configuration |
* | An object | Enable the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin and modify the plugin options |
*
* If you set the `autoColumnSize` option to an object, you can set the following [`AutoColumnSize`](@/api/autoColumnSize.md) plugin options:
*
* | Property | Possible values | Description |
* | ----------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
* | `syncLimit` | A number \| A percentage string | The number/percentage of columns to keep in sync<br>(default: `50`) |
* | `useHeaders` | `true` \| `false` | When calculating column widths:<br>`true`: use column headers<br>`false`: don't use column headers |
* | `samplingRatio` | A number | The number of samples of the same length to be used in column width calculations |
* | `allowSampleDuplicates` | `true` \| `false` | When calculating column widths:<br>`true`: Allow duplicate samples<br>`false`: Don't allow duplicate samples |
*
* By default, the `autoColumnSize` option is set to `undefined`,
* but the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin acts as enabled.
* To disable the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin completely,
* set the `autoColumnSize` option to `false`.
*
* Using the [`colWidths`](#colWidths) option forcibly disables the [`AutoColumnSize`](@/api/autoColumnSize.md) plugin.
*
* Read more:
* - [Plugins: `AutoColumnSize` →](@/api/autoColumnSize.md)
*
* @memberof Options#
* @type {object|boolean}
* @default undefined
* @category AutoColumnSize
*
* @example
* ```js
* autoColumnSize: {
* // keep 40% of columns in sync (the rest of columns: async)
* syncLimit: '40%',
* // when calculating column widths, use column headers
* useHeaders: true,
* // when calculating column widths, use 10 samples of the same length
* samplingRatio: 10,
* // when calculating column widths, allow duplicate samples
* allowSampleDuplicates: true
* },
* ```
*/
autoColumnSize: void 0,
/**
* The `autoRowSize` option configures the [`AutoRowSize`](@/api/autoRowSize.md) plugin.
*
* You can set the `autoRowSize` option to one of the following:
*
* | Setting | Description |
* | --------- | -------------------------------------------------------------------------------------- |
* | `false` | Disable the [`AutoRowSize`](@/api/autoRowSize.md) plugin |
* | `true` | Enable the [`AutoRowSize`](@/api/autoRowSize.md) plugin with the default configuration |
* | An object | Enable the [`AutoRowSize`](@/api/autoRowSize.md) plugin and modify the plugin options |
*
* To give Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
* a proper size, set the `autoRowSize` option to `true`.
*
* If you set the `autoRowSize` option to an object, you can set the following [`AutoRowSize`](@/api/autoRowSize.md) plugin options:
*
* | Property | Possible values | Description |
* | ----------- | ------------------------------- | ----------------------------------------------------------------- |
* | `syncLimit` | A number \| A percentage string | The number/percentage of rows to keep in sync<br>(default: `500`) |
*
* Using the [`rowHeights`](#rowHeights) option forcibly disables the [`AutoRowSize`](@/api/autoRowSize.md) plugin.
*
* Read more:
* - [Plugins: `AutoRowSize` →](@/api/autoRowSize.md)
*
* @memberof Options#
* @type {object|boolean}
* @default undefined
* @category AutoRowSize
*
* @example
* ```js
* autoRowSize: {
* // keep 40% of rows in sync (the rest of rows: async)
* syncLimit: '40%'
* },
* ```
*/
autoRowSize: void 0,
/**
* The `autoWrapCol` option determines what happens to current cell selection when you navigate to the grid's top or bottom edge.
*
* You can set the `autoWrapCol` option to one of the following:
*
* | Setting | Description |
* | ----------------- | ----------------------------------------------------------------------------------------------------------------------- |
* | `true` | On reaching the grid's top or bottom edge<br>- Jump to the opposite edge<br>- Select a cell in the previous/next column |
* | `false` (default) | On reaching the grid's top or bottom edge, stop |
*
* @memberof Options#
* @type {boolean}
* @default false
* @category Core
*
* @example
* ```js
* // on reaching the grid's top or bottom edge, jump to the opposite edge
* autoWrapCol: true,
* ```
*/
autoWrapCol: false,
/**
* The `autoWrapRow` option determines what happens to current cell selection when you navigate to the grid's left or right edge.
*
* You can set the `autoWrapRow` option to one of the following:
*
* | Setting | Description |
* | ----------------- | ---------------------------------------------------------------------------------------------------------------------------- |
* | `true` | On reaching the grid's left or right edge:<br>- Jump to the grid's opposite edge<br>- Select a cell in the previous/next row |
* | `false` (default) | On reaching the grid's left or right edge, stop |
*
* @memberof Options#
* @type {boolean}
* @default false
* @category Core
*
* @example
* ```js
* // on reaching the grid's left or right edge, jump to the opposite edge
* autoWrapRow: true,
* ```
*/
autoWrapRow: false,
/**
* @description
* The `bindRowsWithHeaders` option configures the [`BindRowsWithHeaders`](@/api/bindRowsWithHeaders.md) plugin.
*
* You can set the `bindRowsWithHeaders` option to one of the following:
*
* | Setting | Description |
* | ------- | ---------------------------------------------------------------------------- |
* | `false` | Disable the the [`BindRowsWithHeaders`](@/api/bindRowsWithHeaders.md) plugin |
* | `true` | Enable the the [`BindRowsWithHeaders`](@/api/bindRowsWithHeaders.md) plugin |
*
* Read more:
* - [Plugins: `BindRowsWithHeaders` →](@/api/bindRowsWithHeaders.md)
*
* @memberof Options#
* @type {boolean|string}
* @default undefined
* @category BindRowsWithHeaders
*
* @example
* ```js
* // enable the `BindRowsWithHeaders` plugin
* bindRowsWithHeaders: true
* ```
*/
bindRowsWithHeaders: void 0,
/**
* The `cell` option lets you apply [configuration options](@/guides/getting-started/setting-options.md) to individual cells.
*
* The `cell` option overwrites the [top-level grid options](@/guides/getting-started/setting-options.md#setting-grid-options),
* and the [`columns`](#columns) options.
*
* Read more:
* - [Configuration options: Setting cell options →](@/guides/getting-started/setting-options.md#setting-cell-options)
* - [`columns`](#columns)
*
* @memberof Options#
* @type {Array[]}
* @default []
* @category Core
*
* @example
* ```js
* // set the `cell` option to an array of objects
* cell: [
* // make the cell with coordinates (0, 0) read-only
* {
* row: 0,
* col: 0,
* readOnly: true
* }
* ],
* ```
*/
cell: [],
/**
* @description
* The `cells` option lets you apply [configuration options](@/guides/getting-started/setting-options.md) to
* individual grid elements (columns, rows, cells), based on any logic you implement.
*
* The `cells` option overwrites all other options (including options set by [`columns`](#columns) and [`cell`](#cell)).
* It takes the following parameters:
*
* | Parameter | Required | Type | Description |
* | --------- | -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
* | `row` | Yes | Number | A physical row index |
* | `column` | Yes | Number | A physical column index |
* | `prop` | No | String \| Number | If [`data`](#data) is set to an [array of arrays](@/guides/getting-started/binding-to-data.md#array-of-arrays), `prop` is the same number as `column`.<br><br>If [`data`](#data) is set to an [array of objects](@/guides/getting-started/binding-to-data.md#array-of-objects), `prop` is a property name for the column's data object. |
*
* Read more:
* - [Configuration options: Implementing custom logic →](@/guides/getting-started/setting-options.md#implementing-custom-logic)
* - [Configuration options: Setting row options →](@/guides/getting-started/setting-options.md#setting-row-options)
* - [`columns`](#columns)
* - [`cell`](#cell)
*
* @memberof Options#
* @type {Function}
* @default undefined
* @category Core
*
* @example
* ```js
* // set the `cells` option to your custom function
* cells(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,
/**
* The `checkedTemplate` option lets you configure what value
* a checked [`checkbox`](@/guides/cell-types/checkbox-cell-type.md) cell has.
*
* You can set the `checkedTemplate` option to one of the following:
*
* | Setting | Description |
* | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
* | `true` (default) | If a [`checkbox`](@/guides/cell-types/checkbox-cell-type.md) cell is checked,<br>the [`getDataAtCell`](@/api/core.md#getDataAtCell) method for this cell returns `true` |
* | A string | If a [`checkbox`](@/guides/cell-types/checkbox-cell-type.md) cell is checked,<br>the [`getDataAtCell`](@/api/core.md#getDataAtCell) method for this cell returns a string of your choice |
*
* Read more:
* - [Checkbox cell type: Checkbox template →](@/guides/cell-types/checkbox-cell-type.md#checkbox-template)
* - [`getDataAtCell()` →](@/api/core.md#getDataAtCell)
* - [`uncheckedTemplate`](#uncheckedTemplate)
*
* @memberof Options#
* @type {boolean|string|number}
* @default true
* @category Core
*
* @example
* ```js
* columns: [
* {
* // set the `type` of every cell in this column to `checkbox`
* // when checked, the cell's value is `true`
* // when unchecked, the cell's value is `false`
* type: 'checkbox',
* },
* {
* // set the `type` of every cell in this column to `checkbox`
* type: 'checkbox',
* // when checked, the cell's value is `'Yes'`
* checkedTemplate: 'Yes',
* // when unchecked, the cell's value is `'No'`
* uncheckedTemplate: 'No'
* }
* ],
* ```
*/
checkedTemplate: void 0,
/**
* The `className` option lets you add CSS class names to every currently-selected element.
*
* You can set the `className` option to one of the following:
*
* | Setting | Description |
* | ------------------- | ---------------------------------------------------------------- |
* | A string | Add a single CSS class name to every currently-selected element |
* | An array of strings | Add multiple CSS class names to every currently-selected element |
*
* To apply different CSS class names on different levels, use Handsontable's [cascading configuration](@/guides/getting-started/setting-options.md#cascading-configuration).
*
* Read more:
* - [Configuration options: Cascading configuration →](@/guides/getting-started/setting-options.md#cascading-configuration)
* - [`currentRowClassName`](#currentRowClassName)
* - [`currentColClassName`](#currentColClassName)
* - [`currentHeaderClassName`](#currentHeaderClassName)
* - [`activeHeaderClassName`](#activeHeaderClassName)
* - [`invalidCellClassName`](#invalidCellClassName)
* - [`placeholderCellClassName`](#placeholderCellClassName)
* - [`commentedCellClassName`](#commentedCellClassName)
* - [`noWordWrapClassName`](#noWordWrapClassName)
* - [`readOnlyCellClassName`](#readOnlyCellClassName)
* - [`TableClassName`](#TableClassName)
*
* @memberof Options#
* @type {string|string[]}
* @default undefined
* @category Core
*
* @example
* ```js
* // add a `your-class-name` CSS class name
* // to every currently-selected element
* className: 'your-class-name',
*
* // add `first-class-name` and `second-class-name` CSS class names
* // to every currently-selected element
* className: ['first-class-name', 'second-class-name'],
* ```
*/
className: void 0,
/**
* The `colHeaders` option configures your grid's column headers.
*
* You can set the `colHeaders` option to one of the following:
*
* | Setting | Description |
* | -------- | -------------------------------------------------------------------- |
* | `true` | Enable the default column headers ('A', 'B', 'C', ...) |
* | `false` | Disable column headers |
* | An array | Define your own column headers (e.g. `['One', 'Two', 'Three', ...]`) |
* | A function | Define your own column headers, using a function |
*
* Read more:
* - [Column header →](@/guides/columns/column-header.md)
*
* @memberof Options#
* @type {boolean|string[]|Function}
* @default null
* @category Core
*
* @example
* ```js
* // enable the default column headers
* colHeaders: true,
*
* // set your own column headers
* colHeaders: ['One', 'Two', 'Three'],
*
* // set your own column headers, using a function
* colHeaders: function(visualColumnIndex) {
* return `${visualColumnIndex} + : AB`;
* },
* ```
*/
colHeaders: null,
/**
* @description
* The `collapsibleColumns` option configures the [`CollapsibleColumns`](@/api/collapsibleColumns.md) plugin.
*
* You can set the `collapsibleColumns` option to one of the following:
*
* | Setting | Description |
* | -------------------- | ------------------------------------------------------------------------------------------------- |
* | `false` | Disable the [`CollapsibleColumns`](@/api/collapsibleColumns.md) plugin |
* | `true` | Enable the [`CollapsibleColumns`](@/api/collapsibleColumns.md) plugin |
* | An array of objects | Enable the [`CollapsibleColumns`](@/api/collapsibleColumns.md) plugin for selected column headers |
*
* Read more:
* - [Plugins: `CollapsibleColumns` →](@/api/collapsibleColumns.md)
*
* @memberof Options#
* @type {boolean|object[]}
* @default undefined
* @category CollapsibleColumns
*
* @example
* ```js
* // enable column collapsing for all headers
* collapsibleColumns: true,
*
* // enable column collapsing for selected headers
* collapsibleColumns: [
* {row: -4, col: 1, collapsible: true},
* {row: -3, col: 5, collapsible: true}
* ],
* ```
*/
collapsibleColumns: void 0,
/**
* @description
* The `columnHeaderHeight` option configures the height of column headers.
*
* You can set the `columnHeaderHeight` option to one of the following:
*
* | Setting | Description |
* | -------- | --------------------------------------------------- |
* | A number | Set the same height for every column header |
* | An array | Set different heights for individual column headers |
*
* @memberof Options#
* @type {number|number[]}
* @default undefined
* @category Core
*
* @example
* ```js
* // set the same height for every column header
* columnHeaderHeight: 25,
*
* // set different heights for individual column headers
* columnHeaderHeight: [25, 30, 55],
* ```
*/
columnHeaderHeight: void 0,
/**
* @description
* The `columns` option lets you apply [configuration options](@/guides/getting-started/setting-options.md) to individual columns (or ranges of columns).
*
* You can set the `columns` option to one of the following:
* - An array of objects (each object represents one column)
* - A function that returns an array of objects
*
* The `columns` option overwrites the [top-level grid options](@/guides/getting-started/setting-options.md#setting-grid-options).
*
* When you use the `columns` option, the [`startCols`](#startCols), [`minCols`](#minCols), and [`maxCols`](#maxCols) are ignored.
*
* Read more:
* - [Configuration options: Setting column options →](@/guides/getting-started/setting-options.md#setting-column-options)
* - [`startCols`](#startCols)
* - [`minCols`](#minCols)
* - [`maxCols`](#maxCols)
*
* @memberof Options#
* @type {object[]|Function}
* @default undefined
* @category Core
*
* @example
* ```js
* // set the `columns` option to an array of objects
* // each object represents one column
* columns: [
* {
* // column options for the first (by physical index) column
* type: 'numeric',
* numericFormat: {
* pattern: '0,0.00 $'
* }
* },
* {
* // column options for the second (by physical index) column
* type: 'text',
* readOnly: true
* }
* ],
*
* // or set the `columns` option to a function, based on physical indexes
* columns(index) {
* return {
* type: index > 0 ? 'numeric' : 'text',
* readOnly: index < 1
* }
* }
* ```
*/
columns: void 0,
/**
* @description
* The `columnSorting` option configures the [`ColumnSorting`](@/api/columnSorting.md) plugin.
*
* You can set the `columnSorting` option to one of the following:
*
* | Setting | Description |
* | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
* | `true` | Enable the [`ColumnSorting`](@/api/columnSorting.md) plugin with the default configuration |
* | `false` | Disable the [`ColumnSorting`](@/api/columnSorting.md) plugin |
* | An object | - Enable the [`ColumnSorting`](@/api/columnSorting.md) plugin<br>- Modify the [`ColumnSorting`](@/api/columnSorting.md) plugin options |
*
* If you set the `columnSorting` option to an object,
* you can set the following [`ColumnSorting`](@/api/columnSorting.md) plugin options:
*
* | Option | Possible settings |
* | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
* | `indicator` | `true`: Display an arrow icon in the column header, to indicate a sortable column<br>`false`: Don't display the arrow icon in the column header |
* | `headerAction` | `true`: Enable clicking on the column header to sort the column<br>`false`: Disable clicking on the column header to sort the column |
* | `sortEmptyCells` | `true`: Sort empty cells as well<br>`false`: Place empty cells at the end |
* | `compareFunctionFactory` | A [custom compare function](@/guides/rows/row-sorting.md#custom-compare-functions) |
*
* If you set the `columnSorting` option to an object,
* you can also sort individual columns at Handsontable's initialization.
* In the `columnSorting` object, add an object named `initialConfig`,
* with the following properties:
*
* | Option | Possible settings | Description |
* | ----------- | ------------------- | ---------------------------------------------------------------- |
* | `column` | A number | The index of the column that you want to sort at initialization |
* | `sortOrder` | `'asc'` \| `'desc'` | The sorting order:<br>`'asc'`: ascending<br>`'desc'`: descending |
*
* Read more:
* - [Row sorting →](@/guides/rows/row-sorting.md)
* - [Row sorting: Custom compare functions →](@/guides/rows/row-sorting.md#custom-compare-functions)
* - [`multiColumnSorting`](#multiColumnSorting)
*
* @memberof Options#
* @type {boolean|object}
* @default undefined
* @category ColumnSorting
*
* @example
* ```js
* // enable the `ColumnSorting` plugin
* columnSorting: true
*
* // enable the `ColumnSorting` plugin with custom configuration
* columnSorting: {
* // sort empty cells as well
* sortEmptyCells: true,
* // display an arrow icon in the column header
* indicator: true,
* // disable clicking on the column header to sort the column
* headerAction: false,
* // add a custom compare function
* compareFunctionFactory(sortOrder, columnMeta) {
* return function(value, nextValue) {
* // some value comparisons which will return -1, 0 or 1...
* }
* }
* }
*
* // enable the `ColumnSorting` plugin
* columnSorting: {
* // at initialization, sort column 1 in ascending order
* initialConfig: {
* column: 1,
* sortOrder: 'asc'
* },
* // at initialization, sort column 2 in descending order
* initialConfig: {
* column: 2,
* sortOrder: 'desc'
* }
* }
* ```
*/
columnSorting: void 0,
/**
* @description
* The `columnSummary` option configures the [`ColumnSummary`](@/api/columnSummary.md) plugin.
*
* You can set the `columnSummary` option to an array of objects.
* Each object configures a single column summary, using the following properties:
*
* | Property | Possible values | Description |
* | ------------------------ | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
* | `sourceColumn` | A number | [Column to summarize](@/guides/columns/column-summary.md#step-2-select-cells-that-you-want-to-summarize) |
* | `ranges` | An array | [Ranges of rows to summarize](@/guides/columns/column-summary.md#step-2-select-cells-that-you-want-to-summarize) |
* | `type` | `'sum'` \| `'min'` \| `'max'` \| `'count'` \| `'average'` \| `'custom'` | [Summary function](@/guides/columns/column-summary.md#step-3-calculate-your-summary) |
* | `destinationRow` | A number | [Destination cell's row coordinate](@/guides/columns/column-summary.md#step-4-provide-the-destination-cell-s-coordinates) |
* | `destinationColumn` | A number | [Destination cell's column coordinate](@/guides/columns/column-summary.md#step-4-provide-the-destination-cell-s-coordinates) |
* | `forceNumeric` | `true` \| `false` | [Treat non-numerics as numerics](@/guides/columns/column-summary.md#forcing-numeric-values) |
* | `reversedRowCoords` | `true` \| `false` | [Reverse row coordinates](@/guides/columns/column-summary.md#step-5-make-room-for-the-destination-cell) |
* | `suppressDataTypeErrors` | `true` \| `false` | [Suppress data type errors](@/guides/columns/column-summary.md#throwing-data-type-errors) |
* | `readOnly` | `true` \| `false` | Make summary cell read-only |
* | `roundFloat` | `true` \| `false` | [Round summary result](@/guides/columns/column-summary.md#rounding-a-column-summary-result) |
* | `customFunction` | A function | [Custom summary function](@/guides/columns/column-summary.md#implementing-a-custom-summary-function) |
*
* Read more:
* - [Column summary →](@/guides/columns/column-summary.md)
* - [Plugins: `ColumnSummary` →](@/api/columnSummary.md)
*
* @memberof Options#
* @type {object[]|Function}
* @default undefined
* @category ColumnSummary
*
* @example
* ```js
* columnSummary: [
* {
* sourceColumn: 0,
* ranges: [
* [0, 2], [4], [6, 8]
* ],
* type: 'custom',
* destinationRow: 4,
* destinationColumn: 1,
* forceNumeric: true,
* reversedRowCoords: true,
* suppressDataTypeErrors: false,
* readOnly: true,
* roundFloat: false,
* customFunction(endpoint) {
* return 100;
* }
* }
* ],
* ```
*/
columnSummary: void 0,
/**
* The `colWidths` option sets columns' widths, in pixels.
*
* In the rendering process, the default column width is 50px. To change it,
* set the `colWidths` option to one of the following:
*
* | Setting | Description | Example |
* | ----------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
* | A number | Set the same width for every column | `colWidths: 100` |
* | A string | Set the same width for every column | `colWidths: '100px'` |
* | An array | Set widths separately for each column | `colWidths: [100, 120, undefined]` |
* | A function | Set column widths dynamically,<br>on each render | `colWidths(visualColumnIndex) { return visualColumnIndex * 10; }` |
* | `undefined` | Used by the [modifyColWidth](@/api/hooks.md#modifyColWidth) hook,<br>to detect column width changes. | `colWidths: undefined` |
*
* Setting the `colWidths` option disables the {@link AutoColumnSize} plugin.
*
* Read more:
* - [Column width →](@/guides/columns/column-width.md)
* - [Hooks: `modifyColWidth` →](@/api/hooks.md#modifyColWidth)
* - [`autoColumnSize`](#autoColumnSize)
*
* @memberof Options#
* @type {number|number[]|string|string[]|Array<undefined>|Function}
* @default undefined
* @category Core
*
* @example
* ```js
* // set every column's width to 100px
* colWidths: 100,
*
* // set every column's width to 100px
* colWidths: '100px',
*
* // set the first (by visual index) column's width to 100
* // set the second (by visual index) column's width to 120
* // set the third (by visual index) column's width to `undefined`
* // set any other column's width to the default 50px
* colWidths: [100, 120, undefined],
*
* // set each column's width individually, using a function
* colWidths(visualColumnIndex) {
* return visualColumnIndex * 10;
* },
* ```
*/
colWidths: void 0,
/**
* The `commentedCellClassName` option lets you add a CSS class name to cells
* that have comments.
*
* Read more:
* - [Comments →](@/guides/cell-features/comments.md)
* - [`comments`](#comments)
* - [`readOnlyCellClassName`](#readOnlyCellClassName)
* - [`currentRowClassName`](#currentRowClassName)
* - [`currentHeaderClassName`](#currentHeaderClassName)
* - [`activeHeaderClassName`](#activeHeaderClassName)
* - [`invalidCellClassName`](#invalidCellClassName)
* - [`placeholderCellClassName`](#placeholderCellClassName)
* - [`readOnlyCellClassName`](#readOnlyCellClassName)
* - [`noWordWrapClassName`](#noWordWrapClassName)
* - [`TableClassName`](#TableClassName)
* - [`className`](#className)
*
* @memberof Options#
* @type {string}
* @default 'htCommentCell'
* @category Core
*
* @example
* ```js
* // add a `has-comment` CSS class name
* // to every cell that has a comment
* commentedCellClassName: 'has-comment',
* ```
*/
commentedCellClassName: 'htCommentCell',
/**
* @description
* The `comments` option configures the [`Comments`](@/api/comments.md) plugin.
*
* You can set the `comments` option to one of the following:
*
* | Setting | Description |
* | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
* | `true` | - Enable the [`Comments`](@/api/comments.md) plugin<br>- Add comment menu items to the [context menu](@/guides/accessories-and-menus/context-menu.md) |
* | `false` | Disable the [`Comments`](@/api/comments.md) plugin |
* | An object | - Enable the [`Comments`](@/api/comments.md) plugin<br>- Add comment menu items to the [context menu](@/guides/accessories-and-menus/context-menu.md)<br>- Configure comment settings |
*
* If you set the `comments` option to an object, you can configure the following comment options:
*
* | Option | Possible settings | Description |
* | -------------- | --------------------------- | --------------------------------------------------- |
* | `displayDelay` | A number (default: `250`) | Display comments after a delay (in milliseconds) |
* | `readOnly` | `true` \| `false` (default) | `true`: Make comments read-only |
* | `style` | An object | Set comment boxes' `width` and `height` (in pixels) |
*
* Read more:
* - [Comments →](@/guides/cell-features/comments.md)
* - [Context menu →](@/guides/accessories-and-menus/context-menu.md)
* - [`width`](#width)
* - [`height`](#height)
* - [`readOnly`](#readOnly)
* - [`commentedCellClassName`](#commentedCellClassName)
*
* @memberof Options#
* @type {boolean|object[]}
* @default false
* @category Comments
*
* @example
* ```js
* // enable the `Comments` plugin
* comments: true,
*
* // enable the `Comments` plugin
* // and configure its settings
* comments: {
* // display all comments with a 1-second delay
* displayDelay: 1000,
* // make all comments read-only
* readOnly: true,
* // set the default size of all comment boxes
* style: {
* width: 300,
* height: 100
* }
* }
* ```
*/
comments: false,
/**
* @description
* The `contextMenu` option configures the [`ContextMenu`](@/api/contextMenu.md) plugin.
*
* You can set the `contextMenu` option to one of the following:
*
* | Setting | Description |
* | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
* | `false` | Disable the [`ContextMenu`](@/api/contextMenu.md) plugin |
* | `true` | - Enable the [`ContextMenu`](@/api/contextMenu.md) plugin<br>- Use the [default