Navigation
Victoria Baker
 Santa Ana, CA

Handsontable- Custom & Checkboxes

StatisticsInvoicesSchedule
HomeHandsontableCustom & checkboxes
Support
Settings
Account securityAnalyticsAccessibility
All settings
Custom renderers
Rendering custom HTML in cells

This example shows how to use custom cell renderers to display HTML content in a cell. This is a very powerful feature. Just remember to escape any HTML code that could be used for XSS attacks. In the below configuration all columns except the first one use built-in HTML renderer that allows any HTML. Icon column accepts image URL as a string and converts it to a <img>in the renderer.

Icon
Name
Description
Sales
Rating
Limitless - Responsive Web Application KitLimitless is one of the best application templates ever built. Very flexible and clean admin template based on Bootstrap and Less. Available in 4 different layouts.12930
35 ratings
Londinium - responsive bootstrap 3 admin templateLondinium – a new premium admin skin with lots of custom elements, plugins and very flexible content structure. Londinium is powered with Bootstrap framework.8509
56 ratings
It's Brain - Responsive Bootstrap 3 Admin TemplateIt's Brain admin template is based on Bootstrap framework and includes a lot of different features. Comes with fixed and liquid layouts in both light and dark versions.3902
453 ratings
Icon
Name
Description
Sales
Rating
Rendering custom HTML in header

You can also put HTML into row and column headers. If you need to attach events to DOM elements like the checkbox below, just remember to identify the element by class name, not by id. This is because row and column headers are duplicated in the DOM tree and id attribute must be unique. Checking checkbox adds background color to the whole column.

Brand
Model
Date
Price
Share %
MercedesGL50011/01/2015
▼
32,500.00 $64%
ChevroletCamaro11/02/2015
▼
42,400.00 $37%
DodgeCharger11/03/2015
▼
24,900.00 $33%
HummerH311/04/2015
▼
54,000.00 $15%
ChevroletTahoe11/05/2015
▼
29,300.00 $27%
ToyotaLand Cruiser11/06/2015
▼
54,500.00 $43%
NissanGTR11/07/2015
▼
44,900.00 $35%
PorscheCayenne11/08/2015
▼
35,000.00 $63%
VolkswagenTouareg11/09/2015
▼
41,000.00 $15%
BMWX511/10/2015
▼
48,800.00 $35%
AudiQ711/11/2015
▼
21,000.00 $53%
CadillacEscalade11/12/2015
▼
63,900.00 $38%
Brand
Model
Date
Price
Share %
Changing cell type

This example makes use of a plugin hook to add a custom dropdown menu to the cell header. It adds a customizable button to columns headers and attaches dropdown menu to each button with list of cell types. If column already has a type, active menu item is highlighted with checkmark icon. Cell formatting is also supported in all cell types.

A
B
C
D
E
MercedesGL50011/01/2015
▼
32,500.00 $64%
ChevroletCamaro11/02/2015
▼
42,400.00 $37%
DodgeCharger11/03/2015
▼
24,900.00 $33%
HummerH311/04/2015
▼
54,000.00 $15%
ChevroletTahoe11/05/2015
▼
29,300.00 $27%
ToyotaLand Cruiser11/06/2015
▼
54,500.00 $43%
NissanGTR11/07/2015
▼
44,900.00 $35%
PorscheCayenne11/08/2015
▼
35,000.00 $63%
VolkswagenTouareg11/09/2015
▼
41,000.00 $15%
BMWX511/10/2015
▼
48,800.00 $35%
AudiQ711/11/2015
▼
21,000.00 $53%
CadillacEscalade11/12/2015
▼
63,900.00 $38%
A
B
C
D
E
Checkboxes
Checkbox true/false values

The following examples show how to configure Handsontable with Checkbox cell type, which can be helpfull when you have cells that contains only 2 possible values. Data in such cells will be rendered as checkbox and can be easily changed by checking/unchecking the checkbox. Checking and unchecking can be performed using mouse or by pressing SPACE. You can also change the state of multiple cells at once. Here columns data have trueor falsevalue and we want to display ony checkboxes.

Brand
Model
Year
Price
Available
MercedesGL500201232,500.00 $
ChevroletCamaro201242,400.00 $
DodgeCharger201224,900.00 $
HummerH3201254,000.00 $
ChevroletTahoe201229,300.00 $
ToyotaLand Cruiser201254,500.00 $
NissanGTR201244,900.00 $
PorscheCayenne201235,000.00 $
VolkswagenTouareg201241,000.00 $
BMWX5201248,800.00 $
AudiQ7201221,000.00 $
CadillacEscalade201263,900.00 $
Brand
Model
Year
Price
Available
Checkbox labels

The following example demonstrates an ability to use a cell as a text label. If you want to add label to the checkbox you can use labeloption. With this option you can declare where label will be injected (before or after checkbox element) and from what data source label text will be updated. Here checkbox labels are taken from "Model"data source.

Brand
Model
Date
Price
Share
Mercedes11/01/2015
▼
32,500.00 $64%
Chevrolet11/02/2015
▼
42,400.00 $37%
Dodge11/03/2015
▼
24,900.00 $33%
Hummer11/04/2015
▼
54,000.00 $15%
Chevrolet11/05/2015
▼
29,300.00 $27%
Toyota11/06/2015
▼
54,500.00 $43%
Nissan11/07/2015
▼
44,900.00 $35%
Porsche11/08/2015
▼
35,000.00 $63%
Volkswagen11/09/2015
▼
41,000.00 $15%
BMW11/10/2015
▼
48,800.00 $35%
Audi11/11/2015
▼
21,000.00 $53%
Cadillac11/12/2015
▼
63,900.00 $38%
Brand
Model
Date
Price
Share
Checkbox template

The following example demonstrates how to use checkbox templates. If you want use other values than trueand false, you have to provide this information using checkedTemplateand uncheckedTemplateadded to columns: []configuration. Handsontable will then update your data using appropriate template.

Brand
Model
Year
Price
Available
MercedesGL500201232,500.00 $
ChevroletCamaro201242,400.00 $
DodgeCharger201224,900.00 $
HummerH3201254,000.00 $
ChevroletTahoe201229,300.00 $
ToyotaLand Cruiser201254,500.00 $
NissanGTR201244,900.00 $
PorscheCayenne201235,000.00 $
VolkswagenTouareg201241,000.00 $
BMWX5201248,800.00 $
AudiQ7201221,000.00 $
CadillacEscalade201263,900.00 $
Brand
Model
Year
Price
Available