JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css">
<link rel="stylesheet" href="http://cdn.datatables.net/scroller/1.2.2/css/dataTables.scroller.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js"></script>
<script src="http://cdn.datatables.net/scroller/1.2.2/js/dataTables.scroller.min.js"></script>
<div>
<fieldset class="panel holder-0">
<legend class="panel-heading panel-title">holder-1</legend>
<table class="holder-2">
<thead>
<tr>
<th>Header 0</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Header 0</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
</tr>
</tfoot>
</table>
</fieldset>
</div>
CSS
.clear {
clear: both;
height: 0;
}
JavaScript
$(document).ready(function() {
$(".holder-2").DataTable( {
dom: 'C<"clear">frti'
});
var dtHeight = 225;
$(".holder-2").DataTable( {
destroy: true,
scrollY: dtHeight,
dom: 'C<"clear">frtiS',
colVis: {
exclude: [0, 5, 6],
stateChange: function(iColumn, bVisible) {
var column = table.settings()[0].aoColumns[iColumn];
if (column.bSearchable !== bVisible) {
column.bSearchable = bVisible;
table.rows().invalidate();
}
}
}
});
alert( $.fn.DataTable.isDataTable( '.holder-2' ) );
} );