English
Deutsch
Українська
España
Русский
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.
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.
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.
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 true or false value and we want to display ony checkboxes.
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 label option. 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.
Checkbox template
The following example demonstrates how to use checkbox templates. If you want use other values than true and false, you have to provide this information using checkedTemplate and uncheckedTemplate added to columns: [] configuration. Handsontable will then update your data using appropriate template.