JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jqc-1.11.3,dt-1.10.10,fh-3.1.0,r-2.0.0/datatables.min.css">
<script src="https://cdn.datatables.net/s/bs-3.3.5/jqc-1.11.3,dt-1.10.10,fh-3.1.0,r-2.0.0/datatables.min.js"></script>
<p>The "Games won" column should sort by the numeric percentage value.</p>

<div id="table">
    <table class="table table-bordered table-hover" cellspacing="0" width="100%" id="myTable"></table>
</div>

JavaScript

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "special-pre": function ( a ) {
        var regExp = /\(([^)]+)\)/;
        var matches = regExp.exec(a);
        return parseFloat(matches[1]);
    },
    "special-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "special-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});  

var data = [
      {
          'name': 'France',
          'played': 1000,
          'won': 11
      },
      {
          'name': 'England',
          'played': 1000,
          'won': 100
      },
      {
          'name': 'Germany',
          'played': 1000,
          'won': 109
      }
  ];
    $.each(data, function(i, d) {
        d.won_percent = (d.won / d.played) * 100;
        d.won_display = d.won + '/' + d.played;
        d.won_display += ' (';
        d.won_display += Math.round(d.won_percent * 10) / 10;
        d.won_display += '%)';
    });
  var columns = [
    { "data": "name",
      "title": "Country"
    },
    { "data": "won_display",
      "title": "Games won",
     	"type": 'special'
    },
    { "data": null,
      "title": "Notes",
     "defaultContent": 'Some other text here, included just to test that responsive works'
    }  
  ];
  $("#myTable").DataTable({
    data: data,
    columns: columns,
    order:[[1, "desc"]],
    responsive: true,
    paging: false,
    searching: false,
    createdRow: function (row, data, rowIndex) {
      $.each($('td', row), function (colIndex) {
       if (colIndex === 1) {
         $(this).attr('data-order', data.won_percent);
       }
     });
   }
  });