JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.13.4/sorting/absolute.js"></script>
<table id="draft_table">
<thead>
<tr>
<th data-index="0">Date</th>
<th data-index="1">Name</th>
<th data-index="2">Age</th>
<th data-index="3">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>05/12/2023 09:41 AM</td>
<td>Sample Name 7</td>
<td>19</td>
<td></td>
</tr>
<tr>
<td>05/27/2023 11:29 PM</td>
<td>Sample Name 1</td>
<td>5</td>
<td>CA100</td>
</tr>
<tr>
<td>05/15/2023 11:06 AM</td>
<td>Sample Name 2</td>
<td>17</td>
<td>CB100</td>
</tr>
<tr>
<td>05/25/2023 09:39 AM</td>
<td>Sample Name 3</td>
<td>7</td>
<td>CC100</td>
</tr>
<tr>
<td>05/25/2023 09:41 AM</td>
<td>Sample Name 4</td>
<td>7</td>
<td>CS100</td>
</tr>
<tr>
<td>05/16/2023 09:41 AM</td>
<td>Sample Name 5</td>
<td>16</td>
<td>CS100</td>
</tr>
<tr>
<td>05/14/2023 09:41 AM</td>
<td>Sample Name 6</td>
<td>16</td>
<td></td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function () {
//jQuery.fn.dataTable.moment('MM/DD/yyyy hh:mm a');
var nameType = $.fn.dataTable.absoluteOrder({
value: '',
position: 'bottom',
});
$('#draft_table')
.DataTable({
columnDefs: [
{
type: nameType,
targets: 3,
render: function (data, type) {
if (type === 'sort') {
return data ? 1 : data;
}
return data;
},
}, // define 'name' column as non-empty-string type
],
order: [[0, 'asc']],
orderFixed: [3, 'desc'],
})
.draw();
});