Checkbox cell type

Create interactive elements that can be checked or unchecked, by using the checkbox cell type.

Overview

Data in these cells will be rendered as a checkbox and you can easily change it by checking/unchecking the checkbox.

To check the box, use the mouse or press Space or Enter.

To uncheck the box, use the mouse or press Space, Enter, Delete or Backspace.

You can change the state of multiple cells at once by selecting the cells you want to change and pressing Space.

Checkbox true/false values

This is the default usage scenario where column data has a true or false value, and we only want to display checkboxes.

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

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

14
  readonly data = [
15
    {
16
      car: 'Mercedes A 160',
17
      year: 2017,
18
      available: true,
19
      comesInBlack: 'yes',
20
    },
21
    {
22
      car: 'Citroen C4 Coupe',
23
      year: 2018,
24
      available: false,
25
      comesInBlack: 'yes',
26
    },
27
    {
28
      car: 'Audi A4 Avant',
29
      year: 2019,
30
      available: true,
31
      comesInBlack: 'no',
32
    },
33
    {
34
      car: 'Opel Astra',
35
      year: 2020,
36
      available: false,
37
      comesInBlack: 'yes',
38
    },
39
    {
40
      car: 'BMW 320i Coupe',
41
      year: 2021,
42
      available: false,
43
      comesInBlack: 'no',
44
    },
45
  ];
46

47
  readonly gridSettings: GridSettings = {
48
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
49
    height: 'auto',
50
    autoWrapRow: true,
51
    autoWrapCol: true,
52
    columns: [
53
      {
54
        data: 'car',
55
      },
56
      {
57
        data: 'year',
58
        type: 'numeric',
59
      },
60
      {
61
        data: 'available',
62
        type: 'checkbox',
63
      },
64
    ]
65
  };
66
}
67
/* end-file */
68

69

70
/* file: app.module.ts */
71
import { NgModule, ApplicationConfig } from '@angular/core';
72
import { BrowserModule } from '@angular/platform-browser';
73
import { registerAllModules } from 'handsontable/registry';
74
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
75
import { CommonModule } from '@angular/common';
76
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
77
/* start:skip-in-compilation */
78
import { Example1CheckboxCellTypeComponent } from './app.component';
79
/* end:skip-in-compilation */
80

81
// register Handsontable's modules
82
registerAllModules();
83

84
export const appConfig: ApplicationConfig = {
85
  providers: [
86
    {
87
      provide: HOT_GLOBAL_CONFIG,
88
      useValue: {
89
        license: NON_COMMERCIAL_LICENSE,
90
      } as HotGlobalConfig
91
    }
92
  ],
93
};
94

95
@NgModule({
96
  imports: [ BrowserModule, HotTableModule, CommonModule ],
97
  declarations: [ Example1CheckboxCellTypeComponent ],
98
  providers: [...appConfig.providers],
99
  bootstrap: [ Example1CheckboxCellTypeComponent ]
100
})
101

102
export class AppModule { }
103
/* end-file */

1
<div>
2
  <example1-checkbox-cell-type></example1-checkbox-cell-type>
3
</div>

Checkbox template

If you want to use values other than true and false, you have to provide this information using checkedTemplate and uncheckedTemplate. Handsontable will then update your data using the appropriate template.

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

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

14
  readonly data = [
15
    {
16
      car: 'Mercedes A 160',
17
      year: 2017,
18
      available: true,
19
      comesInBlack: 'yes',
20
    },
21
    {
22
      car: 'Citroen C4 Coupe',
23
      year: 2018,
24
      available: false,
25
      comesInBlack: 'yes',
26
    },
27
    {
28
      car: 'Audi A4 Avant',
29
      year: 2019,
30
      available: true,
31
      comesInBlack: 'no',
32
    },
33
    {
34
      car: 'Opel Astra',
35
      year: 2020,
36
      available: false,
37
      comesInBlack: 'yes',
38
    },
39
    {
40
      car: 'BMW 320i Coupe',
41
      year: 2021,
42
      available: false,
43
      comesInBlack: 'no',
44
    },
45
  ];
