JSFiddle - React, Tailwind, and code Playground

by Divya102014

HTML

<link rel="stylesheet" href="//docs.handsontable.com/0.24.3/bower_components/handsontable/dist/handsontable.full.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//docs.handsontable.com/0.24.3/bower_components/handsontable/dist/handsontable.full.js"></script>



<h2>handsontable-excel demo</h2>

<div id="grid" class="dataTable"></div>

CSS

body {
  background-color: white;
  margin: 20px;
}

h2 {
  margin: 20px 0;
}

tr:nth-child(-n + 2) td {
  color: blue;
}

td:nth-child(-n + 3) {
  color: blue;
}

JavaScript

$("#grid").handsontable({
   data: [{'A':'gdfg','B':'fsgdf', 'C':'fsgdf','D':'fsgdf'}], 
  startRows: 5,
  startCols: 5,
  fixedColumnsLeft: 2,
  fixedRowsTop: 2,
  autoColumnSize: false,  
  colHeaders: ['<span tabindex="0" class="colHeader">A</span>','B','C','D'],
  contextMenu: false,
  rowHeights: function(row) {
    return 50;
  },
  defaultRowHeight: 50,
});