JSFiddle - React, Tailwind, and code Playground

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

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 dt1 = null, dt2 = null;
		
		function loadTable() {
			var r = $.parseJSON(json);
			
			dt1 = $('#one table').DataTable({		//broken using inactive panel
				data: r.payout,
				scrollY:        200,
				scrollCollapse: true,   // uncomment and X of X becomes -infinity of x with #two
				columns:		[
					  { title: 'Amount',	data: 'amount'}
					 ,{ title: 'Date',	data: 'date'}   
				]
			});
			
			dt2 = $('#two table').DataTable({		//broken using inactive panel
				data: r.ledger,
				scrollY:        200,
				scrollCollapse: true,   // uncomment and X of X becomes -infinity of x with #two
				columns:		[
					  { title: 'Earned', data: 'earned'}
					 ,{ title: 'Paid',	data: 'paid'}   
					 ,{ title: 'Owed',	data: 'owed'}   
				]
			});
		}
		
		$(document).ready(function(){
			loadTable();
			
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			  var dt = null;
			  
			  if (/one/.test(e.target.hash)) {
				dt = dt1;
			  } else if (/two/.test(e.target.hash)) {
				dt = dt2;
			  }
			  
			  if (dt) {
				dt.columns.adjust().draw();
			  }
			});
		});