46

47
  readonly gridSettings: GridSettings = {
48
    colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],
49
    height: 'auto',
50
    autoWrapRow: true,
51
    autoWrapCol: true,
52
    columns: [
53
      {
54
        data: 'car',
55
      },
56
      {
57
        data: 'year',
58
        type: 'numeric',
59
      },
60
      {
61
        data: 'comesInBlack',
62
        type: 'checkbox',
63
        checkedTemplate: 'yes',
64
        uncheckedTemplate: 'no',
65
      },
66
    ]
67
  };
68
}
69
/* end-file */
70

71

72
/* file: app.module.ts */
73
import { NgModule, ApplicationConfig } from '@angular/core';
74
import { BrowserModule } from '@angular/platform-browser';
75
import { registerAllModules } from 'handsontable/registry';
76
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
77
import { CommonModule } from '@angular/common';
78
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
79
/* start:skip-in-compilation */
80
import { Example2CheckboxCellTypeComponent } from './app.component';
81
/* end:skip-in-compilation */
82

83
// register Handsontable's modules
84
registerAllModules();
85

86
export const appConfig: ApplicationConfig = {
87
  providers: [
88
    {
89
      provide: HOT_GLOBAL_CONFIG,
90
      useValue: {
91
        license: NON_COMMERCIAL_LICENSE,
92
      } as HotGlobalConfig
93
    }
94
  ],
95
};
96

97
@NgModule({
98
  imports: [ BrowserModule, HotTableModule, CommonModule ],
99
  declarations: [ Example2CheckboxCellTypeComponent ],
100
  providers: [...appConfig.providers],
101
  bootstrap: [ Example2CheckboxCellTypeComponent ]
102
})
103

104
export class AppModule { }
105
/* end-file */

1
<div>
2
  <example2-checkbox-cell-type></example2-checkbox-cell-type>
3
</div>

Checkbox labels

To add a label to the checkbox, use the label option. You can declare where the label will be injected with this option - either before or after the checkbox element. You can also declare from which data source the label text will be updated.

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

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

14
  readonly data = [
15
    {
16
      car: 'Mercedes A 160',
17
      year: 2017,
18
      available: true,
19
      comesInBlack: 'yes',
20
    },
21
    {
22
      car: 'Citroen C4 Coupe',
23
      year: 2018,
24
      available: false,
25
      comesInBlack: 'yes',
26
    },
27
    {
28
      car: 'Audi A4 Avant',
29
      year: 2019,
30
      available: true,
31
      comesInBlack: 'no',
32
    },
33
    {
34
      car: 'Opel Astra',
35
      year: 2020,
36
      available: false,
37
      comesInBlack: 'yes',
38
    },
39
    {
40
      car: 'BMW 320i Coupe',
41
      year: 2021,
42
      available: false,
43
      comesInBlack: 'no',
44
    },
45
  ];
46

47
  readonly gridSettings: GridSettings = {
48
    colHeaders: ['Car model', 'Accepted', 'Comes in black'],
49
    height: 'auto',
50
    autoWrapRow: true,
51
    autoWrapCol: true,
52
    columns: [
53
      {
54
        data: 'car',
55
      },
56
      {
57
        data: 'available',
58
        type: 'checkbox',
59
        label: {
60
          position: 'after',
61
          property: 'car', // Read value from row object
62
        },
63
      },
64
      {
65
        data: 'comesInBlack',
66
        type: 'checkbox',
67
        checkedTemplate: 'yes',
68
        uncheckedTemplate: 'no',
69
        label: {
70
          position: 'before',
71
          value: 'In black? ',
72
        },
73
      },
74
    ]
75
  };
76
}
77
/* end-file */
78

79

