JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/plug-ins/505bef35b56/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<script src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="http://lucentinnovation.com/demo/badmc/charts/bootstrap/css/bootstrap.min.css">
<table class="table table-hover table-striped table-bordered table-highlight-head dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
<thead class="">
<tr class="" role="row">
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 111px;">Date/Commodity</th>
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 50px;">January 2008</th>
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 58px;">February 2008</th>
</tr>
</thead>
<tbody class="" role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" ">Bean</td>
<td class=" ">0.00</td>
<td class=" ">158.75</td>
</tr>
</tbody>
</table>
CSS
body {
font-size: 140%;
}
div.DTTT {
margin-bottom: 0.5em;
float: right;
}
div.dataTables_wrapper {
clear: both;
}
JavaScript
$(document).ready(function () {
$('table').dataTable({
"bSort": false,
"bPaginate": false,
"bFilter": false,
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "http://lucentinnovation.com/demo/badmc/charts/plugins/datatables/tabletools/swf/copy_csv_xls_pdf.swf"
}
});
});