Handsontable example

by Luiz Vargas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

#hot-display-license-info{
  display:none;
}
</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var
    data = [
      {
        title: " <p>Plus-sign icon as a link:<a href='#'><span class='glyphicon glyphicon-plus-sign'></span></a></p>",
        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: "https://handsontable.com/docs/images/examples/professional-javascript-developers-nicholas-zakas.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 the book about JavaScript",
        cover: "https://handsontable.com/docs/images/examples/javascript-the-good-parts.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: "https://handsontable.com/docs/images/examples/javascript-the-definitive-guide.jpg"
      }
    ],
    container1,
    hot1;
  
  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: [200, 200, 200, 80],
    colHeaders: ["Title", "Description", "Comments", "Cover"],
    columns: [
      {data: "title", renderer: "html"},
      {data: "description", renderer: "html"},
      {data: "comments", renderer: safeHtmlRenderer},
      {data: "cover", renderer: coverRenderer}
    ],
   ...