80
/* file: app.module.ts */
81
import { NgModule, ApplicationConfig } from '@angular/core';
82
import { BrowserModule } from '@angular/platform-browser';
83
import { registerAllModules } from 'handsontable/registry';
84
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
85
import { CommonModule } from '@angular/common';
86
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
87
/* start:skip-in-compilation */
88
import { Example3CheckboxCellTypeComponent } from './app.component';
89
/* end:skip-in-compilation */
90

91
// register Handsontable's modules
92
registerAllModules();
93

94
export const appConfig: ApplicationConfig = {
95
  providers: [
96
    {
97
      provide: HOT_GLOBAL_CONFIG,
98
      useValue: {
99
        license: NON_COMMERCIAL_LICENSE,
100
      } as HotGlobalConfig
101
    }
102
  ],
103
};
104

105
@NgModule({
106
  imports: [ BrowserModule, HotTableModule, CommonModule ],
107
  declarations: [ Example3CheckboxCellTypeComponent ],
108
  providers: [...appConfig.providers],
109
  bootstrap: [ Example3CheckboxCellTypeComponent ]
110
})
111

112
export class AppModule { }
113
/* end-file */

1
<div>
2
  <example3-checkbox-cell-type></example3-checkbox-cell-type>
3
</div>

Label value as a function

The value property of the label option can also be a function. The function receives four arguments: row, column, prop, and value, where value is the current cell value. This lets you generate label text dynamically based on the cell’s state.

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

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

14
  readonly data = [
15
    { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },
16
    { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },
17
    { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },
18
    { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },
19
    { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    colHeaders: ['Car model', 'Year', 'Comes in black'],
24
    height: 'auto',
25
    autoWrapRow: true,
26
    autoWrapCol: true,
27
    columns: [
28
      {
29
        data: 'car',
30
      },
31
      {
32
        data: 'year',
33
      },
34
      {
35
        data: 'comesInBlack',
36
        type: 'checkbox',
37
        checkedTemplate: 'yes',
38
        uncheckedTemplate: 'no',
39
        label: {
40
          position: 'after',
41
          value: function(
42
            row: number,
43
            column: number,
44
            prop: string | number,
45
            value: string
46
          ) {
47
            if (value === 'yes') {
48
              return 'In black';
49
            } else {
50
              return 'Not in black';
51
            }
52
          },
53
        },
54
      },
55
    ]
56
  };
57
}
58
/* end-file */
59

60

61
/* file: app.module.ts */
62
import { NgModule, ApplicationConfig } from '@angular/core';
63
import { BrowserModule } from '@angular/platform-browser';
64
import { registerAllModules } from 'handsontable/registry';
65
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
66
import { CommonModule } from '@angular/common';
67
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
68
/* start:skip-in-compilation */
69
import { Example4CheckboxCellTypeComponent } from './app.component';
70
/* end:skip-in-compilation */
71

72
// register Handsontable's modules
73
registerAllModules();
74

75
export const appConfig: ApplicationConfig = {
76
  providers: [
77
    {
78
      provide: HOT_GLOBAL_CONFIG,
79
      useValue: {
80
        license: NON_COMMERCIAL_LICENSE,
81
      } as HotGlobalConfig
82
    }
83
  ],
84
};
85

86
@NgModule({
87
  imports: [ BrowserModule, HotTableModule, CommonModule ],
88
  declarations: [ Example4CheckboxCellTypeComponent ],
89
  providers: [...appConfig.providers],
90
  bootstrap: [ Example4CheckboxCellTypeComponent ]
91
})
92

93
export class AppModule { }
94
/* end-file */

1
<div>
2
  <example4-checkbox-cell-type></example4-checkbox-cell-type>
3
</div>

Windows	macOS	Action	Excel	Sheets
`Space`	`Space`	Check or uncheck the checkbox	✗	✓
`Enter`	`Enter`	Check or uncheck the checkbox	✗	✓
`Delete`	`Delete`	Uncheck the checkbox	✗	✓
`Backspace`	`Backspace`	Uncheck the checkbox	✗	✓