React Data Grid Disabled 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 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.