JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.1/css/buttons.dataTables.min.css">
<table id="example1">
<thead>
<tr>
<th>
Verified
</th>
<th>Number</th>
<th>Date</th>
<th>Short_Descr</th>
<th>Team</th>
<th>Accounted</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" checked>
</td>
<td>
aaaaa
</td>
<td>
bbbbbb
</td>
<td>
ccccc
</td>
<td>ddddd</td>
<td>
<input type="checkbox" >
</td>
</tr>
...
JavaScript
var table = $('#example1').DataTable({
dom : 'Bfrtlip',
buttons: [
{
extend: 'excel',
exportOptions: {
orthogonal: 'sort'
}
}
],
columnDefs: [{
targets:[0,5],
render: function(data, type, row, meta){
if(type === 'sort'){
var $input = $(data).find('input[type="checkbox"]').addBack();
data = ($input.prop('checked')) ? "1" : "0";
}
return data;
}
}]
});
table.buttons().container()
.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );