JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<table id="example">
<thead>
<tr>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr><td>(0.4)</td></tr>
<tr><td>0.3</td></tr>
<tr><td>(3.15)</td></tr>
<tr><td>0.85</td></tr>
<tr><td>(0.89)</td></tr>
<tr><td>0.3</td></tr>
<tr><td>(0.12)</td></tr>
<tr><td>2.0</td></tr>
<tr><td>(2.07)</td></tr>
<tr><td>n/ap</td></tr>
<tr><td>(5.8)</td></tr>
<tr><td>0.24</td></tr>
<tr><td>(0.32)</td></tr>
<tr><td>0.286</td></tr>
<tr><td>(1.05)</td></tr>
</tbody>
</table>
JavaScript
function sortNumbersIgnoreText(a, b, high) {
var reg = /[+-]?([0-9\,.]*\d)([eE][+-]?[0-9]+)?/;
a = a.match(reg);
a = a !== null ? parseFloat(a[0].replace(/,/g,'').replace(/\($/g,'-')) : high;
b = b.match(reg);
b = b !== null ? parseFloat(b[0].replace(/,/g,'').replace(/\($/g,'-')) : high;
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"sort-numbers-ignore-text-asc": function (a, b) {
return sortNumbersIgnoreText(a, b, Number.NEGATIVE_INFINITY);
},
"sort-numbers-ignore-text-desc": function (a, b) {
return sortNumbersIgnoreText(a, b, Number.POSITIVE_INFINITY) * -1;
}
});
var dataTable = $('#example').dataTable({
lengthMenu : [5, 10, 20, 50],
pageLength : 20,
columnDefs: [
{ type: 'sort-numbers-ignore-text', targets : 0 }
],
});