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': 7,
            'won': 4
    }, {
        'name': 'England',
            'played': 1000,
            'won': 1000
    }, {
        'name': 'Germany',
            'played': 2,
            'won': 0
    }];

    $.each(data, function (i, d) {
        d.won_percent = {
            sort: (d.won / d.played) * 100
        };
        d.won_percent.display = 
            d.won + '/' + d.played +
            ' (' + Math.round(d.won_percent.sort * 10) / 10 + '%)';
    });

    var columns = [{
        "data": "name",
        "title": "Country"
    }, 
    {
        "data": "won_percent",
        "title": "Games won",
        "type": "num",
        "render": {
           "_": "display",
           "sort": "sort"
       }
    }, 
    {
        "data": null,
        "title": "Notes",
        "defaultContent": 'Some other text here, included just to test that responsive works'
    }];
    console.log(data);
    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
    });
});