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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example-readonly-grid',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14
  readonly data = [
15
    { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
16
    { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
17
    { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
18
    { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
19
  ];
20

21
  readonly gridSettings: GridSettings = {
22
    readOnly: true,
23
    height: 'auto',
24
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
25
    autoWrapRow: true,
26
    autoWrapCol: true
27
  };
28
}
29
/* end-file */
30

31
/* file: app.config.ts */
32
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
33
import { registerAllModules } from 'handsontable/registry';
34
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
35

36
// register Handsontable's modules
37
registerAllModules();
38

39
export const appConfig: ApplicationConfig = {
40
  providers: [
41
    provideZoneChangeDetection({ eventCoalescing: true }),
42
    {
43
      provide: HOT_GLOBAL_CONFIG,
44
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
45
    },
46
  ],
47
};
48
/* end-file */

1
<div>
2
  <example-readonly-grid></example-readonly-grid>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4
import { BaseRenderer } from 'handsontable/renderers';
5
import { textRenderer } from 'handsontable/renderers/textRenderer';
6

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

10
  td.style.opacity = '0.6';
11
};
12

13
@Component({
14
  selector: 'example1-read-only-cells',
15
  standalone: true,
16
  imports: [HotTableModule],
17
  template: ` <div>
18
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
19
  </div>`,
20
})
21
export class AppComponent {
22

23
  readonly data = [
24
    { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
25
    { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
26
    { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
27
    { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
28
  ];
29

30
  readonly gridSettings: GridSettings = {
31
    height: 'auto',
32
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
33
    autoWrapRow: true,
34
    autoWrapCol: true,
35
    columns: [
36
      {
37
        data: 'car',
38
        readOnly: true,
39
        renderer: dimmedTextRenderer,
40
      },
41
      {
42
        data: 'year',
43
      },
44
      {
45
        data: 'chassis',
46
      },
47
      {
48
        data: 'bumper',
49
      },
50
    ]
51
  };
52
}
53
/* end-file */
54

55

56
/* file: app.config.ts */
57
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
58
import { registerAllModules } from 'handsontable/registry';
59
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
60

61
// register Handsontable's modules
62
registerAllModules();
63

64
export const appConfig: ApplicationConfig = {
65
  providers: [
66
    provideZoneChangeDetection({ eventCoalescing: true }),
67
    {
68
      provide: HOT_GLOBAL_CONFIG,
69
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
70
    },
71
  ],
72
};
73
/* end-file */

1
<div>
2
  <example1-read-only-cells></example1-read-only-cells>
3
</div>

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
/* file: app.component.ts */
2
import { AfterViewInit, Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example5-read-only-cells',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent implements AfterViewInit {
14
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
15

16
  readonly 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
  ];
22

23
  readonly gridSettings: GridSettings ={
24
    height: 'auto',
25
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
26
    autoWrapRow: true,
27
    autoWrapCol: true
28
  };
29

30
  ngAfterViewInit(): void {
31
    const hot = this.hotTable?.hotInstance;
32

33
    hot?.updateSettings({
34
      cells: (row: number) => {
35
        return row === 1 ? { readOnly: true } : {};
36
      },
37
    });
38
  }
39
}
40
/* end-file */
41

42

43
/* file: app.config.ts */
44
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
45
import { registerAllModules } from 'handsontable/registry';
46
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
47

48
// register Handsontable's modules
49
registerAllModules();
50

51
export const appConfig: ApplicationConfig = {
52
  providers: [
53
    provideZoneChangeDetection({ eventCoalescing: true }),
54
    {
55
      provide: HOT_GLOBAL_CONFIG,
56
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
57
    },
58
  ],
59
};
60
/* end-file */

1
<div>
2
  <example5-read-only-cells></example5-read-only-cells>
3
</div>

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
/* file: app.component.ts */
2
import { AfterViewInit, Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example2-read-only-cells',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent implements AfterViewInit {
14
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
15

16
  readonly 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
  ];
22

23
  readonly gridSettings: GridSettings ={
24
    height: 'auto',
25
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
26
    autoWrapRow: true,
27
    autoWrapCol: true
28
  };
29

30
  ngAfterViewInit(): void {
31
    const hot = this.hotTable?.hotInstance;
32

33
    hot?.updateSettings({
34
      cells: (row: number, col: number, _: any) => {
35
        if (hot.getData()[row][col] === 'Nissan') {
36
          return { readOnly: true };
37
        }
38

39
        return {};
40
      },
41
    });
42
  }
43
}
44
/* end-file */
45

46

47
/* file: app.config.ts */
48
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
49
import { registerAllModules } from 'handsontable/registry';
50
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
51

52
// register Handsontable's modules
53
registerAllModules();
54

55
export const appConfig: ApplicationConfig = {
56
  providers: [
57
    provideZoneChangeDetection({ eventCoalescing: true }),
58
    {
59
      provide: HOT_GLOBAL_CONFIG,
60
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
61
    },
62
  ],
63
};
64
/* end-file */

1
<div>
2
  <example2-read-only-cells></example2-read-only-cells>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4
import { BaseRenderer } from 'handsontable/renderers';
5
import { textRenderer } from 'handsontable/renderers/textRenderer';
6

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

10
  td.style.opacity = '0.6';
11
};
12

13
@Component({
14
  selector: 'example3-read-only-cells',
15
  standalone: true,
16
  imports: [HotTableModule],
17
  template: ` <div>
18
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
19
  </div>`,
20
})
21
export class AppComponent {
22

23
  readonly data = [
24
    { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
25
    { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
26
    { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
27
    { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
28
  ];
29

30
  readonly gridSettings: GridSettings = {
31
    height: 'auto',
32
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
33
    autoWrapRow: true,
34
    autoWrapCol: true,
35
    columns: [
36
      {
37
        data: 'car',
38
        editor: false,
39
        renderer: dimmedTextRenderer,
40
      },
41
      {
42
        data: 'year',
43
        editor: 'numeric',
44
      },
45
      {
46
        data: 'chassis',
47
        editor: 'text',
48
      },
49
      {
50
        data: 'bumper',
51
        editor: 'text',
52
      },
53
    ]
54
  };
55
}
56
/* end-file */
57

58

59
/* file: app.config.ts */
60
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
61
import { registerAllModules } from 'handsontable/registry';
62
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
63

64
// register Handsontable's modules
65
registerAllModules();
66

67
export const appConfig: ApplicationConfig = {
68
  providers: [
69
    provideZoneChangeDetection({ eventCoalescing: true }),
70
    {
71
      provide: HOT_GLOBAL_CONFIG,
72
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
73
    },
74
  ],
75
};
76
/* end-file */

1
<div>
2
  <example3-read-only-cells></example3-read-only-cells>
3
</div>

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
/* file: app.component.ts */
2
import { AfterViewInit, Component, ViewChild } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example4-read-only-cells',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent implements AfterViewInit {
14
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
15

16
  readonly 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
  ];
22

23
  readonly gridSettings: GridSettings = {
24
    height: 'auto',
25
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
26
    autoWrapRow: true,
27
    autoWrapCol: true
28
  };
29

30
  ngAfterViewInit(): void {
31
    const hot = this.hotTable?.hotInstance;
32

33
    hot?.updateSettings({
34
      cells: (row, _col, prop) => {
35
        if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {
36
          return { editor: false };
37
        }
38
        return { editor: 'text' };
39
      },
40
    });
41
  }
42
}
43
/* end-file */
44

45

46
/* file: app.config.ts */
47
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
48
import { registerAllModules } from 'handsontable/registry';
49
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
50

51
// register Handsontable's modules
52
registerAllModules();
53

54
export const appConfig: ApplicationConfig = {
55
  providers: [
56
    provideZoneChangeDetection({ eventCoalescing: true }),
57
    {
58
      provide: HOT_GLOBAL_CONFIG,
59
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
60
    },
61
  ],
62
};
63
/* end-file */

1
<div>
2
  <example4-read-only-cells></example4-read-only-cells>
3
</div>

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