JSFiddle - React, Tailwind, and code Playground

by Adam Millington

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 }
     ],
});