JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
    <div id="container" style="width:980px;">
<table width="" class="display" id="table_id">
<thead>
 <tr>
   <th>2013/14</th>
   <th>No. of units</th>
   <th>Gross turnover £m</th>
   <th>Op costs &pound;m</th>
   
 </tr>
 </thead>
 <tbody>
 <tr >
  <td>A2 Dominion</td>
  <td>34,820</td>
  <td>272</td>
  <td>1(1)</td>

 </tr>
 <tr >
  <td>A2 Dominion</td>
  <td>34,820</td>
  <td>272</td>
  <td>2(2)</td>

 </tr>
 
 <tr >
  <td>A2 Dominion</td>
  <td>34,820</td>
  <td>272</td>
  <td>10(10)</td>

 </tr>
 
 <tr >
  <td>A2 Dominion</td>
  <td>34,820</td>
  <td>272</td>
  <td>11(11)</td>

 </tr>
 
 </tbody>
</table>

</div>

JavaScript

function sortNumbersIgnoreText(a, b, high) { 
    var reg = /[+-]?((\d+(\.\d*)?)|\.\d+)([eE][+-]?[0-9]+)?/;    
    a = a.match(reg); 
    a = a !== null ? parseFloat(a[0]) : high; 
    b = b.match(reg); 
    b = b !== null ? parseFloat(b[0]) : 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.POSITIVE_INFINITY); 
    }, 
    "sort-numbers-ignore-text-desc": function (a, b) { 
        return sortNumbersIgnoreText(a, b, Number.NEGATIVE_INFINITY) * -1; 
    } 
}); 


$(document).ready( function() {
$('#table_id').dataTable( {
    "columnDefs": [
        { 
		"targets": [3],
		type: 'sort-numbers-ignore-text'
		}
    ]
} );
  
} );