JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example" class="order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Last Active</th>
<th>Total</th>
<th>Today</th>
<th>Min Trial</th>
<th>Max Trial</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Last Active</th>
<th>Total</th>
<th>Today</th>
<th>Min Trial</th>
<th>Max Trial</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td data-order="1447147318">9 months, 18 minutes</td>
<td></td>
<td></td>
<td data-order="1460026800">Apr 07 2016 13:00:00 </td>
<td data-order="1460026800">Apr 07 2016 13:00:00</td>
</tr>
<td>2</td>
<td data-order="1469796214">1 week, 4 days</td>
<td></td>
<td></td>
<td data-order="1471003200">Aug 12 2016 14:00:00 </td>
<td data-order="1471003200">Aug 12 2016 14:00:00</td>
<tr>
<td>33</td>
<td data-order="1470129021">1 week, 1 day</td>
<td>2.9</td>
<td></td>
<td data-order="1473249600">Sep 07 2016 14:00:00 </td>
<td data-order="1473249600">Sep 07 2016 14:00:00</td>
</tr>
<tr>
<td>5</td>
<td data-order="1465369726">2 months, 2 days</td>
<td>85.1</td>
<td></td>
<td data-order="0">- </td>
<td data-order="0">-</td>
</tr>
<tr>
<td>8</td>
<td data-order="1450266823">7 months, 3 weeks</td>
<td></td>
<td></td>
<td data-order="1460026800">Apr 07 2016 13:00:00 </td>
<td data-order="1460026800">Apr 07 2016 13:00:00</td>
</tr>
<tr>
<td>19</td>
<td data-order="0">-</td>
<td></td>
<td></td>
<td data-order="1471003200">Aug 12 2016 14:00:00 </td>
<td data-order="1471003200">Aug 12 2016 14:00:00</td>
</tr>
<tr>
<td>88</td>
<td data-order="1458909316">4 months, 2 weeks</td>
<td></td>
...
JavaScript
$(document).ready(function() {
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"non-empty-string-asc": function (str1, str2) {
if (str1 == "-")
return 1;
if (str2 == "-")
return -1;
return ((str1 < str2) ? -1 : ((str1 > str2) ? 1 : 0));
},
"non-empty-string-desc": function (str1, str2) {
if (str1 == "-")
return 1;
if (str2 == "-")
return -1;
return ((str1 < str2) ? 1 : ((str1 > str2) ? -1 : 0));
}
});
$('#example').DataTable({
"columns": [{
}, {
"defaultContent": "Not logged yet",
"type": "non-empty-string"
}, {
"defaultContent": ""
}, {
"defaultContent": ""
}, {
"defaultContent": "",
"type": "non-empty-string"
}, {
"defaultContent": "",
"type": "date"
}],
});
});