JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.bpratik.in/dev/DataTables/jquery.dataTables.js"></script>
<script src="http://www.bpratik.in/dev/DataTables/jquery.dataTables.columnFilter.js "></script>
<script src="http://www.bpratik.in/dev/DataTables/ColVis.min.js "></script>
<script src="http://www.bpratik.in/dev/DataTables/FixedColumns.min.js "></script>
<script src="http://www.bpratik.in/dev/DataTables/TableTools/ZeroClipboard.js "></script>
<script src="http://www.bpratik.in/dev/DataTables/TableTools/TableTools.min.js "></script>
<script src="http://www.bpratik.in/dev/DataTables/DataTablesExtensions.js "></script>
<fieldset class="">
<legend>Grid: </legend>
<table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
<thead>
<tr>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test thisthing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test this thing</th>
<th>test thisthing</th>
...
CSS
.standard-grid, .standard-grid td, .standard-grid th {
border: solid black thin;
}
.standard-grid1, .standard-grid1 td, .standard-grid1 th {
border: solid black thin;
}
.full-width {
width: 100%;
}
/*.content-scrollable{
overflow-x: scroll;
}
*/
JavaScript
$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
//"sDom": 't',
"sDom": '<"H"CTrf>t<"F"lip>',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
//"sScrollY": "500px",
//"sScrollX": "100%",
"sScrollXInner": "110%",
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())
});