defaultSettings.js 74 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772
  1. import { isDefined } from './helpers/mixed';
  2. import { isObjectEqual } from './helpers/object';
  3. /**
  4. * @alias Options
  5. * @constructor
  6. * @description
  7. * ## Constructor options
  8. *
  9. * Constructor options are applied using an object literal passed as a second argument to the Handsontable constructor.
  10. *
  11. * ```js
  12. * const container = document.getElementById('example');
  13. * const hot = new Handsontable(container, {
  14. * data: myArray,
  15. * width: 400,
  16. * height: 300
  17. * });
  18. * ```
  19. *
  20. * ---
  21. * ## Cascading configuration
  22. *
  23. * Handsontable is using *Cascading Configuration*, which is a fast way to provide configuration options
  24. * for the entire table, including its columns and particular cells.
  25. *
  26. * Consider the following example:
  27. * ```js
  28. * const container = document.getElementById('example');
  29. * const hot = new Handsontable(container, {
  30. * readOnly: true,
  31. * columns: [
  32. * {readOnly: false},
  33. * {},
  34. * {}
  35. * ],
  36. * cells: function(row, col, prop) {
  37. * var cellProperties = {};
  38. *
  39. * if (row === 0 && col === 0) {
  40. * cellProperties.readOnly = true;
  41. * }
  42. *
  43. * return cellProperties;
  44. * }
  45. * });
  46. * ```
  47. *
  48. * 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*.
  49. *
  50. * ### The Cascading Configuration model
  51. *
  52. * ##### 1. Constructor
  53. *
  54. * Configuration options that are provided using first-level `handsontable(container, {option: "value"})` and `updateSettings` method.
  55. *
  56. * ##### 2. Columns
  57. *
  58. * Configuration options that are provided using second-level object `handsontable(container, {columns: {option: "value"}]})`
  59. *
  60. * ##### 3. Cells
  61. *
  62. * Configuration options that are provided using third-level function `handsontable(container, {cells: function: (row, col, prop){ }})`
  63. *
  64. * ---
  65. * ## Architecture performance
  66. *
  67. * The Cascading Configuration model is based on prototypical inheritance. It is much faster and memory efficient
  68. * compared to the previous model that used jQuery extend. See: [http://jsperf.com/extending-settings](http://jsperf.com/extending-settings).
  69. *
  70. * ---
  71. * __Important notice:__ In order for the data separation to work properly, make sure that each instance of Handsontable has a unique `id`.
  72. */
  73. function DefaultSettings() {}
  74. DefaultSettings.prototype = {
  75. /**
  76. * License key for commercial version of Handsontable.
  77. *
  78. * @pro
  79. * @type {String}
  80. * @default 'trial'
  81. * @example
  82. * ```js
  83. * licenseKey: '00000-00000-00000-00000-00000',
  84. * ```
  85. */
  86. licenseKey: 'trial',
  87. /**
  88. * @description
  89. * Initial data source that will be bound to the data grid __by reference__ (editing data grid alters the data source).
  90. * Can be declared as an array of arrays, array of objects or a function.
  91. *
  92. * See [Understanding binding as reference](https://docs.handsontable.com/tutorial-data-binding.html#page-reference).
  93. *
  94. * @type {Array[]|Object[]|Function}
  95. * @default undefined
  96. * @example
  97. * ```js
  98. * // as an array of arrays
  99. * data: [
  100. * ['A', 'B', 'C'],
  101. * ['D', 'E', 'F'],
  102. * ['G', 'H', 'J']
  103. * ]
  104. *
  105. * // as an array of objects
  106. * data: [
  107. * {id: 1, name: 'Ted Right'},
  108. * {id: 2, name: 'Frank Honest'},
  109. * {id: 3, name: 'Joan Well'},
  110. * {id: 4, name: 'Gail Polite'},
  111. * {id: 5, name: 'Michael Fair'},
  112. * ]
  113. * ```
  114. */
  115. data: void 0,
  116. /**
  117. * @description
  118. * Defines the structure of a new row when data source is an array of objects.
  119. *
  120. * See [data-schema](https://docs.handsontable.com/tutorial-data-sources.html#page-data-schema) for more options.
  121. *
  122. * @type {Object}
  123. * @default undefined
  124. *
  125. * @example
  126. * ```
  127. * // with data schema we can start with an empty table
  128. * data: null,
  129. * dataSchema: {id: null, name: {first: null, last: null}, address: null},
  130. * colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
  131. * columns: [
  132. * {data: 'id'},
  133. * {data: 'name.first'},
  134. * {data: 'name.last'},
  135. * {data: 'address'}
  136. * ],
  137. * startRows: 5,
  138. * minSpareRows: 1
  139. * ```
  140. */
  141. dataSchema: void 0,
  142. /**
  143. * Width of the grid. Can be a value or a function that returns a value.
  144. *
  145. * @type {Number|Function}
  146. * @default undefined
  147. *
  148. * @example
  149. * ```
  150. * // as a number
  151. * width: 500,
  152. *
  153. * // as a function
  154. * width: function() {
  155. * return 500;
  156. * },
  157. * ```
  158. */
  159. width: void 0,
  160. /**
  161. * Height of the grid. Can be a number or a function that returns a number.
  162. *
  163. * @type {Number|Function}
  164. * @default undefined
  165. *
  166. * @example
  167. * ```js
  168. * // as a number
  169. * height: 500,
  170. *
  171. * // as a function
  172. * height: function() {
  173. * return 500;
  174. * },
  175. * ```
  176. */
  177. height: void 0,
  178. /**
  179. * @description
  180. * Initial number of rows.
  181. *
  182. * __Note:__ This option only has effect in Handsontable constructor and only if `data` option is not provided
  183. *
  184. * @type {Number}
  185. * @default 5
  186. *
  187. * @example
  188. * ```js
  189. * // start with 15 empty rows
  190. * startRows: 15,
  191. * ```
  192. */
  193. startRows: 5,
  194. /**
  195. * @description
  196. * Initial number of columns.
  197. *
  198. * __Note:__ This option only has effect in Handsontable constructor and only if `data` option is not provided
  199. *
  200. * @type {Number}
  201. * @default 5
  202. *
  203. * @example
  204. * ```js
  205. * // start with 15 empty columns
  206. * startCols: 15,
  207. * ```
  208. */
  209. startCols: 5,
  210. /**
  211. * Setting `true` or `false` will enable or disable the default row headers (1, 2, 3).
  212. * You can also define an array `['One', 'Two', 'Three', ...]` or a function to define the headers.
  213. * If a function is set the index of the row is passed as a parameter.
  214. *
  215. * @type {Boolean|String[]|Function}
  216. * @default undefined
  217. *
  218. * @example
  219. * ```js
  220. * // as a boolean
  221. * rowHeaders: true,
  222. *
  223. * // as an array
  224. * rowHeaders: ['1', '2', '3'],
  225. *
  226. * // as a function
  227. * rowHeaders: function(index) {
  228. * return index + ': AB';
  229. * },
  230. * ```
  231. */
  232. rowHeaders: void 0,
  233. /**
  234. * Setting `true` or `false` will enable or disable the default column headers (A, B, C).
  235. * You can also define an array `['One', 'Two', 'Three', ...]` or a function to define the headers.
  236. * If a function is set, then the index of the column is passed as a parameter.
  237. *
  238. * @type {Boolean|String[]|Function}
  239. * @default null
  240. *
  241. * @example
  242. * ```js
  243. * // as a boolean
  244. * colHeaders: true,
  245. *
  246. * // as an array
  247. * colHeaders: ['A', 'B', 'C'],
  248. *
  249. * // as a function
  250. * colHeaders: function(index) {
  251. * return index + ': AB';
  252. * },
  253. * ```
  254. */
  255. colHeaders: null,
  256. /**
  257. * Defines column widths in pixels. Accepts number, string (that will be converted to a number), array of numbers
  258. * (if you want to define column width separately for each column) or a function (if you want to set column width
  259. * dynamically on each render).
  260. *
  261. * @type {Number|Number[]|String|String[]|Function}
  262. * @default undefined
  263. *
  264. * @example
  265. * ```js
  266. * // as a number, for each column.
  267. * colWidths: 100,
  268. *
  269. * // as a string, for each column.
  270. * colWidths: '100px',
  271. *
  272. * // as an array, based on visual indexes. The rest of the columns have a default width.
  273. * colWidths: [100, 120, 90],
  274. *
  275. * // as a function, based on visual indexes.
  276. * colWidths: function(index) {
  277. * return index * 10;
  278. * },
  279. * ```
  280. */
  281. colWidths: void 0,
  282. /**
  283. * Defines row heights in pixels. Accepts numbers, strings (that will be converted into a number), array of numbers
  284. * (if you want to define row height separately for each row) or a function (if you want to set row height dynamically
  285. * on each render).
  286. *
  287. * If the {@link ManualRowResize} or {@link AutoRowSize} plugins are enabled, this is also the minimum height that can
  288. * be set via either of those two plugins.
  289. *
  290. * Height should be equal or greater than 23px. Table is rendered incorrectly if height is less than 23px.
  291. *
  292. * @type {Number|Number[]|String|String[]|Function}
  293. * @default undefined
  294. *
  295. * @example
  296. * ```js
  297. * // as a number, the same for all rows
  298. * rowHeights: 100,
  299. *
  300. * // as a string, the same for all row
  301. * rowHeights: '100px',
  302. *
  303. * // as an array, based on visual indexes. The rest of the rows have a default height
  304. * rowHeights: [100, 120, 90],
  305. *
  306. * // as a function, based on visual indexes
  307. * rowHeights: function(index) {
  308. * return index * 10;
  309. * },
  310. * ```
  311. */
  312. rowHeights: void 0,
  313. /**
  314. * @description
  315. * Defines the cell properties and data binding for certain columns.
  316. *
  317. * __Note:__ Using this option sets a fixed number of columns (options `startCols`, `minCols`, `maxCols` will be ignored).
  318. *
  319. * See [documentation -> datasources.html](https://docs.handsontable.com/tutorial-data-sources.html#page-nested) for examples.
  320. *
  321. * @type {Object[]|Function}
  322. * @default undefined
  323. *
  324. * @example
  325. * ```js
  326. * // as an array of objects
  327. * // order of the objects in array is representation of physical indexes.
  328. * columns: [
  329. * {
  330. * // column options for the first column
  331. * type: 'numeric',
  332. * numericFormat: {
  333. * pattern: '0,0.00 $'
  334. * }
  335. * },
  336. * {
  337. * // column options for the second column
  338. * type: 'text',
  339. * readOnly: true
  340. * }
  341. * ],
  342. *
  343. * // or as a function, based on physical indexes
  344. * columns: function(index) {
  345. * return {
  346. * type: index > 0 ? 'numeric' : 'text',
  347. * readOnly: index < 1
  348. * }
  349. * }
  350. * ```
  351. */
  352. columns: void 0,
  353. /**
  354. * @description
  355. * Defines the cell properties for given `row`, `col`, `prop` coordinates. Any constructor or column option may be
  356. * overwritten for a particular cell (row/column combination) using the `cells` property in the Handsontable constructor.
  357. *
  358. * __Note:__ Parameters `row` and `col` always represent __physical indexes__. Example below show how to execute
  359. * operations based on the __visual__ representation of Handsontable.
  360. *
  361. * Possible values of `prop`:
  362. * - property name for column's data source object, when dataset is an [array of objects](/tutorial-data-sources.html#page-object)
  363. * - the same number as `col`, when dataset is an [array of arrays](/tutorial-data-sources.html#page-array)
  364. *
  365. * @type {Function}
  366. * @default undefined
  367. *
  368. * @example
  369. * ```js
  370. * cells: function(row, column, prop) {
  371. * const cellProperties = {};
  372. * const visualRowIndex = this.instance.toVisualRow(row);
  373. * const visualColIndex = this.instance.toVisualColumn(column);
  374. *
  375. * if (visualRowIndex === 0 && visualColIndex === 0) {
  376. * cellProperties.readOnly = true;
  377. * }
  378. *
  379. * return cellProperties;
  380. * },
  381. * ```
  382. */
  383. cells: void 0,
  384. /**
  385. * Any constructor or column option may be overwritten for a particular cell (row/column combination), using `cell`
  386. * array passed to the Handsontable constructor.
  387. *
  388. * @type {Array[]}
  389. * @default []
  390. *
  391. * @example
  392. * ```js
  393. * // make cell with coordinates (0, 0) read only
  394. * cell: [
  395. * {
  396. * row: 0,
  397. * col: 0,
  398. * readOnly: true
  399. * }
  400. * ],
  401. * ```
  402. */
  403. cell: [],
  404. /**
  405. * @description
  406. * If `true`, enables the {@link Comments} plugin, which enables an option to apply cell comments through the context menu
  407. * (configurable with context menu keys `commentsAddEdit`, `commentsRemove`).
  408. *
  409. * To initialize Handsontable with predefined comments, provide cell coordinates and comment text values in a form of
  410. * an array.
  411. *
  412. * See [Comments](https://docs.handsontable.com/demo-comments_.html) demo for examples.
  413. *
  414. * @type {Boolean|Object[]}
  415. * @default false
  416. *
  417. * @example
  418. * ```js
  419. * // enable comments plugin
  420. * comments: true,
  421. *
  422. * // or
  423. * // enable comments plugin and add predefined comments
  424. * comments: [
  425. * {
  426. * row: 1,
  427. * col: 1,
  428. * comment: {
  429. * value: "Test comment"
  430. * }
  431. * }
  432. * ],
  433. * ```
  434. */
  435. comments: false,
  436. /**
  437. * @description
  438. * If `true`, enables the {@link CustomBorders} plugin, which enables an option to apply custom borders through the context
  439. * menu (configurable with context menu key `borders`). To initialize Handsontable with predefined custom borders,
  440. * provide cell coordinates and border styles in a form of an array.
  441. *
  442. * See [Custom Borders](https://docs.handsontable.com/demo-custom-borders.html) demo for examples.
  443. *
  444. * @type {Boolean|Object[]}
  445. * @default false
  446. *
  447. * @example
  448. * ```js
  449. * // enable custom borders
  450. * customBorders: true,
  451. *
  452. * // or
  453. * // enable custom borders and start with predefined left border
  454. * customBorders: [
  455. * {
  456. * range: {
  457. * from: {
  458. * row: 1,
  459. * col: 1
  460. * },
  461. * to: {
  462. * row: 3,
  463. * col: 4
  464. * }
  465. * },
  466. * left: {
  467. * width: 2,
  468. * color: 'red'
  469. * },
  470. * right: {},
  471. * top: {},
  472. * bottom: {}
  473. * }
  474. * ],
  475. *
  476. * // or
  477. * customBorders: [
  478. * {
  479. * row: 2,
  480. * col: 2,
  481. * left: {
  482. * width: 2,
  483. * color: 'red'
  484. * },
  485. * right: {
  486. * width: 1,
  487. * color: 'green'
  488. * },
  489. * top: '',
  490. * bottom: ''
  491. * }
  492. * ],
  493. * ```
  494. */
  495. customBorders: false,
  496. /**
  497. * Minimum number of rows. At least that number of rows will be created during initialization.
  498. *
  499. * @type {Number}
  500. * @default 0
  501. *
  502. * @example
  503. * ```js
  504. * // set minimum table size to 10 rows
  505. * minRows: 10,
  506. * ```
  507. */
  508. minRows: 0,
  509. /**
  510. * Minimum number of columns. At least that number of columns will be created during initialization.
  511. *
  512. * @type {Number}
  513. * @default 0
  514. *
  515. * @example
  516. * ```js
  517. * // set minimum table size to 10 columns
  518. * minCols: 10,
  519. * ```
  520. */
  521. minCols: 0,
  522. /**
  523. * Maximum number of rows. If set to a value lower than the initial row count, the data will be trimmed to the provided
  524. * value as the number of rows.
  525. *
  526. * @type {Number}
  527. * @default Infinity
  528. *
  529. * @example
  530. * ```js
  531. * // limit table size to maximum 300 rows
  532. * maxRows: 300,
  533. * ```
  534. */
  535. maxRows: Infinity,
  536. /**
  537. * Maximum number of cols. If set to a value lower than the initial col count, the data will be trimmed to the provided
  538. * value as the number of cols.
  539. *
  540. * @type {Number}
  541. * @default Infinity
  542. *
  543. * @example
  544. * ```js
  545. * // limit table size to maximum 300 columns
  546. * maxCols: 300,
  547. * ```
  548. */
  549. maxCols: Infinity,
  550. /**
  551. * When set to 1 (or more), Handsontable will add a new row at the end of grid if there are no more empty rows.
  552. * (unless the number of rows exceeds the one set in the `maxRows` property)
  553. *
  554. * @type {Number}
  555. * @default 0
  556. *
  557. * @example
  558. * ```js
  559. * // always add 3 empty rows at the table end
  560. * minSpareRows: 3,
  561. * ```
  562. */
  563. minSpareRows: 0,
  564. /**
  565. * When set to 1 (or more), Handsontable will add a new column at the end of grid if there are no more empty columns.
  566. * (unless the number of rows exceeds the one set in the `maxCols` property)
  567. *
  568. * @type {Number}
  569. * @default 0
  570. *
  571. * @example
  572. * ```js
  573. * // always add 3 empty columns at the table end
  574. * minSpareCols: 3,
  575. * ```
  576. */
  577. minSpareCols: 0,
  578. /**
  579. * If set to `false`, there won't be an option to insert new rows in the Context Menu.
  580. *
  581. * @type {Boolean}
  582. * @default true
  583. *
  584. * @example
  585. * ```js
  586. * // hide "Insert row above" and "Insert row below" options from the Context Menu
  587. * allowInsertRow: false,
  588. * ```
  589. */
  590. allowInsertRow: true,
  591. /**
  592. * If set to `false`, there won't be an option to insert new columns in the Context Menu.
  593. *
  594. * @type {Boolean}
  595. * @default true
  596. *
  597. * @example
  598. * ```js
  599. * // hide "Insert column left" and "Insert column right" options from the Context Menu
  600. * allowInsertColumn: false,
  601. * ```
  602. */
  603. allowInsertColumn: true,
  604. /**
  605. * If set to `false`, there won't be an option to remove rows in the Context Menu.
  606. *
  607. * @type {Boolean}
  608. * @default true
  609. *
  610. * @example
  611. * ```js
  612. * // hide "Remove row" option from the Context Menu
  613. * allowRemoveRow: false,
  614. * ```
  615. */
  616. allowRemoveRow: true,
  617. /**
  618. * If set to `false`, there won't be an option to remove columns in the Context Menu.
  619. *
  620. * @type {Boolean}
  621. * @default true
  622. *
  623. * @example
  624. * ```js
  625. * // hide "Remove column" option from the Context Menu
  626. * allowRemoveColumn: false,
  627. * ```
  628. */
  629. allowRemoveColumn: true,
  630. /**
  631. * @description
  632. * Defines how the table selection reacts. The selection support three different behaviors defined as:
  633. * * `'single'` Only a single cell can be selected.
  634. * * `'range'` Multiple cells within a single range can be selected.
  635. * * `'multiple'` Multiple ranges of cells can be selected.
  636. *
  637. * To see how to interact with selection by getting selected data or change styles of the selected cells go to
  638. * [https://docs.handsontable.com/demo-selecting-ranges.html](https://docs.handsontable.com/demo-selecting-ranges.html).
  639. *
  640. * @type {String}
  641. * @default 'multiple'
  642. *
  643. * @example
  644. * ```js
  645. * // only one cell can be selected at a time
  646. * selectionMode: 'single',
  647. * ```
  648. */
  649. selectionMode: 'multiple',
  650. /**
  651. * Enables the fill handle (drag-down and copy-down) functionality, which shows a small rectangle in bottom
  652. * right corner of the selected area, that let's you expand values to the adjacent cells.
  653. *
  654. * Setting to `true` enables the fillHandle plugin. Possible values: `true` (to enable in all directions),
  655. * `'vertical'` or `'horizontal'` (to enable in one direction), `false` (to disable completely), an object with
  656. * options: `autoInsertRow`, `direction`.
  657. *
  658. * If `autoInsertRow` option is `true`, fill-handler will create new rows till it reaches the last row.
  659. * It is enabled by default.
  660. *
  661. * @type {Boolean|String|Object}
  662. * @default true
  663. *
  664. * @example
  665. * ```js
  666. * // enable plugin in all directions and with autoInsertRow as true
  667. * fillHandle: true,
  668. *
  669. * // or
  670. * // enable plugin in vertical direction and with autoInsertRow as true
  671. * fillHandle: 'vertical',
  672. *
  673. * // or
  674. * fillHandle: {
  675. * // enable plugin in both directions and with autoInsertRow as false
  676. * autoInsertRow: false,
  677. * },
  678. *
  679. * // or
  680. * fillHandle: {
  681. * // enable plugin in vertical direction and with autoInsertRow as false
  682. * autoInsertRow: false,
  683. * direction: 'vertical'
  684. * },
  685. * ```
  686. */
  687. fillHandle: {
  688. autoInsertRow: false,
  689. },
  690. /**
  691. * Allows to specify the number of fixed (or *frozen*) rows at the top of the table.
  692. *
  693. * @type {Number}
  694. * @default 0
  695. *
  696. * @example
  697. * ```js
  698. * // freeze the first 3 rows of the table.
  699. * fixedRowsTop: 3,
  700. * ```
  701. */
  702. fixedRowsTop: 0,
  703. /**
  704. * Allows to specify the number of fixed (or *frozen*) rows at the bottom of the table.
  705. *
  706. * @type {Number}
  707. * @default 0
  708. *
  709. * @example
  710. * ```js
  711. * // freeze the last 3 rows of the table.
  712. * fixedRowsBottom: 3,
  713. * ```
  714. */
  715. fixedRowsBottom: 0,
  716. /**
  717. * Allows to specify the number of fixed (or *frozen*) columns on the left of the table.
  718. *
  719. * @type {Number}
  720. * @default 0
  721. *
  722. * @example
  723. * ```js
  724. * // freeze first 3 columns of the table.
  725. * fixedColumnsLeft: 3,
  726. * ```
  727. */
  728. fixedColumnsLeft: 0,
  729. /**
  730. * If `true`, mouse click outside the grid will deselect the current selection. Can be a function that takes the
  731. * click event target and returns a boolean.
  732. *
  733. * @type {Boolean|Function}
  734. * @default true
  735. *
  736. * @example
  737. * ```js
  738. * // don't clear current selection when mouse click was outside the grid
  739. * outsideClickDeselects: false,
  740. *
  741. * // or
  742. * outsideClickDeselects: function(event) {
  743. * return false;
  744. * }
  745. * ```
  746. */
  747. outsideClickDeselects: true,
  748. /**
  749. * If `true`, <kbd>ENTER</kbd> begins editing mode (like in Google Docs). If `false`, <kbd>ENTER</kbd> moves to next
  750. * row (like Excel) and adds a new row if necessary. <kbd>TAB</kbd> adds new column if necessary.
  751. *
  752. * @type {Boolean}
  753. * @default true
  754. *
  755. * @example
  756. * ```js
  757. * enterBeginsEditing: false,
  758. * ```
  759. */
  760. enterBeginsEditing: true,
  761. /**
  762. * Defines the cursor movement after <kbd>ENTER</kbd> was pressed (<kbd>SHIFT</kbd> + <kbd>ENTER</kbd> uses a negative vector). Can
  763. * be an object or a function that returns an object. The event argument passed to the function is a DOM Event object
  764. * received after the <kbd>ENTER</kbd> key has been pressed. This event object can be used to check whether user pressed
  765. * <kbd>ENTER</kbd> or <kbd>SHIFT</kbd> + <kbd>ENTER</kbd>.
  766. *
  767. * @type {Object|Function}
  768. * @default {row: 1, col: 0}
  769. *
  770. * @example
  771. * ```js
  772. * // move selection diagonal by 1 cell in x and y axis
  773. * enterMoves: {row: 1, col: 1},
  774. * // or as a function
  775. * enterMoves: function(event) {
  776. * return {row: 1, col: 1};
  777. * },
  778. * ```
  779. */
  780. enterMoves: { row: 1, col: 0 },
  781. /**
  782. * Defines the cursor movement after <kbd>TAB</kbd> is pressed (<kbd>SHIFT</kbd> + <kbd>TAB</kbd> uses a negative vector). Can
  783. * be an object or a function that returns an object. The event argument passed to the function is a DOM Event object
  784. * received after the <kbd>TAB</kbd> key has been pressed. This event object can be used to check whether user pressed
  785. * <kbd>TAB</kbd> or <kbd>SHIFT</kbd> + <kbd>TAB</kbd>.
  786. *
  787. * @type {Object|Function}
  788. * @default {row: 0, col: 1}
  789. *
  790. * @example
  791. * ```js
  792. * // move selection 2 cells away after TAB pressed.
  793. * tabMoves: {row: 2, col: 2},
  794. * // or as a function
  795. * tabMoves: function(event) {
  796. * return {row: 2, col: 2};
  797. * },
  798. * ```
  799. */
  800. tabMoves: { row: 0, col: 1 },
  801. /**
  802. * If `true`, pressing <kbd>TAB</kbd> or right arrow in the last column will move to first column in next row.
  803. *
  804. * @type {Boolean}
  805. * @default true
  806. *
  807. * @example
  808. * ```js
  809. * // stop TAB key navigation on the last column
  810. * autoWrapRow: false,
  811. * ```
  812. */
  813. autoWrapRow: true,
  814. /**
  815. * If `true`, pressing <kbd>ENTER</kbd> or down arrow in the last row will move to the first row in the next column.
  816. *
  817. * @type {Boolean}
  818. * @default true
  819. *
  820. * @example
  821. * ```js
  822. * // stop ENTER key navigation on the last row
  823. * autoWrapCol: false,
  824. * ```
  825. */
  826. autoWrapCol: true,
  827. /**
  828. * @description
  829. * Turns on saving the state of column sorting, column positions and column sizes in local storage.
  830. *
  831. * You can save any sort of data in local storage to preserve table state between page reloads. In order to enable
  832. * data storage mechanism, `persistentState` option must be set to `true` (you can set it either during Handsontable
  833. * initialization or using the `updateSettings` method). When `persistentState` is enabled it exposes 3 hooks:
  834. *
  835. * __persistentStateSave__ (key: String, value: Mixed)
  836. *
  837. * * Saves value under given key in browser local storage.
  838. *
  839. * __persistentStateLoad__ (key: String, valuePlaceholder: Object)
  840. *
  841. * * Loads `value`, saved under given key, form browser local storage. The loaded `value` will be saved in
  842. * `valuePlaceholder.value` (this is due to specific behaviour of `Hooks.run()` method). If no value have
  843. * been saved under key `valuePlaceholder.value` will be `undefined`.
  844. *
  845. * __persistentStateReset__ (key: String)
  846. *
  847. * * Clears the value saved under `key`. If no `key` is given, all values associated with table will be cleared.
  848. *
  849. * __Note:__ The main reason behind using `persistentState` hooks rather than regular LocalStorage API is that it
  850. * ensures separation of data stored by multiple Handsontable instances. In other words, if you have two (or more)
  851. * instances of Handsontable on one page, data saved by one instance won't be accessible by the second instance.
  852. * Those two instances can store data under the same key and no data would be overwritten.
  853. *
  854. * __Important:__ In order for the data separation to work properly, make sure that each instance of Handsontable has a unique `id`.
  855. *
  856. * @type {Boolean}
  857. * @default false
  858. *
  859. * @example
  860. * ```js
  861. * // enable the persistent state plugin
  862. * persistentState: true,
  863. * ```
  864. */
  865. persistentState: void 0,
  866. /**
  867. * Class name for all visible rows in the current selection.
  868. *
  869. * @type {String}
  870. * @default undefined
  871. *
  872. * @example
  873. * ```js
  874. * // This will add a 'currentRow' class name to appropriate table cells.
  875. * currentRowClassName: 'currentRow',
  876. * ```
  877. */
  878. currentRowClassName: void 0,
  879. /**
  880. * Class name for all visible columns in the current selection.
  881. *
  882. * @type {String}
  883. * @default undefined
  884. *
  885. * @example
  886. * ```js
  887. * // This will add a 'currentColumn' class name to appropriate table cells.
  888. * currentColClassName: 'currentColumn',
  889. * ```
  890. */
  891. currentColClassName: void 0,
  892. /**
  893. * Class name for all visible headers in current selection.
  894. *
  895. * @type {String}
  896. * @default 'ht__highlight'
  897. *
  898. * @example
  899. * ```js
  900. * // This will add a 'ht__highlight' class name to appropriate table headers.
  901. * currentHeaderClassName: 'ht__highlight',
  902. * ```
  903. */
  904. currentHeaderClassName: 'ht__highlight',
  905. /**
  906. * Class name for all active headers in selections. The header will be marked with this class name
  907. * only when a whole column or row will be selected.
  908. *
  909. * @type {String}
  910. * @since 0.38.2
  911. * @default 'ht__active_highlight'
  912. *
  913. * @example
  914. * ```js
  915. * // this will add a 'ht__active_highlight' class name to appropriate table headers.
  916. * activeHeaderClassName: 'ht__active_highlight',
  917. * ```
  918. */
  919. activeHeaderClassName: 'ht__active_highlight',
  920. /**
  921. * Class name for the Handsontable container element.
  922. *
  923. * @type {String|String[]}
  924. * @default undefined
  925. *
  926. * @example
  927. * ```js
  928. * // set custom class for table container
  929. * className: 'your__class--name',
  930. *
  931. * // or
  932. * className: ['first-class-name', 'second-class-name'],
  933. * ```
  934. */
  935. className: void 0,
  936. /**
  937. * Class name for all tables inside container element.
  938. *
  939. * @type {String|String[]}
  940. * @default undefined
  941. *
  942. * @example
  943. * ```js
  944. * // set custom class for table element
  945. * tableClassName: 'your__class--name',
  946. *
  947. * // or
  948. * tableClassName: ['first-class-name', 'second-class-name'],
  949. * ```
  950. */
  951. tableClassName: void 0,
  952. /**
  953. * @description
  954. * Defines how the columns react, when the declared table width is different than the calculated sum of all column widths.
  955. * [See more](https://docs.handsontable.com/demo-stretching.html) mode. Possible values:
  956. * * `'none'` Disable stretching
  957. * * `'last'` Stretch only the last column
  958. * * `'all'` Stretch all the columns evenly
  959. *
  960. * @type {String}
  961. * @default 'none'
  962. *
  963. * @example
  964. * ```js
  965. * // fit table to the container
  966. * stretchH: 'all',
  967. * ```
  968. */
  969. stretchH: 'none',
  970. /**
  971. * Overwrites the default `isEmptyRow` method, which checks if row at the provided index is empty.
  972. *
  973. * @type {Function}
  974. * @param {Number} row Visual row index.
  975. * @returns {Boolean}
  976. *
  977. * @example
  978. * ```js
  979. * // define custom checks for empty row
  980. * isEmptyRow: function(row) {
  981. * ...
  982. * },
  983. * ```
  984. */
  985. isEmptyRow(row) {
  986. let col;
  987. let colLen;
  988. let value;
  989. let meta;
  990. for (col = 0, colLen = this.countCols(); col < colLen; col++) {
  991. value = this.getDataAtCell(row, col);
  992. if (value !== '' && value !== null && isDefined(value)) {
  993. if (typeof value === 'object') {
  994. meta = this.getCellMeta(row, col);
  995. return isObjectEqual(this.getSchema()[meta.prop], value);
  996. }
  997. return false;
  998. }
  999. }
  1000. return true;
  1001. },
  1002. /**
  1003. * Overwrites the default `isEmptyCol` method, which checks if column at the provided index is empty.
  1004. *
  1005. * @type {Function}
  1006. * @param {Number} column Visual column index
  1007. * @returns {Boolean}
  1008. *
  1009. * @example
  1010. * ```js
  1011. * // define custom checks for empty column
  1012. * isEmptyCol: function(column) {
  1013. * return false;
  1014. * },
  1015. * ```
  1016. */
  1017. isEmptyCol(col) {
  1018. let row;
  1019. let rowLen;
  1020. let value;
  1021. for (row = 0, rowLen = this.countRows(); row < rowLen; row++) {
  1022. value = this.getDataAtCell(row, col);
  1023. if (value !== '' && value !== null && isDefined(value)) {
  1024. return false;
  1025. }
  1026. }
  1027. return true;
  1028. },
  1029. /**
  1030. * When set to `true`, the table is re-rendered when it is detected that it was made visible in DOM.
  1031. *
  1032. * @type {Boolean}
  1033. * @default true
  1034. *
  1035. * @example
  1036. * ```js
  1037. * // don't rerender the table on visibility changes
  1038. * observeDOMVisibility: false,
  1039. * ```
  1040. */
  1041. observeDOMVisibility: true,
  1042. /**
  1043. * If set to `true`, Handsontable will accept values that were marked as invalid by the cell `validator`. It will
  1044. * result with *invalid* cells being treated as *valid* (will save the *invalid* value into the Handsontable data source).
  1045. * If set to `false`, Handsontable will *not* accept the invalid values and won't allow the user to close the editor.
  1046. * This option will be particularly useful when used with the Autocomplete's `strict` mode.
  1047. *
  1048. * @type {Boolean}
  1049. * @default true
  1050. *
  1051. * @example
  1052. * ```js
  1053. * // don't save the invalid values
  1054. * allowInvalid: false,
  1055. * ```
  1056. */
  1057. allowInvalid: true,
  1058. /**
  1059. * If set to `true`, Handsontable will accept values that are empty (`null`, `undefined` or `''`). If set to `false`,
  1060. * Handsontable will *not* accept the empty values and mark cell as invalid.
  1061. *
  1062. * @type {Boolean}
  1063. * @default true
  1064. *
  1065. * @example
  1066. * ```js
  1067. * // allow empty values for all cells (whole table)
  1068. * allowEmpty: true,
  1069. *
  1070. * // or
  1071. * columns: [
  1072. * {
  1073. * data: 'date',
  1074. * dateFormat: 'DD/MM/YYYY',
  1075. * // allow empty values only for the 'date' column
  1076. * allowEmpty: true
  1077. * }
  1078. * ],
  1079. * ```
  1080. */
  1081. allowEmpty: true,
  1082. /**
  1083. * CSS class name for cells that did not pass validation.
  1084. *
  1085. * @type {String}
  1086. * @default 'htInvalid'
  1087. *
  1088. * @example
  1089. * ```js
  1090. * // set custom validation error class
  1091. * invalidCellClassName: 'highlight--error',
  1092. * ```
  1093. */
  1094. invalidCellClassName: 'htInvalid',
  1095. /**
  1096. * When set to an non-empty string, displayed as the cell content for empty cells. If a value of a different type is provided,
  1097. * it will be stringified and applied as a string.
  1098. *
  1099. * @type {String}
  1100. * @default undefined
  1101. *
  1102. * @example
  1103. * ```js
  1104. * // add custom placeholder content to empty cells
  1105. * placeholder: 'Empty Cell',
  1106. * ```
  1107. */
  1108. placeholder: void 0,
  1109. /**
  1110. * CSS class name for cells that have a placeholder in use.
  1111. *
  1112. * @type {String}
  1113. * @default 'htPlaceholder'
  1114. *
  1115. * @example
  1116. * ```js
  1117. * // set custom placeholder class
  1118. * placeholderCellClassName: 'has-placeholder',
  1119. * ```
  1120. */
  1121. placeholderCellClassName: 'htPlaceholder',
  1122. /**
  1123. * CSS class name for read-only cells.
  1124. *
  1125. * @type {String}
  1126. * @default 'htDimmed'
  1127. *
  1128. * @example
  1129. * ```js
  1130. * // set custom read-only class
  1131. * readOnlyCellClassName: 'is-readOnly',
  1132. * ```
  1133. */
  1134. readOnlyCellClassName: 'htDimmed',
  1135. /**
  1136. * @description
  1137. * If a string is provided, it may be one of the following predefined values:
  1138. * * `autocomplete`,
  1139. * * `checkbox`,
  1140. * * `html`,
  1141. * * `numeric`,
  1142. * * `password`.
  1143. * * `text`.
  1144. *
  1145. * 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
  1146. * configuration.
  1147. *
  1148. * If a function is provided, it will receive the following arguments:
  1149. * ```js
  1150. * function(instance, TD, row, col, prop, value, cellProperties) {}
  1151. * ```
  1152. *
  1153. * You can read more about custom renderes [in the documentation](https://docs.handsontable.com/demo-custom-renderers.html).
  1154. *
  1155. * @type {String|Function}
  1156. * @default undefined
  1157. *
  1158. * @example
  1159. * ```js
  1160. * // register custom renderer
  1161. * Handsontable.renderers.registerRenderer('my.renderer', function(instance, TD, row, col, prop, value, cellProperties) {
  1162. * TD.innerHTML = value;
  1163. * });
  1164. *
  1165. * // use it for selected column:
  1166. * columns: [
  1167. * {
  1168. * // as a string with the name of build in renderer
  1169. * renderer: 'autocomplete',
  1170. * editor: 'select'
  1171. * },
  1172. * {
  1173. * // as an alias to custom renderer registered above
  1174. * renderer: 'my.renderer'
  1175. * },
  1176. * {
  1177. * // renderer as custom function
  1178. * renderer: function(hotInstance, TD, row, col, prop, value, cellProperties) {
  1179. * TD.style.color = 'blue';
  1180. * TD.innerHTML = value;
  1181. * }
  1182. * }
  1183. * ],
  1184. * ```
  1185. */
  1186. renderer: void 0,
  1187. /**
  1188. * CSS class name added to the commented cells.
  1189. *
  1190. * @type {String}
  1191. * @default 'htCommentCell'
  1192. *
  1193. * @example
  1194. * ```js
  1195. * // set custom class for commented cells
  1196. * commentedCellClassName: 'has-comment',
  1197. * ```
  1198. */
  1199. commentedCellClassName: 'htCommentCell',
  1200. /**
  1201. * If set to `true`, it enables the browser's native selection of a fragment of the text within a single cell, between
  1202. * adjacent cells or in a whole table. If set to `'cell'`, it enables the possibility of selecting a fragment of the
  1203. * text within a single cell's body.
  1204. *
  1205. * @type {Boolean|String}
  1206. * @default false
  1207. *
  1208. * @example
  1209. * ```js
  1210. * // enable text selection within table
  1211. * fragmentSelection: true,
  1212. *
  1213. * // or
  1214. * // enable text selection within cells only
  1215. * fragmentSelection: 'cell',
  1216. * ```
  1217. */
  1218. fragmentSelection: false,
  1219. /**
  1220. * @description
  1221. * Makes cell [read only](https://docs.handsontable.com/demo-read-only.html).
  1222. *
  1223. * @type {Boolean}
  1224. * @default false
  1225. *
  1226. * @example
  1227. * ```js
  1228. * // set cell as read only
  1229. * readOnly: true,
  1230. * ```
  1231. */
  1232. readOnly: false,
  1233. /**
  1234. * @description
  1235. * When added to a `column` property, it skips the column on paste and pastes the data on the next column to the right.
  1236. *
  1237. * @type {Boolean}
  1238. * @default false
  1239. *
  1240. * @example
  1241. * ```js
  1242. * columns: [
  1243. * {
  1244. * // don't paste data to this column
  1245. * skipColumnOnPaste: true
  1246. * }
  1247. * ],
  1248. * ```
  1249. */
  1250. skipColumnOnPaste: false,
  1251. /**
  1252. * @description
  1253. * Setting to `true` enables the {@link Search} plugin (see [demo](https://docs.handsontable.com/demo-search-for-values.html)).
  1254. *
  1255. * @type {Boolean}
  1256. * @default false
  1257. *
  1258. * @example
  1259. * ```js
  1260. * // enable search plugin
  1261. * search: true,
  1262. *
  1263. * // or
  1264. * // as an object with detailed configuration
  1265. * search: {
  1266. * searchResultClass: 'customClass',
  1267. * queryMethod: function(queryStr, value) {
  1268. * ...
  1269. * },
  1270. * callback: function(instance, row, column, value, result) {
  1271. * ...
  1272. * }
  1273. * }
  1274. * ```
  1275. */
  1276. search: false,
  1277. /**
  1278. * @description
  1279. * Shortcut to define the combination of the cell renderer, editor and validator for the column, cell or whole table.
  1280. *
  1281. * Possible values:
  1282. * * [autocomplete](https://docs.handsontable.com/demo-autocomplete.html)
  1283. * * [checkbox](https://docs.handsontable.com/demo-checkbox.html)
  1284. * * [date](https://docs.handsontable.com/demo-date.html)
  1285. * * [dropdown](https://docs.handsontable.com/demo-dropdown.html)
  1286. * * [handsontable](https://docs.handsontable.com/demo-handsontable.html)
  1287. * * [numeric](https://docs.handsontable.com/demo-numeric.html)
  1288. * * [password](https://docs.handsontable.com/demo-password.html)
  1289. * * text
  1290. * * [time](https://docs.handsontable.com/demo-time.html)
  1291. *
  1292. * Or you can register the custom cell type under specified name and use
  1293. * its name as an alias in your configuration.
  1294. *
  1295. * @type {String}
  1296. * @default 'text'
  1297. *
  1298. * @example
  1299. * ```js
  1300. * // register custom cell type:
  1301. * Handsontable.cellTypes.registerCellType('my.type', {
  1302. * editor: MyEditorClass,
  1303. * renderer: function(hot, td, row, col, prop, value, cellProperties) {
  1304. * td.innerHTML = value;
  1305. * },
  1306. * validator: function(value, callback) {
  1307. * callback(value === 'foo' ? true : false);
  1308. * }
  1309. * });
  1310. *
  1311. * // use it in column settings:
  1312. * columns: [
  1313. * {
  1314. * type: 'text'
  1315. * },
  1316. * {
  1317. * // an alias to custom type
  1318. * type: 'my.type'
  1319. * },
  1320. * {
  1321. * type: 'checkbox'
  1322. * }
  1323. * ],
  1324. * ```
  1325. */
  1326. type: 'text',
  1327. /**
  1328. * @description
  1329. * Makes a cell copyable (pressing <kbd>CTRL</kbd> + <kbd>C</kbd> on your keyboard moves its value to system clipboard).
  1330. *
  1331. * __Note:__ this setting is `false` by default for cells with type `password`.
  1332. *
  1333. * @type {Boolean}
  1334. * @default true
  1335. *
  1336. * @example
  1337. * ```js
  1338. * cells: [
  1339. * {
  1340. * cell: 0,
  1341. * row: 0,
  1342. * // cell with coordinates (0, 0) can't be copied
  1343. * copyable: false,
  1344. * }
  1345. * ],
  1346. * ```
  1347. */
  1348. copyable: true,
  1349. /**
  1350. * Defines the editor for the table/column/cell.
  1351. *
  1352. * If a string is provided, it may be one of the following predefined values:
  1353. * * [autocomplete](https://docs.handsontable.com/demo-autocomplete.html)
  1354. * * [checkbox](https://docs.handsontable.com/demo-checkbox.html)
  1355. * * [date](https://docs.handsontable.com/demo-date.html)
  1356. * * [dropdown](https://docs.handsontable.com/demo-dropdown.html)
  1357. * * [handsontable](https://docs.handsontable.com/demo-handsontable.html)
  1358. * * [mobile](https://docs.handsontable.com/demo-mobiles-and-tablets.html)
  1359. * * [password](https://docs.handsontable.com/demo-password.html)
  1360. * * [select](https://docs.handsontable.com/demo-select.html)
  1361. * * text
  1362. *
  1363. * 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
  1364. * configuration.
  1365. *
  1366. * To disable cell editing completely set `editor` property to `false`.
  1367. *
  1368. * @type {String|Function|Boolean}
  1369. * @default undefined
  1370. *
  1371. * @example
  1372. * ```js
  1373. * columns: [
  1374. * {
  1375. * // set editor for the first column
  1376. * editor: 'select'
  1377. * },
  1378. * {
  1379. * // disable editor for the second column
  1380. * editor: false
  1381. * }
  1382. * ],
  1383. * ```
  1384. */
  1385. editor: void 0,
  1386. /**
  1387. * Control number of choices for the autocomplete (or dropdown) typed cells. After exceeding it, a scrollbar for the
  1388. * dropdown list of choices will appear.
  1389. *
  1390. * @type {Number}
  1391. * @default 10
  1392. *
  1393. * @example
  1394. * ```js
  1395. * columns: [
  1396. * {
  1397. * type: 'autocomplete',
  1398. * // set autocomplete options list height
  1399. * visibleRows: 15,
  1400. * }
  1401. * ],
  1402. * ```
  1403. */
  1404. visibleRows: 10,
  1405. /**
  1406. * Makes autocomplete or dropdown width the same as the edited cell width. If `false` then editor will be scaled
  1407. * according to its content.
  1408. *
  1409. * @type {Boolean}
  1410. * @default true
  1411. *
  1412. * @example
  1413. * ```js
  1414. * columns: [
  1415. * {
  1416. * type: 'autocomplete',
  1417. * // don't trim dropdown width with column width
  1418. * trimDropdown: false,
  1419. * }
  1420. * ],
  1421. * ```
  1422. */
  1423. trimDropdown: true,
  1424. /**
  1425. * Setting to `true` enables the debug mode, currently used to test the correctness of the row and column
  1426. * header fixed positioning on a layer above the master table.
  1427. *
  1428. * @type {Boolean}
  1429. * @default false
  1430. *
  1431. * @example
  1432. * ```js
  1433. * // enable debug mode
  1434. * debug: true,
  1435. * ```
  1436. */
  1437. debug: false,
  1438. /**
  1439. * When set to `true`, the text of the cell content is wrapped if it does not fit in the fixed column width.
  1440. *
  1441. * @type {Boolean}
  1442. * @default true
  1443. *
  1444. * @example
  1445. * ```js
  1446. * colWidths: 100,
  1447. * columns: [
  1448. * {
  1449. * // fixed column width is set but don't wrap the content
  1450. * wordWrap: false,
  1451. * }
  1452. * ],
  1453. * ```
  1454. */
  1455. wordWrap: true,
  1456. /**
  1457. * CSS class name added to cells with cell meta `wordWrap: false`.
  1458. *
  1459. * @type {String}
  1460. * @default 'htNoWrap'
  1461. *
  1462. * @example
  1463. * ```js
  1464. * // set custom class for cells which content won't be wrapped
  1465. * noWordWrapClassName: 'is-noWrapCell',
  1466. * ```
  1467. */
  1468. noWordWrapClassName: 'htNoWrap',
  1469. /**
  1470. * @description
  1471. * Defines if the right-click context menu should be enabled. Context menu allows to create new row or column at any
  1472. * place in the grid among [other features](https://docs.handsontable.com/demo-context-menu.html).
  1473. * Possible values:
  1474. * * `true` (to enable default options),
  1475. * * `false` (to disable completely)
  1476. * * an array of [predefined options](https://docs.handsontable.com/demo-context-menu.html#page-specific),
  1477. * * an object [with defined structure](https://docs.handsontable.com/demo-context-menu.html#page-custom)
  1478. *
  1479. * See [the context menu demo](https://docs.handsontable.com/demo-context-menu.html) for examples.
  1480. *
  1481. * @type {Boolean|String[]|Object}
  1482. * @default undefined
  1483. *
  1484. * @example
  1485. * ```js
  1486. * // as a boolean
  1487. * contextMenu: true,
  1488. *
  1489. * // as an array
  1490. * contextMenu: ['row_above', 'row_below', '--------', 'undo', 'redo'],
  1491. *
  1492. * // as an object (`name` attribute is required in the custom keys)
  1493. * contextMenu: {
  1494. * items: {
  1495. * "option1": {
  1496. * name: "option1"
  1497. * },
  1498. * "option2": {
  1499. * name: "option2",
  1500. * submenu: {
  1501. * items: [
  1502. * {
  1503. * key: "option2:suboption1",
  1504. * name: "option2:suboption1",
  1505. * callback: function(key, options) {
  1506. * ...
  1507. * }
  1508. * },
  1509. * ...
  1510. * ]
  1511. * }
  1512. * }
  1513. * }
  1514. * },
  1515. * ```
  1516. */
  1517. contextMenu: void 0,
  1518. /**
  1519. * Disables or enables the copy/paste functionality.
  1520. *
  1521. * @type {Boolean}
  1522. * @default true
  1523. *
  1524. * @example
  1525. * ```js
  1526. * // disable copy and paste
  1527. * copyPaste: false,
  1528. * ```
  1529. */
  1530. copyPaste: true,
  1531. /**
  1532. * If `true`, undo/redo functionality is enabled.
  1533. *
  1534. * @type {Boolean}
  1535. * @default undefined
  1536. *
  1537. * @example
  1538. * ```js
  1539. * // enable undo and redo
  1540. * undo: true,
  1541. * ```
  1542. */
  1543. undo: void 0,
  1544. /**
  1545. * @description
  1546. * Turns on [Column sorting](https://docs.handsontable.com/demo-sorting-data.html). Can be either a boolean (`true` / `false`) or an object with a declared sorting options:
  1547. * * `initialConfig` - Object with predefined keys:
  1548. * * `column` - sorted column
  1549. * * `sortOrder` - order in which column will be sorted
  1550. * * `'asc'` = ascending
  1551. * * `'desc'` = descending
  1552. * * `indicator` - display status for sorting order indicator (an arrow icon in the column header, specifying the sorting order).
  1553. * * `true` = show sort indicator for sorted columns
  1554. * * `false` = don't show sort indicator for sorted columns
  1555. * * `headerAction` - allow to click on the headers to sort
  1556. * * `true` = turn on possibility to click on the headers to sort
  1557. * * `false` = turn off possibility to click on the headers to sort
  1558. * * `sortEmptyCells` - how empty values should be handled
  1559. * * `true` = the table sorts empty cells
  1560. * * `false` = the table moves all empty cells to the end of the table
  1561. * * `compareFunctionFactory` - curry function returning compare function; compare function should work in the same way as function which is handled by native `Array.sort` method); please take a look at below examples for more information.
  1562. *
  1563. * @type {Boolean|Object}
  1564. * @default undefined
  1565. *
  1566. * @example
  1567. * ```js
  1568. * // as boolean
  1569. * columnSorting: true
  1570. *
  1571. * // as an object with initial sort config (sort ascending for column at index 1)
  1572. * columnSorting: {
  1573. * initialConfig: {
  1574. * column: 1,
  1575. * sortOrder: 'asc'
  1576. * }
  1577. * }
  1578. *
  1579. * // as an object which define specific sorting options for all columns
  1580. * columnSorting: {
  1581. * sortEmptyCells: true, // true = the table sorts empty cells, false = the table moves all empty cells to the end of the table
  1582. * indicator: true, // true = shows indicator for all columns, false = don't show indicator for columns
  1583. * headerAction: false, // true = allow to click on the headers to sort, false = turn off possibility to click on the headers to sort
  1584. * compareFunctionFactory: function(sortOrder, columnMeta) {
  1585. * return function(value, nextValue) {
  1586. * // Some value comparisons which will return -1, 0 or 1...
  1587. * }
  1588. * }
  1589. * }```
  1590. */
  1591. columnSorting: void 0,
  1592. /**
  1593. * Turns on [Manual column move](https://docs.handsontable.com/demo-moving-rows-and-columns.html), if set to a boolean or define initial column order (as an array of column indexes).
  1594. *
  1595. * @type {Boolean|Number[]}
  1596. * @default undefined
  1597. *
  1598. * @example
  1599. * ```js
  1600. * // as a boolean to enable column move
  1601. * manualColumnMove: true,
  1602. *
  1603. * // as a array with initial order
  1604. * // (move column index at 0 to 1 and move column index at 1 to 4)
  1605. * manualColumnMove: [1, 4],
  1606. * ```
  1607. */
  1608. manualColumnMove: void 0,
  1609. /**
  1610. * @description
  1611. * Turns on [Manual column resize](https://docs.handsontable.com/demo-resizing.html), if set to a boolean or define initial column resized widths (an an array of widths).
  1612. *
  1613. * @type {Boolean|Number[]}
  1614. * @default undefined
  1615. *
  1616. * @example
  1617. * ```js
  1618. * // as a boolean to enable column resize
  1619. * manualColumnResize: true,
  1620. *
  1621. * // as a array with initial widths
  1622. * // (column at 0 index has 40px and column at 1 index has 50px)
  1623. * manualColumnResize: [40, 50],
  1624. * ```
  1625. */
  1626. manualColumnResize: void 0,
  1627. /**
  1628. * @description
  1629. * Turns on [Manual row move](https://docs.handsontable.com/demo-moving-rows-and-columns.html), if set to a boolean or define initial row order (as an array of row indexes).
  1630. *
  1631. * @type {Boolean|Number[]}
  1632. * @default undefined
  1633. *
  1634. * @example
  1635. * ```js
  1636. * // as a boolean
  1637. * manualRowMove: true,
  1638. *
  1639. * // as a array with initial order
  1640. * // (move row index at 0 to 1 and move row index at 1 to 4)
  1641. * manualRowMove: [1, 4],
  1642. * ```
  1643. */
  1644. manualRowMove: void 0,
  1645. /**
  1646. * @description
  1647. * Turns on [Manual row resize](https://docs.handsontable.com/demo-resizing.html), if set to a boolean or define initial row resized heights (as an array of heights).
  1648. *
  1649. * @type {Boolean|Number[]}
  1650. * @default undefined
  1651. *
  1652. * @example
  1653. * ```js
  1654. * // as a boolean to enable row resize
  1655. * manualRowResize: true,
  1656. *
  1657. * // as an array to set initial heights
  1658. * // (row at 0 index has 40px and row at 1 index has 50px)
  1659. * manualRowResize: [40, 50],
  1660. * ```
  1661. */
  1662. manualRowResize: void 0,
  1663. /**
  1664. * @description
  1665. * If set to `true`, it enables a possibility to merge cells. If set to an array of objects, it merges the cells provided
  1666. * in the objects (see the example below). More information on [the demo page](https://docs.handsontable.com/demo-merge-cells.html).
  1667. *
  1668. * @type {Boolean|Object[]}
  1669. * @default false
  1670. *
  1671. * @example
  1672. * ```js
  1673. * // enables the mergeCells plugin
  1674. * margeCells: true,
  1675. *
  1676. * // declares a list of merged sections
  1677. * mergeCells: [
  1678. * // rowspan and colspan properties declare the width and height of a merged section in cells
  1679. * {row: 1, col: 1, rowspan: 3, colspan: 3},
  1680. * {row: 3, col: 4, rowspan: 2, colspan: 2},
  1681. * {row: 5, col: 6, rowspan: 3, colspan: 3}
  1682. * ],
  1683. * ```
  1684. */
  1685. mergeCells: false,
  1686. /**
  1687. * @description
  1688. * Turns on [Multi-column sorting](https://docs.handsontable.com/pro/demo-multicolumn-sorting.html). Can be either a boolean (`true` / `false`) or an object with a declared sorting options:
  1689. * * `initialConfig` - Array containing objects, every with predefined keys:
  1690. * * `column` - sorted column
  1691. * * `sortOrder` - order in which column will be sorted
  1692. * * `'asc'` = ascending
  1693. * * `'desc'` = descending
  1694. * * `indicator` - display status for sorting order indicator (an arrow icon in the column header, specifying the sorting order).
  1695. * * `true` = show sort indicator for sorted columns
  1696. * * `false` = don't show sort indicator for sorted columns
  1697. * * `headerAction` - allow to click on the headers to sort
  1698. * * `true` = turn on possibility to click on the headers to sort
  1699. * * `false` = turn off possibility to click on the headers to sort
  1700. * * `sortEmptyCells` - how empty values should be handled
  1701. * * `true` = the table sorts empty cells
  1702. * * `false` = the table moves all empty cells to the end of the table
  1703. * * `compareFunctionFactory` - curry function returning compare function; compare function should work in the same way as function which is handled by native `Array.sort` method); please take a look at below examples for more information.
  1704. *
  1705. * @pro
  1706. * @type {Boolean|Object}
  1707. * @default undefined
  1708. *
  1709. * @example
  1710. * ```js
  1711. * // as boolean
  1712. * multiColumnSorting: true
  1713. *
  1714. * // as an object with initial sort config (sort ascending for column at index 1 and then sort descending for column at index 0)
  1715. * multiColumnSorting: {
  1716. * initialConfig: [{
  1717. * column: 1,
  1718. * sortOrder: 'asc'
  1719. * }, {
  1720. * column: 0,
  1721. * sortOrder: 'desc'
  1722. * }]
  1723. * }
  1724. *
  1725. * // as an object which define specific sorting options for all columns
  1726. * multiColumnSorting: {
  1727. * sortEmptyCells: true, // true = the table sorts empty cells, false = the table moves all empty cells to the end of the table
  1728. * indicator: true, // true = shows indicator for all columns, false = don't show indicator for columns
  1729. * headerAction: false, // true = allow to click on the headers to sort, false = turn off possibility to click on the headers to sort
  1730. * compareFunctionFactory: function(sortOrder, columnMeta) {
  1731. * return function(value, nextValue) {
  1732. * // Some value comparisons which will return -1, 0 or 1...
  1733. * }
  1734. * }
  1735. * }```
  1736. */
  1737. multiColumnSorting: void 0,
  1738. /**
  1739. * @description
  1740. * Number of rows to be rendered outside of the visible part of the table. By default, it's set to `'auto'`, which
  1741. * makes Handsontable to attempt to calculate the best offset performance-wise.
  1742. *
  1743. * You may test out different values to find the best one that works for your specific implementation.
  1744. *
  1745. * @type {Number|String}
  1746. * @default 'auto'
  1747. *
  1748. * @example
  1749. * ```js
  1750. * viewportRowRenderingOffset: 70,
  1751. * ```
  1752. */
  1753. viewportRowRenderingOffset: 'auto',
  1754. /**
  1755. * @description
  1756. * Number of columns to be rendered outside of the visible part of the table. By default, it's set to `'auto'`, which
  1757. * makes Handsontable try calculating the best offset performance-wise.
  1758. *
  1759. * You may experiment with the value to find the one that works best for your specific implementation.
  1760. *
  1761. * @type {Number|String}
  1762. * @default 'auto'
  1763. *
  1764. * @example
  1765. * ```js
  1766. * viewportColumnRenderingOffset: 70,
  1767. * ```
  1768. */
  1769. viewportColumnRenderingOffset: 'auto',
  1770. /**
  1771. * @description
  1772. * A function, regular expression or a string, which will be used in the process of cell validation. If a function is
  1773. * used, be sure to execute the callback argument with either `true` (`callback(true)`) if the validation passed
  1774. * or with `false` (`callback(false)`), if the validation failed.
  1775. *
  1776. * __Note__, that `this` in the function points to the `cellProperties` object.
  1777. *
  1778. * If a string is provided, it may be one of the following predefined values:
  1779. * * `autocomplete`,
  1780. * * `date`,
  1781. * * `numeric`,
  1782. * * `time`.
  1783. *
  1784. * Or you can [register](https://docs.handsontable.com/demo-data-validation.html) the validator function under specified name and use its name as an alias in your
  1785. * configuration.
  1786. *
  1787. * See more [in the demo](https://docs.handsontable.com/demo-data-validation.html).
  1788. *
  1789. * @type {Function|RegExp|String}
  1790. * @default undefined
  1791. *
  1792. * @example
  1793. * ```js
  1794. * columns: [
  1795. * {
  1796. * // as a function
  1797. * validator: function(value, callback) {
  1798. * ...
  1799. * }
  1800. * },
  1801. * {
  1802. * // regular expression
  1803. * validator: /^[0-9]$/
  1804. * },
  1805. * {
  1806. * // as a string
  1807. * validator: 'numeric'
  1808. * }
  1809. * ],
  1810. * ```
  1811. */
  1812. validator: void 0,
  1813. /**
  1814. * @description
  1815. * Disables visual cells selection.
  1816. *
  1817. * Possible values:
  1818. * * `true` - Disables any type of visual selection (current and area selection),
  1819. * * `false` - Enables any type of visual selection. This is default value.
  1820. * * `'current'` - Disables the selection of a currently selected cell, the area selection is still present.
  1821. * * `'area'` - Disables the area selection, the currently selected cell selection is still present.
  1822. * * `'header'` - Disables the headers selection, the currently selected cell selection is still present.
  1823. *
  1824. * @type {Boolean|String|String[]}
  1825. * @default false
  1826. *
  1827. * @example
  1828. * ```js
  1829. * // as a boolean
  1830. * disableVisualSelection: true,
  1831. *
  1832. * // as a string ('current', 'area' or 'header')
  1833. * disableVisualSelection: 'current',
  1834. *
  1835. * // as an array
  1836. * disableVisualSelection: ['current', 'area'],
  1837. * ```
  1838. */
  1839. disableVisualSelection: false,
  1840. /**
  1841. * Disables or enables {@link ManualColumnFreeze} plugin.
  1842. *
  1843. * @type {Boolean}
  1844. * @default undefined
  1845. *
  1846. * @example
  1847. * ```js
  1848. * // enable fixed columns
  1849. * manualColumnFreeze: true,
  1850. * ```
  1851. */
  1852. manualColumnFreeze: void 0,
  1853. /**
  1854. * Defines whether Handsontable should trim the whitespace at the beginning and the end of the cell contents.
  1855. *
  1856. * @type {Boolean}
  1857. * @default true
  1858. *
  1859. * @example
  1860. * ```js
  1861. * columns: [
  1862. * {
  1863. * // don't remove whitespace
  1864. * trimWhitespace: false
  1865. * }
  1866. * ]
  1867. * ```
  1868. */
  1869. trimWhitespace: true,
  1870. /**
  1871. * Defines data source for Autocomplete or Dropdown cell types.
  1872. *
  1873. * @type {Array|Function}
  1874. * @default undefined
  1875. *
  1876. * @example
  1877. * ```js
  1878. * // source as a array
  1879. * columns: [{
  1880. * type: 'autocomplete',
  1881. * source: ['A', 'B', 'C', 'D']
  1882. * }],
  1883. *
  1884. * // source as a function
  1885. * columns: [{
  1886. * type: 'autocomplete',
  1887. * source: function(query, callback) {
  1888. * fetch('https://example.com/query?q=' + query, function(response) {
  1889. * callback(response.items);
  1890. * })
  1891. * }
  1892. * }],
  1893. * ```
  1894. */
  1895. source: void 0,
  1896. /**
  1897. * @description
  1898. * Defines the column header name.
  1899. *
  1900. * @type {String}
  1901. * @default undefined
  1902. *
  1903. * @example
  1904. * ```js
  1905. * // set header names for every column
  1906. * columns: [
  1907. * {
  1908. * title: 'First name',
  1909. * type: 'text',
  1910. * },
  1911. * {
  1912. * title: 'Last name',
  1913. * type: 'text',
  1914. * }
  1915. * ],
  1916. * ```
  1917. */
  1918. title: void 0,
  1919. /**
  1920. * Data template for `'checkbox'` type when checkbox is checked.
  1921. *
  1922. * @type {Boolean|String|Number}
  1923. * @default true
  1924. *
  1925. * @example
  1926. * ```js
  1927. * checkedTemplate: 'good'
  1928. *
  1929. * // if a checkbox-typed cell is checked, then getDataAtCell(x, y),
  1930. * // where x and y are the coordinates of the cell will return 'good'.
  1931. * ```
  1932. */
  1933. checkedTemplate: void 0,
  1934. /**
  1935. * Data template for `'checkbox'` type when checkbox is unchecked.
  1936. *
  1937. * @type {Boolean|String|Number}
  1938. * @default false
  1939. *
  1940. * @example
  1941. * ```js
  1942. * uncheckedTemplate: 'bad'
  1943. *
  1944. * // if a checkbox-typed cell is not checked, then getDataAtCell(x,y),
  1945. * // where x and y are the coordinates of the cell will return 'bad'.
  1946. * ```
  1947. */
  1948. uncheckedTemplate: void 0,
  1949. /**
  1950. * @description
  1951. * Object which describes if renderer should create checkbox element with label element as a parent.
  1952. *
  1953. * __Note__, this option only works for [checkbox-typed](https://docs.handsontable.com/demo-checkbox.html) cells.
  1954. *
  1955. * By default the [checkbox](https://docs.handsontable.com/demo-checkbox.html) renderer renders the checkbox without a label.
  1956. *
  1957. * Possible object properties:
  1958. * * `property` - Defines the property name of the data object, which will to be used as a label.
  1959. * (eg. `label: {property: 'name.last'}`). This option works only if data was passed as an array of objects.
  1960. * * `position` - String which describes where to place the label text (before or after checkbox element).
  1961. * Valid values are `'before'` and '`after`' (defaults to `'after'`).
  1962. * * `value` - String or a Function which will be used as label text.
  1963. *
  1964. * @type {Object}
  1965. * @default undefined
  1966. *
  1967. * @example
  1968. * ```js
  1969. * columns: [{
  1970. * type: 'checkbox',
  1971. * // add "My label:" after the checkbox
  1972. * label: {position: 'after', value: 'My label: '}
  1973. * }],
  1974. * ```
  1975. */
  1976. label: void 0,
  1977. /**
  1978. * Display format for numeric typed renderers.
  1979. *
  1980. * __Note__, this option only works for [numeric-typed](https://docs.handsontable.com/demo-numeric.html) cells.
  1981. *
  1982. * Format is described by two properties:
  1983. * * `pattern` - Handled by `numbro` for purpose of formatting numbers to desired pattern. List of supported patterns can be found [here](http://numbrojs.com/format.html#numbers).
  1984. * * `culture` - Handled by `numbro` for purpose of formatting currencies. Examples showing how it works can be found [here](http://numbrojs.com/format.html#currency). List of supported cultures can be found [here](http://numbrojs.com/languages.html#supported-languages).
  1985. *
  1986. * __Note:__ Please keep in mind that this option is used only to format the displayed output! It has no effect on the input data provided for the cell. The numeric data can be entered to the table only as floats (separated by a dot or a comma) or integers, and are stored in the source dataset as JavaScript numbers.
  1987. *
  1988. * Handsontable uses [numbro](http://numbrojs.com/) as a main library for numbers formatting.
  1989. *
  1990. * @since 0.35.0
  1991. * @type {Object}
  1992. * @default undefined
  1993. *
  1994. * @example
  1995. * ```js
  1996. * columns: [
  1997. * {
  1998. * type: 'numeric',
  1999. * // set desired format pattern and
  2000. * numericFormat: {
  2001. * pattern: '0,00',
  2002. * culture: 'en-US'
  2003. * }
  2004. * }
  2005. * ],
  2006. * ```
  2007. */
  2008. numericFormat: void 0,
  2009. /**
  2010. * Language for Handsontable translation. Possible language codes are [listed here](https://docs.handsontable.com/tutorial-internationalization.html#available-languages).
  2011. *
  2012. * @type {String}
  2013. * @default 'en-US'
  2014. *
  2015. * @example
  2016. * ```js
  2017. * // set Polish language
  2018. * language: 'pl-PL',
  2019. * ```
  2020. */
  2021. language: 'en-US',
  2022. /**
  2023. * Data source for [select-typed](https://docs.handsontable.com/demo-select.html) cells.
  2024. *
  2025. * __Note__, this option only works for [select-typed](https://docs.handsontable.com/demo-select.html) cells.
  2026. *
  2027. * @type {String[]}
  2028. * @default undefined
  2029. *
  2030. * @example
  2031. * ```js
  2032. * columns: [
  2033. * {
  2034. * editor: 'select',
  2035. * // add three select options to choose from
  2036. * selectOptions: ['A', 'B', 'C'],
  2037. * }
  2038. * ],
  2039. * ```
  2040. */
  2041. selectOptions: void 0,
  2042. /**
  2043. * Enables or disables the {@link AutoColumnSize} plugin. Default value is `undefined`, which has the same effect as `true`.
  2044. * Disabling this plugin can increase performance, as no size-related calculations would be done.
  2045. *
  2046. * Column width calculations are divided into sync and async part. Each of those parts has their own advantages and
  2047. * disadvantages. Synchronous calculations are faster but they block the browser UI, while the slower asynchronous
  2048. * operations don't block the browser UI.
  2049. *
  2050. * To configure the sync/async distribution, you can pass an absolute value (number of columns) or a percentage value.
  2051. *
  2052. * You can also use the `useHeaders` option to take the column headers width into calculation.
  2053. *
  2054. * @type {Object|Boolean}
  2055. * @default {syncLimit: 50}
  2056. *
  2057. * @example
  2058. * ```js
  2059. * // as a number (300 columns in sync, rest async)
  2060. * autoColumnSize: {syncLimit: 300},
  2061. *
  2062. * // as a string (percent)
  2063. * autoColumnSize: {syncLimit: '40%'},
  2064. *
  2065. * // use headers width while calculating the column width
  2066. * autoColumnSize: {useHeaders: true},
  2067. * ```
  2068. */
  2069. autoColumnSize: void 0,
  2070. /**
  2071. * Enables or disables {@link AutoRowSize} plugin. Default value is `undefined`, which has the same effect as `false`
  2072. * (disabled). Enabling this plugin can decrease performance, as size-related calculations would be performed.
  2073. *
  2074. * Row height calculations are divided into sync and async stages. Each of these stages has their own advantages and
  2075. * disadvantages. Synchronous calculations are faster but they block the browser UI, while the slower asynchronous
  2076. * operations don't block the browser UI.
  2077. *
  2078. * To configure the sync/async distribution, you can pass an absolute value (number of columns) or a percentage value.
  2079. *
  2080. * @type {Object|Boolean}
  2081. * @default {syncLimit: 500}
  2082. *
  2083. * @example
  2084. * ```js
  2085. * // as a number (300 columns in sync, rest async)
  2086. * autoRowSize: {syncLimit: 300},
  2087. *
  2088. * // as a string (percent)
  2089. * autoRowSize: {syncLimit: '40%'},
  2090. * ```
  2091. */
  2092. autoRowSize: void 0,
  2093. /**
  2094. * Date validation format.
  2095. *
  2096. * __Note__, this option only works for [date-typed](https://docs.handsontable.com/demo-date.html) cells.
  2097. *
  2098. * @type {String}
  2099. * @default 'DD/MM/YYYY'
  2100. *
  2101. * @example
  2102. * ```js
  2103. * columns: [{
  2104. * type: 'date',
  2105. * // localise date format
  2106. * dateFormat: 'MM/DD/YYYY'
  2107. * }],
  2108. * ```
  2109. */
  2110. dateFormat: 'DD/MM/YYYY',
  2111. /**
  2112. * If `true` then dates will be automatically formatted to match the desired format.
  2113. *
  2114. * __Note__, this option only works for [date-typed](https://docs.handsontable.com/demo-date.html) cells.
  2115. *
  2116. * @type {Boolean}
  2117. * @default false
  2118. *
  2119. * @example
  2120. * ```js
  2121. * columns: [{
  2122. * type: 'date',
  2123. * dateFormat: 'YYYY-MM-DD',
  2124. * // force selected date format
  2125. * correctFormat: true
  2126. * }],
  2127. * ```
  2128. */
  2129. correctFormat: false,
  2130. /**
  2131. * Definition of default value which will fill the empty cells.
  2132. *
  2133. * __Note__, this option only works for [date-typed](https://docs.handsontable.com/demo-date.html) cells.
  2134. *
  2135. * @type {String}
  2136. * @default undefined
  2137. *
  2138. * @example
  2139. * ```js
  2140. * columns: [
  2141. * {
  2142. * type: 'date',
  2143. * // always set this date for empty cells
  2144. * defaultDate: '2015-02-02'
  2145. * }
  2146. * ],
  2147. * ```
  2148. */
  2149. defaultDate: void 0,
  2150. /**
  2151. * If set to `true`, the value entered into the cell must match (case-sensitive) the autocomplete source.
  2152. * Otherwise, cell won't pass the validation. When filtering the autocomplete source list, the editor will
  2153. * be working in case-insensitive mode.
  2154. *
  2155. * __Note__, this option only works for [autocomplete-typed](https://docs.handsontable.com/demo-autocomplete.html) cells.
  2156. *
  2157. * @type {Boolean}
  2158. * @default undefined
  2159. *
  2160. * @example
  2161. * ```js
  2162. * columns: [{
  2163. * type: 'autocomplete',
  2164. * source: ['A', 'B', 'C'],
  2165. * // force selected value to match the source list
  2166. * strict: true
  2167. * }],
  2168. * ```
  2169. */
  2170. strict: void 0,
  2171. /**
  2172. * If set to `true`, data defined in `source` of the autocomplete or dropdown cell will be treated as HTML.
  2173. *
  2174. * __Warning:__ Enabling this option can cause serious XSS vulnerabilities.
  2175. *
  2176. * __Note__, this option only works for [autocomplete-typed](https://docs.handsontable.com/demo-autocomplete.html) cells.
  2177. *
  2178. * @type {Boolean}
  2179. * @default false
  2180. *
  2181. * @example
  2182. * ```js
  2183. * columns: [{
  2184. * type: 'autocomplete',
  2185. * // use HTML in the source list
  2186. * allowHtml: true,
  2187. * source: ['<strong>foo</strong>', '<strong>bar</strong>']
  2188. * }],
  2189. * ```
  2190. */
  2191. allowHtml: false,
  2192. /**
  2193. * If typed `true` then virtual rendering mechanism for handsontable will be disabled.
  2194. *
  2195. * @type {Boolean}
  2196. * @default undefined
  2197. *
  2198. * @example
  2199. * ```js
  2200. * // disable virtual rows rendering
  2201. * renderAllRows: true,
  2202. * ```
  2203. */
  2204. renderAllRows: void 0,
  2205. /**
  2206. * Prevents table to overlap outside the parent element. If `'horizontal'` option is chosen then table will show
  2207. * a horizontal scrollbar if parent's width is narrower then table's width.
  2208. *
  2209. * Possible values:
  2210. * * `false` - Disables functionality.
  2211. * * `horizontal` - Prevents horizontal overflow table.
  2212. * * `vertical` - Prevents vertical overflow table.
  2213. *
  2214. * @type {String|Boolean}
  2215. * @default false
  2216. *
  2217. * @example
  2218. * ```js
  2219. * preventOverflow: 'horizontal',
  2220. * ```
  2221. */
  2222. preventOverflow: false,
  2223. /**
  2224. * @description
  2225. * Enables the functionality of the {@link BindRowsWithHeaders} plugin which allows binding the table rows with their headers.
  2226. * If the plugin is enabled, the table row headers will "stick" to the rows, when they are hidden/moved. Basically,
  2227. * if at the initialization row 0 has a header titled "A", it will have it no matter what you do with the table.
  2228. *
  2229. * @pro
  2230. * @type {Boolean|String}
  2231. * @default undefined
  2232. *
  2233. * @example
  2234. * ```js
  2235. * // keep row data and row headers in sync
  2236. * bindRowsWithHeaders: true
  2237. * ```
  2238. */
  2239. bindRowsWithHeaders: void 0,
  2240. /**
  2241. * @description
  2242. * The {@link CollapsibleColumns} plugin allows collapsing of columns, covered by a header with the `colspan` property
  2243. * defined.
  2244. *
  2245. * Clicking the "collapse/expand" button collapses (or expands) all "child" headers except the first one.
  2246. *
  2247. * Setting the `collapsibleColumns` property to `true` will display a "collapse/expand" button in every
  2248. * header with a defined colspan` property.
  2249. *
  2250. * To limit this functionality to a smaller group of headers, define the `collapsibleColumns` property
  2251. * as an array of objects, as in the example below.
  2252. *
  2253. * @pro
  2254. * @type {Boolean|Object[]}
  2255. * @default undefined
  2256. *
  2257. * @example
  2258. * ```js
  2259. * // enable collapsing for all headers
  2260. * collapsibleColumns: true,
  2261. *
  2262. * // or
  2263. * // enable collapsing for selected headers
  2264. * collapsibleColumns: [
  2265. * {row: -4, col: 1, collapsible: true},
  2266. * {row: -3, col: 5, collapsible: true}
  2267. * ],
  2268. * ```
  2269. */
  2270. collapsibleColumns: void 0,
  2271. /**
  2272. * @description
  2273. * Allows making pre-defined calculations on the cell values and display the results within Handsontable.
  2274. *
  2275. * Possible types:
  2276. * * `'sum'`
  2277. * * `'min'`
  2278. * * `'max'`
  2279. * * `'count'`
  2280. * * `'average'`
  2281. * * `'custom'` - add `customFunction`
  2282. *
  2283. * [See the demo for more information](https://docs.handsontable.com/pro/demo-summary-calculations.html).
  2284. *
  2285. * @pro
  2286. * @type {Object[]|Function}
  2287. * @default undefined
  2288. *
  2289. * @example
  2290. * ```
  2291. * columnSummary: [
  2292. * {
  2293. * destinationRow: 4,
  2294. * destinationColumn: 1,
  2295. * forceNumeric: true,
  2296. * reversedRowCoords: true,
  2297. * suppressDataTypeErrors: false,
  2298. * readOnly: true,
  2299. * roundFloat: false,
  2300. * type: 'custom',
  2301. * customFunction: function(endpoint) {
  2302. * return 100;
  2303. * }
  2304. * }
  2305. * ],
  2306. * ```
  2307. */
  2308. columnSummary: void 0,
  2309. /**
  2310. * This plugin allows adding a configurable dropdown menu to the table's column headers. The dropdown menu acts like
  2311. * the {@link Options#contextMenu}, but is triggered by clicking the button in the header.
  2312. *
  2313. * @pro
  2314. * @type {Boolean|Object|String[]}
  2315. * @default undefined
  2316. *
  2317. * @example
  2318. * ```js
  2319. * // enable dropdown menu
  2320. * dropdownMenu: true,
  2321. *
  2322. * // or
  2323. * // enable and configure dropdown menu options
  2324. * dropdownMenu: ['remove_col', '---------', 'make_read_only', 'alignment']
  2325. * ```
  2326. */
  2327. dropdownMenu: void 0,
  2328. /**
  2329. * The {@link Filters} plugin allows filtering the table data either by the built-in component or with the API.
  2330. *
  2331. * @pro
  2332. * @type {Boolean}
  2333. * @default undefined
  2334. *
  2335. * @example
  2336. * ```js
  2337. * // enable filters
  2338. * filters: true,
  2339. * ```
  2340. */
  2341. filters: void 0,
  2342. /**
  2343. * The {@link Formulas} plugin allows Handsontable to process formula expressions defined in the provided data.
  2344. *
  2345. * @pro
  2346. * @type {Boolean|Object}
  2347. * @default undefined
  2348. *
  2349. * @example
  2350. * ```js
  2351. * // enable formulas plugin
  2352. * formulas: true,
  2353. *
  2354. * // or as an object with custom variables to be used in formula expressions
  2355. * formulas: {
  2356. * variables: {
  2357. * FOO: 64,
  2358. * BAR: 'baz',
  2359. * }
  2360. * },
  2361. * ```
  2362. */
  2363. formulas: void 0,
  2364. /**
  2365. * @description
  2366. * The {@link GanttChart} plugin enables a possibility to create a Gantt chart using a Handsontable instance. In this
  2367. * case, the whole table becomes read-only.
  2368. *
  2369. * @pro
  2370. * @type {Object}
  2371. * @default undefined
  2372. */
  2373. ganttChart: void 0,
  2374. /**
  2375. * @description
  2376. * Allows adding a tooltip to the table headers.
  2377. *
  2378. * Available options:
  2379. * * the `rows` property defines if tooltips should be added to row headers,
  2380. * * the `columns` property defines if tooltips should be added to column headers,
  2381. * * the `onlyTrimmed` property defines if tooltips should be added only to headers, which content is trimmed by the header itself (the content being wider then the header).
  2382. *
  2383. * @pro
  2384. * @type {Boolean|Object}
  2385. * @default undefined
  2386. *
  2387. * @example
  2388. * ```js
  2389. * // enable tooltips for all headers
  2390. * headerTooltips: true,
  2391. *
  2392. * // or
  2393. * headerTooltips: {
  2394. * rows: false,
  2395. * columns: true,
  2396. * onlyTrimmed: true
  2397. * }
  2398. * ```
  2399. */
  2400. headerTooltips: void 0,
  2401. /**
  2402. * The {@link HiddenColumns} plugin allows hiding of certain columns. You can pass additional configuration with an
  2403. * object notation. Options that are then available are:
  2404. * * `columns` - an array of rows that should be hidden on plugin initialization
  2405. * * `indicators` - enables small ui markers to indicate where are hidden columns
  2406. *
  2407. * @pro
  2408. * @type {Boolean|Object}
  2409. * @default undefined
  2410. *
  2411. * @example
  2412. * ```js
  2413. * // enable column hiding
  2414. * hiddenColumns: true,
  2415. *
  2416. * // or
  2417. * hiddenColumns: {
  2418. * // set columns that are hidden by default
  2419. * columns: [5, 10, 15],
  2420. * // show where are hidden columns
  2421. * indicators: true
  2422. * }
  2423. * ```
  2424. */
  2425. hiddenColumns: void 0,
  2426. /**
  2427. * The {@link HiddenRows} plugin allows hiding of certain rows. You can pass additional configuration with an
  2428. * object notation. Options that are then available are:
  2429. * * `rows` - an array of rows that should be hidden on plugin initialization
  2430. * * `indicators` - enables small ui markers to indicate where are hidden columns
  2431. *
  2432. * @pro
  2433. * @type {Boolean|Object}
  2434. * @default undefined
  2435. *
  2436. * @example
  2437. * ```js
  2438. * // enable row hiding
  2439. * hiddenRows: true,
  2440. *
  2441. * // or
  2442. * hiddenRows: {
  2443. * // set rows that are hidden by default
  2444. * rows: [5, 10, 15],
  2445. * // show where are hidden rows
  2446. * indicators: true
  2447. * }
  2448. * ```
  2449. */
  2450. hiddenRows: void 0,
  2451. /**
  2452. * @description
  2453. * Allows creating a nested header structure, using the HTML's colspan attribute.
  2454. *
  2455. * @pro
  2456. * @type {Array[]}
  2457. * @default undefined
  2458. *
  2459. * @example
  2460. * ```
  2461. * nestedHeaders: [
  2462. * ['A', {label: 'B', colspan: 8}, 'C'],
  2463. * ['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
  2464. * ['H', 'I', 'J', 'K', 'L', 'M', 'N', 'R', 'S', 'T']
  2465. * ],
  2466. * ```
  2467. */
  2468. nestedHeaders: void 0,
  2469. /**
  2470. * @description
  2471. * Plugin allowing hiding of certain rows.
  2472. *
  2473. * @pro
  2474. * @type {Boolean|Number[]}
  2475. * @default undefined
  2476. *
  2477. * @example
  2478. * ```js
  2479. * // enable plugin
  2480. * trimRows: true,
  2481. *
  2482. * // or
  2483. * // trim selected rows on table initialization
  2484. * trimRows: [5, 10, 15],
  2485. * ```
  2486. */
  2487. trimRows: void 0,
  2488. /**
  2489. * @description
  2490. * Allows setting a custom width of the row headers. You can provide a number or an array of widths, if many row
  2491. * header levels are defined.
  2492. *
  2493. * @type {Number|Number[]}
  2494. * @default undefined
  2495. *
  2496. * @example
  2497. * ```js
  2498. * // set width for all row headers
  2499. * rowHeaderWidth: 25,
  2500. *
  2501. * // or
  2502. * // set width for selected headers only
  2503. * rowHeaderWidth: [25, 30, 55],
  2504. * ```
  2505. */
  2506. rowHeaderWidth: void 0,
  2507. /**
  2508. * @description
  2509. * Allows setting a custom height of the column headers. You can provide a number or an array of heights, if many
  2510. * column header levels are defined.
  2511. *
  2512. * @type {Number|Number[]}
  2513. * @default undefined
  2514. *
  2515. * @example
  2516. * ```js
  2517. * // set shared height for all headers
  2518. * columnHeaderHeight: 35,
  2519. *
  2520. * // or
  2521. * // set height for each header individually
  2522. * columnHeaderHeight: [35, 20, 55],
  2523. *
  2524. * // or
  2525. * // skipped headers will fallback to default value
  2526. * columnHeaderHeight: [35, undefined, 55],
  2527. * ```
  2528. */
  2529. columnHeaderHeight: void 0,
  2530. /**
  2531. * @description
  2532. * Enables the {@link ObserveChanges} plugin switches table into one-way data binding where changes are applied into
  2533. * data source (from outside table) will be automatically reflected in the table.
  2534. *
  2535. * For every data change [afterChangesObserved](Hooks.html#event:afterChangesObserved) hook will be fired.
  2536. *
  2537. * @type {Boolean}
  2538. * @default undefined
  2539. *
  2540. * @example
  2541. * ```js
  2542. * observeChanges: true,
  2543. * ```
  2544. */
  2545. observeChanges: void 0,
  2546. /**
  2547. * If defined as `true`, the Autocomplete's suggestion list would be sorted by relevance (the closer to the left the
  2548. * match is, the higher the suggestion).
  2549. *
  2550. * __Note__, this option only works for [autocomplete-typed](https://docs.handsontable.com/demo-autocomplete.html) cells.
  2551. *
  2552. * @type {Boolean}
  2553. * @default true
  2554. *
  2555. * @example
  2556. * ```js
  2557. * columns: [
  2558. * {
  2559. * type: 'autocomplete',
  2560. * source: [ ... ],
  2561. * // keep options order as they were defined
  2562. * sortByRelevance: false
  2563. * }
  2564. * ],
  2565. * ```
  2566. */
  2567. sortByRelevance: true,
  2568. /**
  2569. * If defined as `true`, when the user types into the input area the Autocomplete's suggestion list is updated to only
  2570. * include those choices starting with what has been typed; if defined as `false` all suggestions remain shown, with
  2571. * those matching what has been typed marked in bold.
  2572. *
  2573. * __Note__, this option only works for [autocomplete-typed](https://docs.handsontable.com/demo-autocomplete.html) cells.
  2574. *
  2575. * @type {Boolean}
  2576. * @default true
  2577. *
  2578. * @example
  2579. * ```js
  2580. * columns: [
  2581. * {
  2582. * type: 'autocomplete',
  2583. * source: [ ... ],
  2584. * // don't hide options that don't match search query
  2585. * filter: false
  2586. * }
  2587. * ],
  2588. * ```
  2589. */
  2590. filter: true,
  2591. /**
  2592. * If defined as `true`, filtering in the Autocomplete Editor will be case-sensitive.
  2593. *
  2594. * __Note__, this option only works for [autocomplete-typed](https://docs.handsontable.com/demo-autocomplete.html) cells.
  2595. *
  2596. * @type {Boolean}
  2597. * @default: false
  2598. *
  2599. * @example
  2600. * ```js
  2601. * columns: [
  2602. * {
  2603. * type: 'autocomplete',
  2604. * source: [ ... ],
  2605. * // match case while searching autocomplete options
  2606. * filteringCaseSensitive: true
  2607. * }
  2608. * ],
  2609. * ```
  2610. */
  2611. filteringCaseSensitive: false,
  2612. /**
  2613. * @description
  2614. * Disables or enables the drag to scroll functionality.
  2615. *
  2616. * @type {Boolean}
  2617. * @default true
  2618. *
  2619. * @example
  2620. * ```js
  2621. * // don't scroll the viewport when selection gets to the viewport edge
  2622. * dragToScroll: false,
  2623. * ```
  2624. */
  2625. dragToScroll: true,
  2626. /**
  2627. * @description
  2628. * Disable or enable the nested rows functionality - displaying nested structures in a two-dimensional data table.
  2629. *
  2630. * See [quick setup of the Nested rows](https://docs.handsontable.kbudnik/pro/next/demo-nested-rows.html).
  2631. * @example
  2632. * ```js
  2633. * nestedRows: true,
  2634. * ```
  2635. *
  2636. * @pro
  2637. * @type {Boolean}
  2638. * @default false
  2639. */
  2640. nestedRows: void 0,
  2641. };
  2642. export default DefaultSettings;