JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://shiro-desu.com/scr/dataTables/media/js/jquery.js"></script>
<script src="http://shiro-desu.com/scr/dataTables/media/js/jquery.dataTables.min.js"></script>
<table id="example" class="hover" cellspacing="0" width="100%">
        <thead>
            <tr>
				<th width="5px"></th>
                <th>Song Name</th>
                <th>Artist Name</th>
                <th>Track</th>
            </tr>
        </thead> 
 
        <tbody>
            <tr>			
                <td><a href="?album=test">>>></a></td>
                <td><a href="?album=test">Tiger Nixon</a></td>
                <td><a href="?album=test">Amer</a></td>
                <td><a href="?album=test">1</a></td>
			</tr>
		    <tr>
                <td><a href="?album=test">>>></a></td>
                <td><a href="?album=test">Tiger Nixon</a></td>
                <td><a href="?album=test">Amer</a></td>
                <td><a href="?album=test">2</a></td>
			</tr>
			<tr>
                <td><a href="?album=test">>>></a></td>
                <td><a href="?album=test">Tiger Nixon</a></td>
                <td><a href="?album=test">Amer</a></td>
                <td><a href="?album=test">5</a></td>
			</tr>			
        </tbody>
    </table>

CSS

/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  color: #535353;
  font-size: 12px;
  font-family: "Trebuchet MS";
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}

table.dataTable a {
color: #535353;
text-decoration: none;
}
table.dataTable a:hover {
color: #535353;
text-decoration: underline;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-size: 11px;
  border: 1px solid white;
  background-color: #ECECEC !important;
  padding: 10px;
  font-weight: bold;
  text-align: left;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #ECECEC;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #ECECEC;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable thead .sorting {
  background: url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
  background: url("../images/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
  background: url("../images/sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
  background: url("../images/sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
  background: url("../images/sort_desc_disabled.png") no-repeat center right;
}
table.dataTable tbody tr {
  background-color: white;
}
table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 8px 10px;
    border-top: 1px solid #dddddd;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th,...

JavaScript

$(document).ready(function() {
  $('#example').dataTable( {
    "bPaginate": false,
	 "order": [[ 3, "asc" ]],
	 "dom": '<"top"flp>'
  } );
} );