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>~</td></tr>        
		<tr><td>2</td></tr>                
		<tr><td>0.1</td></tr>                        
		<tr><td>-1</td></tr>
		<tr><td>5</td></tr>
		<tr><td>50</td></tr>        
		<tr><td>~</td></tr>
		<tr><td>-8</td></tr>
		<tr><td>~</td></tr>
		<tr><td>n/ap</td></tr>        
		<tr><td>100</td></tr>        
		<tr><td>-4</td></tr>        
		<tr><td>n/ap</td></tr>                
		<tr><td>0.2</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,'').replace(/~/g,'0').replace(/\(/g,'-')) : high;
    b = b.match(reg);
    b = b !== null ? parseFloat(b[0].replace(/,/g,'').replace(/~/g,'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 }
     ],
});