JavaScript Data GridCheckbox 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.
Car model | Year of manufacture | Available |
---|---|---|
Mercedes A 160 | 2017 | |
Citroen C4 Coupe | 2018 | |
Audi A4 Avant | 2019 | |
Opel Astra | 2020 | |
BMW 320i Coupe | 2021 |
Car model | Year of manufacture | Available |
---|
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.
Car model | Year of manufacture | Comes in black |
---|---|---|
Mercedes A 160 | 2017 | |
Citroen C4 Coupe | 2018 | |
Audi A4 Avant | 2019 | |
Opel Astra | 2020 | |
BMW 320i Coupe | 2021 |
Car model | Year of manufacture | Comes in black |
---|
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.
Car model | Accepted | Comes in black |
---|---|---|
Mercedes A 160 | ||
Citroen C4 Coupe | ||
Audi A4 Avant | ||
Opel Astra | ||
BMW 320i Coupe |
Car model | Accepted | Comes in black |
---|
Related keyboard shortcuts
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 | ✗ | ✓ |
Related articles
Related guides
Related API reference
- Configuration options:
- Core methods:
- Hooks:
There is a newer version of Handsontable available. Switch to the latest version ⟶