React Data GridDisabled cells

Make specified cells read-only to protect them from unwanted changes but still allow navigation and copying of data.

Overview

Disabling a cell makes the cell read-only or non-editable. Both have similar outcomes, with the following differences:

Read-only cell
readOnly: true
Non-editable cell
editor: false
Has an additional CSS class (htDimmed) Has no additional CSS class
Copy works, paste doesn't work Copy-paste works
Drag-to-fill doesn't work Drag-to-fill works
Can't be changed by populateFromArray() Can be changed by populateFromArray()

Read-only grid

You can make the entire grid read-only by setting readOnly to true as a top-level grid option.

    Read-only columns

    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.

        Non-editable columns

        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.