JSFiddle - React, Tailwind, and code Playground

by Adam Millington

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>(194)</td>

 </tr>
 <tr >
  <td>Accent</td>
  <td>20,720</td>
  <td>96</td>
  <td>(77)</td>
 </tr>
 <tr >
  <td>Adactus</td>
  <td>13,040</td>
  <td>56</td>
  <td>(36)</td>
 </tr>
 <tr >
  <td>Affinity Sutton</td>
  <td>56,860</td>
  <td>320</td>
  <td>(198)</td>
 </tr>
 <tr >
  <td>Amicus Horizon</td>
  <td>27,830</td>
  <td>159</td>
  <td>(121)</td>
 </tr>
 <tr >
  <td >Asra</td>
  <td>13,480</td>
  <td>72</td>
  <td>(49)</td>
 </tr>
 <tr>
  <td>Bernicia</td>
  <td>20,270</td>
  <td>40</td>
  <td>(31)</td>
 </tr>
 <tr >
  <td>Bromford</td>
  <td>28,500</td>
  <td>166</td>
  <td>(105)</td>
 </tr>
 <tr >
  <td>Catalyst</td>
  <td>21,010</td>
  <td>172</td>
  <td>(126)</td>
 </tr>
 <tr >
  <td>Circle Anglia</td>
  <td>64,280</td>
  <td>363</td>
  <td>(253)</td>
 </tr>
 <thead>
 <tr >
  <td>Total</td>
  <td>1,432,800</td>
  <td>8,280</td>
  <td>(5,953)</td>
 </tr>
 </thead>
 </tbody>
</table>

</div>

JavaScript

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "num-html-pre": function ( a ) {
        var x = String(a).replace( /<[\s\S]*?>/g, "" );
        return parseFloat( x );
    },
 
    "num-html-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
 
    "num-html-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );




$(document).ready( function() {
$('#table_id').dataTable( {
    "columnDefs": [
        { 
		"targets": [3],
		"sType": "numeric",
		type: 'num-html'
		}
    ]
} );
  
} );