JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.datatables.net/download/build/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://www.datatables.net/media/css/jui_themes/smoothness/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css">
<button id="reInit">Reinit Table</button>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="testTbl">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeA odd">
<td class=" sorting_1">Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr><tr class="gradeA even">
<td class=" sorting_1">Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr><tr class="gradeA odd">
<td class=" sorting_1">Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr><tr class="gradeA even">
<td class=" sorting_1">Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr><tr class="gradeA odd">
<td class=" sorting_1">Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr><tr class="gradeA even">
<td class=" sorting_1">Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td...
JavaScript
var initTable = function() {
$('#testTbl').dataTable({
bJQueryUI: true,
bDestroy: true,
sScrollY: "243px",
sScrollX: "100%",
sScrollXInner: "100%",
bScrollCollapse: false
});
};
initTable();
$("#reInit").click(initTable);