JSFiddle - React, Tailwind, and code Playground

by mpusarla

HTML

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

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/0.15.0/scripts/jquery.min.js"></script>
<script src="http://docs.handsontable.com/0.15.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var item1 = {};
    item1.title = "Title 1 ";
    item1.description = {};
    item1.description.text = "Desc 1";
    item1.description.toString = function() 
    { 
        return 'Updated Desc for 1';
    }
    
    var item2 = {};
    item2.title = "Title 2";
    item2.description = {};
    item2.description.text = "Desc 2";
    
    item2.description.toString = function() 
    { 
        return 'Updated Desc for 2 ';
    }
    
    var data = [];
    data.push(item1);
    data.push(item2);
    var container1, hot1;

  function customRenderer(instance, td, row, col, prop, value, cellProperties) {
    td.innerHTML =   '<div style="text-align:right">' + value.text;
  }
    
  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: [200, 200],
    colHeaders: ["Title", "Description"],
    columns: [
      {data: "title", renderer: "text"},
        {data: "description", renderer: customRenderer}
    ]
  });
});