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

To disable a cell

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>

To disable a column

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. 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.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example1-disabled-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 {
14

15
  readonly data = [
16
    { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
17
    { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
18
    { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
19
    { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    height: 'auto',
24
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
25
    autoWrapRow: true,
26
    autoWrapCol: true,
27
    columns: [
28
      {
29
        data: 'car',
30
        readOnly: true,
31
      },
32
      {
33
        data: 'year',
34
      },
35
      {
36
        data: 'chassis',
37
      },
38
      {
39
        data: 'bumper',
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
  <example1-disabled-cells></example1-disabled-cells>
3
</div>

To disable a row

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-disabled-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-disabled-cells></example2-disabled-cells>
3
</div>

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

To disable 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. You can also define a special renderer function that will dim the editor value, providing a visual cue that the cell is non-editable.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example3-disabled-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 {
14

15
  readonly data = [
16
    { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
17
    { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
18
    { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
19
    { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    height: 'auto',
24
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
25
    autoWrapRow: true,
26
    autoWrapCol: true,
27
    columns: [
28
      {
29
        data: 'car',
30
        editor: false,
31
      },
32
      {
33
        data: 'year',
34
        editor: 'numeric',
35
      },
36
      {
37
        data: 'chassis',
38
        editor: 'text',
39
      },
40
      {
41
        data: 'bumper',
42
        editor: 'text',
43
      },
44
    ]
45
  };
46
}
47
/* end-file */
48

49

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

55
// register Handsontable's modules
56
registerAllModules();
57

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

1
<div>
2
  <example3-disabled-cells></example3-disabled-cells>
3
</div>

To disable a cell

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-disabled-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-disabled-cells></example4-disabled-cells>
3
</div>

Configuration options

readOnly

readOnlyCellClassName

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.

Disabled cells

Overview

To disable a cell

To disable a column

To disable a row

To disable a column (non-editable)

To disable a cell

Related API reference

Result