Read-only cells

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

Disable individual cells, entire columns, or entire rows to prevent user edits. Use readOnly on cells, columns, or the whole grid.

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()`

Make the grid read-only

To make the entire grid read-only, set readOnly to true as a top-level grid option.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
12
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
13
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
14
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
15
      ]}
16
      height="auto"
17
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
      readOnly={true}
22
    />
23
  );
24
};
25

26
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
12
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
13
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
14
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
15
      ]}
16
      height="auto"
17
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
      readOnly={true}
22
    />
23
  );
24
};
25

26
export default ExampleComponent;

Make a column read-only

To make a column read-only, declare it in the columns configuration option. The column remains available for keyboard navigation and copying data (Ctrl/Cmd+C), but editing and pasting are disabled. The example below also defines a custom renderer that dims the read-only column, giving the user a visual cue that its cells are read-only.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { textRenderer } from 'handsontable/renderers/textRenderer';
4
// register Handsontable's modules
5
registerAllModules();
6
const dimmedTextRenderer = (instance, td, ...rest) => {
7
    textRenderer(instance, td, ...rest);
8
    td.style.opacity = '0.6';
9
};
10
const ExampleComponent = () => {
11
    return (<HotTable data={[
12
            { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
13
            { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
14
            { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
15
            { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
16
        ]} height="auto" colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']} autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation" columns={[
17
            {
18
                data: 'car',
19
                readOnly: true,
20
                renderer: dimmedTextRenderer,
21
            },
22
            {
23
                data: 'year',
24
            },
25
            {
26
                data: 'chassis',
27
            },
28
            {
29
                data: 'bumper',
30
            },
31
        ]}/>);
32
};
33
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { BaseRenderer } from 'handsontable/renderers';
4
import { textRenderer } from 'handsontable/renderers/textRenderer';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {
10
  textRenderer(instance, td, ...rest);
11

12
  td.style.opacity = '0.6';
13
};
14

15
const ExampleComponent = () => {
16
  return (
17
    <HotTable
18
      data={[
19
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
20
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
21
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
22
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
23
      ]}
24
      height="auto"
25
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
26
      autoWrapRow={true}
27
      autoWrapCol={true}
28
      licenseKey="non-commercial-and-evaluation"
29
      columns={[
30
        {
31
          data: 'car',
32
          readOnly: true,
33
          renderer: dimmedTextRenderer,
34
        },
35
        {
36
          data: 'year',
37
        },
38
        {
39
          data: 'chassis',
40
        },
41
        {
42
          data: 'bumper',
43
        },
44
      ]}
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

Make a row read-only

To make an entire row read-only, use the cells function and set the readOnly property based on the row index, regardless of the column. The example below makes the second row (index 1) read-only.

1
import { useRef, useEffect } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
// register Handsontable's modules
5
registerAllModules();
6
const ExampleComponent = () => {
7
    const hotRef = useRef(null);
8
    useEffect(() => {
9
        const hot = hotRef.current?.hotInstance;
10
        hot?.updateSettings({
11
            cells(row) {
12
                return row === 1 ? { readOnly: true } : {};
13
            },
14
        });
15
    });
16
    return (<HotTable ref={hotRef} data={[
17
            { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
18
            { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
19
            { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
20
            { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
21
        ]} colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']} height="auto" autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation"/>);
22
};
23
export default ExampleComponent;

1
import { useRef, useEffect } from 'react';
2
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef<HotTableRef>(null);
10

11
  useEffect(() => {
12
    const hot = hotRef.current?.hotInstance;
13

14
    hot?.updateSettings({
15
      cells(row) {
16
        return row === 1 ? { readOnly: true } : {};
17
      },
18
    });
19
  });
20

21
  return (
22
    <HotTable
23
      ref={hotRef}
24
      data={[
25
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
26
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
27
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
28
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
29
      ]}
30
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
31
      height="auto"
32
      autoWrapRow={true}
33
      autoWrapCol={true}
34
      licenseKey="non-commercial-and-evaluation"
35
    />
36
  );
37
};
38

39
export default ExampleComponent;

Make specific cells read-only

To make specific cells read-only, use the cells function to set the readOnly property conditionally. The example below makes cells that contain the word “Nissan” read-only.

1
import { useRef, useEffect } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef(null);
10

11
  useEffect(() => {
12
    const hot = hotRef.current?.hotInstance;
13

14
    hot?.updateSettings({
15
      cells(row, col) {
16
        const cellProperties = {};
17

18
        if (hot.getData()[row][col] === 'Nissan') {
19
          cellProperties.readOnly = true;
20
        }
21

22
        return cellProperties;
23
      },
24
    });
25
  });
26

27
  return (
28
    <HotTable
29
      ref={hotRef}
30
      data={[
31
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
32
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
33
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
34
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
35
      ]}
36
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
37
      height="auto"
38
      autoWrapRow={true}
39
      autoWrapCol={true}
40
      licenseKey="non-commercial-and-evaluation"
41
    />
42
  );
43
};
44

45
export default ExampleComponent;

1
import { useRef, useEffect } from 'react';
2
import Handsontable from 'handsontable/base';
3
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotRef = useRef<HotTableRef>(null);
11

12
  useEffect(() => {
13
    const hot = hotRef.current?.hotInstance;
14

15
    hot?.updateSettings({
16
      cells(row, col) {
17
        const cellProperties: Handsontable.CellMeta = {};
18

19
        if (hot.getData()[row][col] === 'Nissan') {
20
          cellProperties.readOnly = true;
21
        }
22

23
        return cellProperties;
24
      },
25
    });
26
  });
27

28
  return (
29
    <HotTable
30
      ref={hotRef}
31
      data={[
32
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
33
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
34
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
35
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
36
      ]}
37
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
38
      height="auto"
39
      autoWrapRow={true}
40
      autoWrapCol={true}
41
      licenseKey="non-commercial-and-evaluation"
42
    />
43
  );
44
};
45

46
export default ExampleComponent;

Non-editable cells behave like any other cells apart from preventing you from manually changing their values.

Make a column non-editable

To make a column non-editable, declare it in the columns configuration option. The column’s basic behavior does not change — you can still use keyboard navigation, Ctrl/Cmd+C, Ctrl/Cmd+V, and drag-to-fill. The example below also defines a custom renderer that dims the non-editable column, giving the user a visual cue that its cells are non-editable.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { textRenderer } from 'handsontable/renderers/textRenderer';
4
// register Handsontable's modules
5
registerAllModules();
6
const dimmedTextRenderer = (instance, td, ...rest) => {
7
    textRenderer(instance, td, ...rest);
8
    td.style.opacity = '0.6';
9
};
10
const ExampleComponent = () => {
11
    return (<HotTable data={[
12
            { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
13
            { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
14
            { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
15
            { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
16
        ]} height="auto" colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']} autoWrapRow={true} autoWrapCol={true} licenseKey="non-commercial-and-evaluation" columns={[
17
            {
18
                data: 'car',
19
                editor: false,
20
                renderer: dimmedTextRenderer,
21
            },
22
            {
23
                data: 'year',
24
                editor: 'numeric',
25
            },
26
            {
27
                data: 'chassis',
28
                editor: 'text',
29
            },
30
            {
31
                data: 'bumper',
32
                editor: 'text',
33
            },
34
        ]}/>);
35
};
36
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { BaseRenderer } from 'handsontable/renderers';
4
import { textRenderer } from 'handsontable/renderers/textRenderer';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {
10
  textRenderer(instance, td, ...rest);
11

12
  td.style.opacity = '0.6';
13
};
14

15
const ExampleComponent = () => {
16
  return (
17
    <HotTable
18
      data={[
19
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
20
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
21
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
22
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
23
      ]}
24
      height="auto"
25
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
26
      autoWrapRow={true}
27
      autoWrapCol={true}
28
      licenseKey="non-commercial-and-evaluation"
29
      columns={[
30
        {
31
          data: 'car',
32
          editor: false,
33
          renderer: dimmedTextRenderer,
34
        },
35
        {
36
          data: 'year',
37
          editor: 'numeric',
38
        },
39
        {
40
          data: 'chassis',
41
          editor: 'text',
42
        },
43
        {
44
          data: 'bumper',
45
          editor: 'text',
46
        },
47
      ]}
48
    />
49
  );
50
};
51

52
export default ExampleComponent;

Make specific cells non-editable

To make specific cells non-editable, set editor: false in the cell configuration. The following example shows a table with non-editable cells containing the word “Nissan”.

1
import { useRef, useEffect } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const ExampleComponent = () => {
9
  const hotRef = useRef(null);
10

11
  useEffect(() => {
12
    const hot = hotRef.current?.hotInstance;
13

14
    hot?.updateSettings({
15
      cells(row, _col, prop) {
16
        const cellProperties = {};
17

18
        if (hot.getDataAtRowProp(row, prop) === 'Nissan') {
19
          cellProperties.editor = false;
20
        } else {
21
          cellProperties.editor = 'text';
22
        }
23

24
        return cellProperties;
25
      },
26
    });
27
  });
28

29
  return (
30
    <HotTable
31
      ref={hotRef}
32
      data={[
33
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
34
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
35
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
36
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
37
      ]}
38
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
39
      height="auto"
40
      autoWrapRow={true}
41
      autoWrapCol={true}
42
      licenseKey="non-commercial-and-evaluation"
43
    />
44
  );
45
};
46

47
export default ExampleComponent;

1
import { useRef, useEffect } from 'react';
2
import Handsontable from 'handsontable/base';
3
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent = () => {
10
  const hotRef = useRef<HotTableRef>(null);
11

12
  useEffect(() => {
13
    const hot = hotRef.current?.hotInstance;
14

15
    hot?.updateSettings({
16
      cells(row, _col, prop) {
17
        const cellProperties: Handsontable.CellMeta = {};
18

19
        if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {
20
          cellProperties.editor = false;
21
        } else {
22
          cellProperties.editor = 'text';
23
        }
24

25
        return cellProperties;
26
      },
27
    });
28
  });
29

30
  return (
31
    <HotTable
32
      ref={hotRef}
33
      data={[
34
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
35
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
36
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
37
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
38
      ]}
39
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
40
      height="auto"
41
      autoWrapRow={true}
42
      autoWrapCol={true}
43
      licenseKey="non-commercial-and-evaluation"
44
    />
45
  );
46
};
47

48
export default ExampleComponent;

Accessibility

When ariaTags is enabled (the default), Handsontable adds aria-readonly="true" to the DOM element of every read-only cell, so screen readers announce that the cell can’t be edited. Non-editable cells (editor: false) don’t get this attribute, because Handsontable doesn’t treat them as read-only in the data model — only their editor is disabled.

For more accessibility features and testing guidance, see Accessibility.

Result

Read-only cells display with the htDimmed CSS class and block paste and drag-to-fill operations. Non-editable cells block manual editing but allow copy-paste and drag-to-fill.

Configuration options

ariaTags

readOnly

readOnlyCellClassName