JSFiddle - React, Tailwind, and code Playground

by M. Junaid Salaat

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,
          select: 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 fa-download"></i>&nbsp;&nbsp;map file</a></li>' +
            '<li><a href=' + trackurl + '><i class="fa fa-download"></i>&nbsp;&nbsp;track file</a></li>' +
            '</ul>' +
            '</div>';
       ...