Make specified cells read-only to protect them from unwanted changes but still allow navigation and copying of data.
Disabling a cell makes the cell read-only or non-editable. Both have similar outcomes, with the following differences:
|Has an additional CSS class (
|Has no additional CSS class
|Copy works, paste doesn't work
|Drag-to-fill doesn't work
|Can't be changed by
|Can be changed by
In many use cases, you will need to configure a certain column to be read-only. This column will be available for keyboard navigation and copying data (Ctrl/Cmd+C). Editing and pasting data will be disabled.
To make a column read-only, declare it in the
columns configuration option. You can also define a special renderer function that will dim the read-only values, providing a visual cue for the user that the cells are read-only.
Read-only specific cells
This example makes cells that contain the word "Nissan" read-only. It forces all cells to be processed by the
cells function which will decide whether a cell's metadata should have the
readOnly property set.
Non-editable cells behave like any other cells apart from preventing you from manually changing their values.
In many cases, you will need to configure a certain column to be non-editable. Doing this does not change its basic behaviour, apart from editing. This means that you can still use the keyboard navigation Ctrl/Cmd+C, and Ctrl/Cmd+V functionalities, and drag-to-fill, etc.
To make a column non-editable, declare it in the
columns configuration option. You can also define a special renderer function that will dim the
editor value. This will provide the user with a visual cue that the cell is non-editable.
Non-editable specific cells
The following example shows the table with non-editable cells containing the word "Nissan". This cell property is optional and you can easily set it in the Handsontable configuration.