Custom HTML in cells and headers

On this page:

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:

  • Title column uses built-in HTML renderer that allows any HTML. This is unsafe if your code comes from untrusted source. Take notice that a Handsontable user can use it to enter <script> or other potentially malicious tags using the cell editor!
  • Description column also uses HTML renderer (same as above)
  • Comments column uses a custom renderer (safeHtmlRenderer). This should be safe for user input, because only certain tags are allowed
  • Cover 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.

Changing cell type from a dropdown menu in cell header

This example makes use of a plugin hook to add a custom dropdown menu to the cell header