JSFiddle - React, Tailwind, and code Playground

by Rohit Nigam

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.6/handsontable.full.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.6/handsontable.full.js"></script>
<div class="handsontable" id="example1" style="width: 400px; height: 200px; overflow: auto"></div>

CSS

#example1{
    font-size:12px;
}

JavaScript

$(document).ready(function () {

  function getData() {
    return [
      ['', 'Frequency', 'Temp', 'Quat', 'Srt'],
      ['A', 10, 11, 12, 13],
      ['B', 20, 11, 14, 13],
      ['C', 10, 11, 12, 13],
      ['D', 20, 11, 14, 13],
      ['E', 10, 11, 12, 13],
      ['F', 20, 11, 14, 13],
      ['G', 10, 11, 12, 13],
      ['H', 20, 11, 14, 13],
      ['I', 10, 11, 12, 13],
      ['J', 20, 11, 14, 13],
      ['K', 10, 11, 12, 13],
      ['L', 20, 11, 14, 13],
      ['M', 10, 11, 12, 13],
      ['N', 20, 11, 14, 13],
      ['O', 10, 11, 12, 13],
      ['P', 20, 11, 14, 13],
      ['Q', 10, 11, 12, 13],
      ['R', 20, 11, 14, 13],
      ['S', 30, 15, 12, 13]
    ];
  }
  
  var container = document.getElementById('example1'),
    hot1;
  
  hot1 = Handsontable(container, {
    data: getData(),   
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    comments: true,
    cell: [
      {row: 1, col: 0, comment: 'Guest contact report does not capture gender'},
      {row: 2, col: 0, comment: 'Duplicate package showing on double click'},
      {row: 5, col: 0, comment: 'Taking More Time in Creating TA Reservations'},
      {row: 7, col: 0, comment: 'on double click system give error for duplicate in admine console'},
      {row: 9, col: 0, comment: 'When modifing  any reservation from 3rd party channel need to transfer the payment'}
    ]
  });
  


});