The following example demonstrates cell validation. Use the validatormethod to easily validate synchronous or asynchronous changes to a cell. If you need more control, beforeValidateand afterValidateplugin hooks are available. In the below example, email_validator_fnis an async validator that resolves after 1000 ms.

Edit the above grid to see callback:

// Validation callback

Drag down example. Notice the little square (fillhandle) in the corner of the selected cell. You can drag it (drag-down) to repeat the values from the cell. Double click the fill handle in cell B8(value "47382") to fill the selection down to the last value in neighbouring column, just like it would in LibreOffice or Google Docs.

The following example demonstrates an ability to merge table cells. To enable the merge cells feature, set the mergeCellsoption to be trueor an array. To initialize Handsontable with predefined merged cells, provide merged cells details in form of an array: mergeCells: [{row: 1, col: 1, rowspan: 2, colspan: 2}]. Context menu provides an option to merge/unmerge the cells.

To initialize Handsontable with predefined horizontal and vertical alignment, provide className cells details in form of a grid, columns or cell setting. Available classNames: Horizontal- htLeft, htCenter, htRight, htJustify; Vertical- htTop, htMiddle, htBottom. Context menu also includes alignment option for both horizontal and vertical orientations.

The following example demonstrates how to configure columns or cells to be read only. Here cells that contain the word "Nissan"are read only. It forces all cells to be rendered by myReadonlyRenderer, which will decide whether a cell is really read only by checking its readOnlyproperty. To make a full column read only, declare it in the columnssetting. You can also define a special renderer function that will dim the read-only values.

The following example demonstrates how to configure columns or cells to be not editable. Here the table with non-editable cells containing the word “Nissan”. This property of the cell is optional and can be easily set in the configuration of Handsontable. To make a full column non-editable, declare it in the columnssetting. You can also define a special renderer function that will dim the editor value.