Use the validator (see options page) method to easily validate synchronous or asynchronous changes to a cell. If you need more control, beforeValidate and afterValidate plugin hooks are available (see hooks page). In the below example, email_validator_fn is an async validator that resolves after 1000 ms.

Use the allowInvalid option (see options page) to define if the grid should accept input that does not validate. If you need to modify the input (e.g. censor bad words, uppercase first letter), use the plugin hook beforeChange (see hooks page).

By default all invalid cells are marked by htInvalid CSS class. If you want to change class to another you can basically add the invalidCellClassName option to Handson table settings. For example.

Callback console: [[row, col, oldValue, newValue], ...]

Edit the above grid to see callback

Notice the little square (fill handle) 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 B4 (value "30") to fill the selection down to the last value in neighbouring column, just like it would in LibreOffice or google Docs.

To enable the merge cells feature, set the mergeCells option to be true or an array. To initialize Handson table with predefined merged cells, provide merged cells details in form of an array: mergeCells: [{row: 1, col: 1, rowspan: 2, colspan: 2}]

To initialize Handson table with predefined horizontal and vertical alignment, provide className cells details in form of a grid, columns or cell setting (see code sample below).

Available classNames:

• Horizontal: htLeft, htCenter, htRight, htJustify,
• Vertical: htTop, htMiddle, htBottom.
• Alignment changes can be tracked using afterSetCellMeta hook callback.

In many usage cases, you will need to configure a certain column to be read only. This column will be available for keyboard navigation and CTRL+C. Only editing and pasting data will be disabled.

To make a column read-only, declare it in the columns setting. You can also define a special renderer function that will dim the read-only values.

In many cases you will need to configure a certain column to be non-editable. Doing it does not change it's basic behavior (apart from editing), which means you are still available to use keyboard navigation, CTRL+C and CTRL+V functionalities, drag-to-fill etc.

To make a column non-editable, declare it in the columns setting. You can also define a special renderer function that will dim the editor value.