JSFiddle - React, Tailwind, and code Playground

by Adam Millington

HTML

<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<table id="example">
    <thead>
        <tr>
            <th>Column</th>
        </tr>
    </thead>
    <tbody>
		<tr><td>-</td></tr>        
		<tr><td>200</td></tr>                
		<tr><td>0.100</td></tr>                        
		<tr><td>-100.50</td></tr>
		<tr><td>5,000</td></tr>
		<tr><td>500,000</td></tr>        
		<tr><td>-</td></tr>
		<tr><td>268,100</td></tr>
		<tr><td>-</td></tr>
		<tr><td>n/ap</td></tr>        
		<tr><td>100,385,741</td></tr>        
		<tr><td>-47</td></tr>        
		<tr><td>n/ap</td></tr>                
		<tr><td>0.286</td></tr>
		<tr><td>n/ap</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,'')) : high;
    b = b.match(reg);
    b = b !== null ? parseFloat(b[0].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 }
     ],
});