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 grid

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

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

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

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

30
/* file: app.module.ts */
31
import { NgModule, ApplicationConfig } from '@angular/core';
32
import { BrowserModule } from '@angular/platform-browser';
33
import { registerAllModules } from 'handsontable/registry';
34
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
35
import { CommonModule } from '@angular/common';
36
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
37

38
/* start:skip-in-compilation */
39
import { ExampleReadonlyGridComponent } from './app.component';
40
/* end:skip-in-compilation */
41

42
// register Handsontable's modules
43
registerAllModules();
44

45
export const appConfig: ApplicationConfig = {
46
  providers: [
47
    {
48
      provide: HOT_GLOBAL_CONFIG,
49
      useValue: {
50
        license: NON_COMMERCIAL_LICENSE,
51
      } as HotGlobalConfig
52
    }
53
  ],
54
};
55

56
@NgModule({
57
  imports: [ BrowserModule, HotTableModule, CommonModule ],
58
  declarations: [ ExampleReadonlyGridComponent ],
59
  providers: [...appConfig.providers],
60
  bootstrap: [ ExampleReadonlyGridComponent ]
61
})
62

63
export class AppModule { }
64
/* end-file */

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

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.

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

5
@Component({
6
  selector: 'example1-disabled-cells',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`,
11
})
12
export class Example1DisabledCellsComponent {
13

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
    height: 'auto',
23
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
24
    autoWrapRow: true,
25
    autoWrapCol: true,
26
    columns: [
27
      {
28
        data: 'car',
29
        readOnly: true,
30
      },
31
      {
32
        data: 'year',
33
      },
34
      {
35
        data: 'chassis',
36
      },
37
      {
38
        data: 'bumper',
39
      },
40
    ]
41
  };
42
}
43
/* end-file */
44

45

46
/* file: app.module.ts */
47
import { NgModule, ApplicationConfig } from '@angular/core';
48
import { BrowserModule } from '@angular/platform-browser';
49
import { registerAllModules } from 'handsontable/registry';
50
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
51
import { CommonModule } from '@angular/common';
52
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
53
/* start:skip-in-compilation */
54
import { Example1DisabledCellsComponent } from './app.component';
55
/* end:skip-in-compilation */
56

57
// register Handsontable's modules
58
registerAllModules();
59

60
export const appConfig: ApplicationConfig = {
61
  providers: [
62
    {
63
      provide: HOT_GLOBAL_CONFIG,
64
      useValue: {
65
        license: NON_COMMERCIAL_LICENSE,
66
      } as HotGlobalConfig
67
    }
68
  ],
69
};
70

71
@NgModule({
72
  imports: [ BrowserModule, HotTableModule, CommonModule ],
73
  declarations: [ Example1DisabledCellsComponent ],
74
  providers: [...appConfig.providers],
75
  bootstrap: [ Example1DisabledCellsComponent ]
76
})
77

78
export class AppModule { }
79
/* end-file */

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

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.

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

5
@Component({
6
  selector: 'example2-disabled-cells',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`,
11
})
12
export class Example2DisabledCellsComponent implements AfterViewInit {
13
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
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
  };
28

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

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

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

45

46
/* file: app.module.ts */
47
import { NgModule, ApplicationConfig } from '@angular/core';
48
import { BrowserModule } from '@angular/platform-browser';
49
import { registerAllModules } from 'handsontable/registry';
50
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
51
import { CommonModule } from '@angular/common';
52
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
53
/* start:skip-in-compilation */
54
import { Example2DisabledCellsComponent } from './app.component';
55
/* end:skip-in-compilation */
56

57
// register Handsontable's modules
58
registerAllModules();
59

60
export const appConfig: ApplicationConfig = {
61
  providers: [
62
    {
63
      provide: HOT_GLOBAL_CONFIG,
64
      useValue: {
65
        license: NON_COMMERCIAL_LICENSE,
66
      } as HotGlobalConfig
67
    }
68
  ],
69
};
70

71
@NgModule({
72
  imports: [ BrowserModule, HotTableModule, CommonModule ],
73
  declarations: [ Example2DisabledCellsComponent ],
74
  providers: [...appConfig.providers],
75
  bootstrap: [ Example2DisabledCellsComponent ]
76
})
77

78
export class AppModule { }
79
/* 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.

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.

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

5
@Component({
6
  selector: 'example3-disabled-cells',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`,
11
})
12
export class Example3DisabledCellsComponent {
13

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

48

49
/* file: app.module.ts */
50
import { NgModule, ApplicationConfig } from '@angular/core';
51
import { BrowserModule } from '@angular/platform-browser';
52
import { registerAllModules } from 'handsontable/registry';
53
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
54
import { CommonModule } from '@angular/common';
55
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
56
/* start:skip-in-compilation */
57
import { Example3DisabledCellsComponent } from './app.component';
58
/* end:skip-in-compilation */
59

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

63
export const appConfig: ApplicationConfig = {
64
  providers: [
65
    {
66
      provide: HOT_GLOBAL_CONFIG,
67
      useValue: {
68
        license: NON_COMMERCIAL_LICENSE,
69
      } as HotGlobalConfig
70
    }
71
  ],
72
};
73

74
@NgModule({
75
  imports: [ BrowserModule, HotTableModule, CommonModule ],
76
  declarations: [ Example3DisabledCellsComponent ],
77
  providers: [...appConfig.providers],
78
  bootstrap: [ Example3DisabledCellsComponent ]
79
})
80

81
export class AppModule { }
82
/* end-file */

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

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.

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

5
@Component({
6
  selector: 'example4-disabled-cells',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`,
11
})
12
export class Example4DisabledCellsComponent implements AfterViewInit {
13
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
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
  };
28

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

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

44

45
/* file: app.module.ts */
46
import { NgModule, ApplicationConfig } from '@angular/core';
47
import { BrowserModule } from '@angular/platform-browser';
48
import { registerAllModules } from 'handsontable/registry';
49
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
50
import { CommonModule } from '@angular/common';
51
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
52
/* start:skip-in-compilation */
53
import { Example4DisabledCellsComponent } from './app.component';
54
/* end:skip-in-compilation */
55

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

59
export const appConfig: ApplicationConfig = {
60
  providers: [
61
    {
62
      provide: HOT_GLOBAL_CONFIG,
63
      useValue: {
64
        license: NON_COMMERCIAL_LICENSE,
65
      } as HotGlobalConfig
66
    }
67
  ],
68
};
69

70
@NgModule({
71
  imports: [ BrowserModule, HotTableModule, CommonModule ],
72
  declarations: [ Example4DisabledCellsComponent ],
73
  providers: [...appConfig.providers],
74
  bootstrap: [ Example4DisabledCellsComponent ]
75
})
76

77
export class AppModule { }
78
/* end-file */

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

Configuration options

readOnly

readOnlyCellClassName