JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>
<select>
<option value="">Select Report</option>
<option value="test">tests</option>
<option value="test">121212</option>
</select></td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>
test123</td>
<td>
<select>
<option value="">Select Report</option>
<option value="test">tests</option>
<option value="test">121212</option>
</select></td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>
<select>
<option value="">Select Report</option>
<option value="test">tests</option>
<option value="test">121212</option>
</select></td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>
<select>
<option value="">Select Report</option>
<option value="test">tests</option>
<option value="test">121212</option>
...
JavaScript
var init = function() {
var script = document.createElement('script');
script.async = true;
script.src = "https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
init();
document.addEventListener('turbolinks:load', init);
$(document).ready(function() {
setTimeout(function(){
$('#example').DataTable({
dom: 'Bfrtip',
columns: [{
data: 'name'
},
{
data: 'surname'
},
{
data: 'position'
},
{
data: 'office'
},
{
data: 'salary'
}
],
buttons: [{
extend: 'excelHtml5',
exportOptions: {
orthogonal: 'export'
}
}]
});
}, 10);
});