JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.bootstrap.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<body>
    <br />
    <div class="container">
        <table id="maptable" class="table table-bordered" width="100%"></table>
    </div>
</body>

CSS

table.dataTable tbody tr.selected a, table.dataTable tbody th.selected a, table.dataTable tbody td.selected a {
    color: #333;
}

JavaScript

var dataSet = [
        ["data/rennes/", "Rennes", "rennes.map"],
        ["data/nantes/", "Nantes", "nantes.map"],
        ["data/tours/", "Tours", "tours.map"],
        ["data/bordeaux/", "Bordeaux", "bordeaux.map"],
        ["data/limoges/", "Limoges", "limoges.map"],
        ["data/troyes/", "Troyes", "troyes.map"]
    ];


    var table = $('#maptable').DataTable({
        "data": dataSet,
        "paging": false,
        "columns": [{
            title: "Download"
        }, {
            title: "Name"
        }, {
            title: "File Name"
        }],

        "columnDefs": [{
                "targets": [0], // Download
                "visible": true,
                "searchable": false,
                "bSortable": false
            }, {
                "targets": [1], // Name
                "visible": true,
                "searchable": true
            }, {
                "targets": [2], // File name
                "visible": true,
                "searchable": true
            },


        ],
        "order": [
            [1, "asc"]
        ],
        "oLanguage": {
            "sSearch": ""
        },
        "aoColumns": [{
            "title": '&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-cloud-download white"></i>&nbsp;&nbsp;Download',
            "render": function(data, type, full, meta) {
                var url = 'http://localhost/';

                var mapurl = url + full[0] + full[2],
                    trackurl = url + full[0] + full[2].replace('map', 'trx');
                
                return '<div class="btn-group">' +
                    '<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                    '<i class="fa fa-cloud-download white"></i>  <span class="caret"></span>' +
                    '</button>' +
                    '<ul class="dropdown-menu">' +
                    '<li><a href=' + mapurl + '><i class="fa...