JSFiddle - React, Tailwind, and code Playground

HTML

<div id="handson" style="width: 600px;"></div>
<div id="debug">
	<ul>
		<li>Cell coordinates: <span id="cell_coord"></span></li>
		<li>Cell content: <span id="cell_content"></span></li>
		<li>Row header from table: <span id="header_from_table"></span></li>
	</ul>
</div>

CSS

</style>

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

<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>

<style type="text/css">

JavaScript

$(document).ready(function () {

  var container = document.getElementById('handson');
  
  var data = function () {
   return [["1212", "roman", "i", "ii", "iii"],
           ["3121", "numeric", 1, 2 ,3],
           ["4126", "alpha", 'a', 'b', 'c']];
  };
    
    function customRenderer(instance, td, row, col) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        if([0, 1].indexOf(col) > -1) {
          td.style.display =  "none";
        }
        return td;
    }

  var dataCols = []
  for(var i=0; i<data()[0].length; i++) {
      dataCols.push({ data: i, renderer: customRenderer })
  }
  
  var hot = new Handsontable(container, {
    data: data(),
    height: 396,
    colHeaders: true,
    rowHeaders: false,
    columns: dataCols,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: {
      callback: function(key, options) {
        switch(key) {
        case 'header_pls':
          var coordinates = '[row:' +options.start.row + ' - col:' + options.start.col+']';
          document.getElementById('cell_coord').innerHTML = coordinates;

          var content = hot.getDataAtCell(options.start.row, options.start.col);
          document.getElementById('cell_content').innerHTML = content;

          var header_from_table = hot.getDataAtCell(options.start.row, 0);
          document.getElementById('header_from_table').innerHTML = header_from_table;
          
          break;
        }
      },
      items: {
        "header_pls": {
          name: "Header please?"
        }
      }
    },
  });
  
});