Handsontable example

by konijn_gmail_com

HTML

<h2>Rendering custom HTML in cells</h2>

<p>This example shows how to use custom cell renderers to display HTML content in a cell.</p>

<p>This is a very powerful feature. Just remember to escape any HTML code that could be used for XSS
  attacks.</p>

<p>In the below configuration:</p>

<ul>
  <li><strong>Title</strong> 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 <code>&lt;script&gt;</code> or other potentially malicious tags using the cell editor!</li>
  <li><strong>Description</strong> column also uses HTML renderer (same as above)</li>
  <li><strong>Comments</strong> column uses a custom renderer (<code>safeHtmlRenderer</code>). This should be safe for user input, because only certain tags are allowed</li>
  <li><strong>Cover</strong> column accepts image URL as a string and converts it to a <code>&lt;img&gt;</code> in the renderer</li>
</ul>

<div id="example1" class="handsontable"></div>

<p>
  <button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">
    Dump data to console
  </button>
</p>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function () {

  var data = [
      {
        title: "<a href='http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691'>Professional JavaScript for Web Developers</a>",
        description: "This <a href='http://bit.ly/sM1bDf'>book</a> provides a developer-level introduction along with more advanced and useful features of <b>JavaScript</b>.",
        comments: "I would rate it &#x2605;&#x2605;&#x2605;&#x2605;&#x2606;",
        cover: "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg"
      },
      {
        title: "<a href='http://shop.oreilly.com/product/9780596517748.do'>JavaScript: The Good Parts</a>",
        description: "This book provides a developer-level introduction along with <b>more advanced</b> and useful features of JavaScript.",
        comments: "This is <big>the</big> book about JavaScript",
        cover: "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL50_.jpg"
      },
      {
        title: "<a href='http://shop.oreilly.com/product/9780596805531.do'>JavaScript: The Definitive Guide</a>",
        description: "<em>JavaScript: The Definitive Guide</em> provides a thorough description of the core <b>JavaScript</b> language and both the legacy and standard DOMs implemented in web browsers.",
        comments: "I've never actually read it, but the <a href='http://shop.oreilly.com/product/9780596805531.do'>comments</a> are highly <strong>positive</strong>.",
        cover: "http://ecx.images-amazon.com/images/I/51VFNL4T7kL._SL50_.jpg"
      }
    ],
    container1,
    hot1;
  
  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    minSpareRows: 1,
    colWidths: [200, 200, 200, 60],
    colHeaders: ["Title", "Description", "Comments", "Cover"],
    columns: [
      {data: "title", renderer: "html"},
      {data: "description", renderer: "html"},
      {data: "comments", renderer: safeHtmlRenderer},
      {data: "cover",...