JSFiddle - React, Tailwind, and code Playground

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"></div>

JavaScript

$(document).ready(function(){
    
  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"
    },
    { "data": null,
      "title": "Notes",
     "defaultContent": 'Some other text here, included just to test that responsive works'
    }  
  ];
  var html = '<table class="table table-bordered table-hover" cellspacing="0" width="100%" id="myTable"></table>';
  $('#table').html(html);
  $("#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);
       }
     });
   },
      columnDefs: [
      { 
         targets: [1], 
             render: function(data, type, full, meta) {
                 if(type === "sort") {
                    var api = new $.fn.dataTable.Api(meta.settings);
                    var td = api.cell({row: meta.row, column: meta.col}).node();
                    data = $(td).attr('data-order');
                 }
                 return data;
             }
         },
      ],
  });
});