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:
|Read-only cell ||Non-editable cell|
|Has an additional CSS class ( ||Has no additional CSS class|
|Copy-paste doesn't work||Copy-paste works|
|Drag-to-fill doesn't work||Drag-to-fill works|
|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.
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.
The following example shows the table with non-editable cells containing the word "Nissan". This cell property is optional and can be easily set in the Handsontable configuration.