JSFiddle - React, Tailwind, and code Playground

by sunil puvvada

HTML

<ul class="nav nav-pills nav-pills-small" role="tablist" id='financial-statements-tabs'>
  <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<br>
<br>
<div class="tab-content" id='tabs' style='width: 550px'>
  <div class="tab-pane active" id="tab1">
      <div id='tab1hot' style='width: 100%, overflow: auto'></div>
   </div>
  <div class="tab-pane" id="tab2">
      <div id='tab2hot' style='width: 100%, overflow: auto'></div>
  </div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

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

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">

CoffeeScript

$(document).ready ->
  createBigData = ->
    rows = []
    i = undefined
    j = undefined
    i = 0
    while i < 1000
      row = []
      j = 0
      while j < 6
        row.push Handsontable.helper.spreadsheetColumnLabel(j) + (i + 1)
        j++
      rows.push row
      i++
    rows

  $('#tab1hot').handsontable
    data: createBigData()
    colWidths: 50
    rowHeaders: false
    colHeaders: false
    stretchH: "all"
    minSpareRows: 0
    contextMenu: false
    height: ->
      winH = $(window).height()
      $('#tab1hot').height(winH - 300)
        
  $('#tab2hot').handsontable
    data: createBigData()
    colWidths: 50
    rowHeaders: false
    colHeaders: false
    stretchH: "all"
    minSpareRows: 0
    contextMenu: false
    height: ->
      winH = $(window).height()
      $('#tab2hot').height(winH - 300)
      
$(document).on 'click', '.nav-pills a', ->
  $($(this).attr('href')).find('div').handsontable().render()