JSFiddle - React, Tailwind, and code Playground

by webchemist

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.4.0/css/scroller.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.0/js/dataTables.scroller.min.js"></script>
<div class="panel">
  <div class="panel-body">
    <ul class="nav nav-tabs">
      <li><a data-toggle="tab" role="tab" aria-controls="one" href="#one">One</a></li>
      <li><a data-toggle="tab" role="tab" aria-controls="two" href="#two">Two</a></li>
      <li><a data-toggle="tab" role="tab" aria-controls="three" href="#three">Three</a></li>
    </ul>
    <div class="tab-content">
      <div id="one" class="tab-pane active" role="tabpanel">
        <h1>panel one</h1>
        <table></table>
      </div>
      <div id="two" class="tab-pane" role="tabpanel">
        <h1>panel two</h1>
        <table></table>
      </div>
      <div id="three" class="tab-pane" role="tabpanel">
        <h1>panel three</h1>
      </div>
    </div>
  </div>
</div>

JavaScript

function loadTable()
{
	var json = '{"payout":[{"amount":"50.00","date":"2015-10-29 19:36:49"},{"amount":"50.00","date":"2015-10-30 19:36:49"}],"ledger":{"earned":"111.78","paid":"100.00","owed":"11.78"}}';

	var r = $.parseJSON(json);
  
	//$('#one table').DataTable({  //works fine using active panel
  $('#two table').DataTable({		//broken using inactive panel
		 data:		       r.payout
    ,scroller:       true
    ,scrollY:        200    
  	  
    //,scrollCollapse: true   // uncomment and X of X becomes -infinity of x with #two
		,columns:		[
			  { title: 'Amount',	data: 'amount'}
			 ,{ title: 'Date',	data: 'date'}   
    ]
  });
}
$(document).ready(function(){
	loadTable();
});