JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/rr-1.2.0/se-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/rr-1.2.0/se-1.2.0/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.jqueryui.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.jqueryui.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
</tr>
</thead>
<tfoot>
<tr>
...
CSS
.dt-buttons{
float:right;
margin-left:5px;
margin-bottom:7px;
}
.dataTables_wrapper{
margin-top:10px;
}
button.dt-button, div.dt-button, a.dt-button{
border-radius: 5px;
}
JavaScript
$(document).ready(function() {
'use strict';
var oTable= $('#example').DataTable( {
"scrollY": true,
"scrollX": true,
scroller:true,
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0];
}
} ),
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return '<tr>'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>';
} ).join('');
return $('<table/>').append( data );
}
}
},
"columnDefs": [ {
"targets": 1,
"render": function ( type, full, meta ) {
return '<a href="/test/test.html">Download</a>';
}
} ],
colReorder: true,
fixedColumns: {
leftColumns: 0
},
"sDom": 'Bl<"clear">Wfrtip',
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ],
],
"buttons": [
{
extend:'pageLength',
autoClose: true,
text: '<i class="fa fa-list-ol-3x" aria-hidden="true" style="color:#81ad30"></i>',
titleAttr: 'no.of rows'
},
{
extend: 'colvis',
autoClose: true,
text: '<i class="fa fa-columns-3x" aria-hidden="true" style="color:#81ad30"></i>',
titleAttr: 'Column Visibility',
exportOptions: {
columns: ':visible',
}
},
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o" style="color:green"></i>',
titleAttr:...