4 Ways to Handle Read-only Cells
For up-to-date Handsontable documentation, see handsontable.com/docs.
Handsontable enables you to change and manipulate data. But every spreadsheet has its constants, such as data coming from external sources. Regardless of the type of information you are dealing with, I will show how to protect your data easily by locking cells, rows, columns or ranges in Handsontable.
Handsontable is intended, for most of the time, to easily edit data. But in every spreadsheet there are areas that should stay intact, for example constant values or variables taken from external sources. Whichever it is, I will show you how to easily protect your data by locking certain cells, rows, columns or ranges in Handsontable.
Let’s start with some basics first. When a cell is set to read-only, then:
- It is immutable for changes
- A cell editor doesn’t open
- It has a new class name (
htDimmed) which paints it gray
- It doesn’t trigger
- It can’t be changed via the context menu to editable if set in the
- It still can be selected
- It still can be copied
See also: Read-only cells vs non-editable cells
Read-only: entire spreadsheet
To do so, lock all of the cells at once and simply set
true in the grid’s configuration. The entire spreadsheet will be turned into a passive table that can be read-only for the users. See it live in the example below:
Read-only: columns only
If only some columns should stay editable with the rest being locked, you should define the
readOnly state for certain
columns in the configuration.
In the example above we have created a list of Clients. You can find their
Surname, which we don’t want to change. The list also contains their contact data:
You can also revert the configuration by passing on only the columns that should not be set to read-only state:
Last but not least, there is a
prop parameter passed via
cells method. It links the
readOnly state to the provided property passed in the source.
Read-only: rows only
Setting your rows to read-only is as simple as in the previous examples. You will need to refer to the
col parameter instead of
row in your cells method. This is shown in the simple demo below:
In this case we set the second row to read-only (the one with the index
Read-only: certain cells
In some situations you might want to lock only certain cells instead of whole rows or columns. To do that you should use the
cells method to pass on the coordinates (row, col) of the read-only cells.
In the example above I have created an instance in which cells containing the
readOnly value become read-only. You can replace the value triggering the read-only state with any other text.
The read-only state is by far one of the most commonly used features of Handsontable. It gives you full control over which cells, rows or columns can be edited and which should be locked. Learn more about this feature from our documentation.