JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css">
<div id="tabs">
<ul>
<li><a href="#tabs-1">
<span id="ctl00_MainContent_Label1">All Calls</span> (<span id="ctl00_MainContent_TotalCalls">37</span>)</a>
</li>
<li><a href="#tabs-2">
<span id="ctl00_MainContent_Label2">Unassigned Calls</span> (<span id="ctl00_MainContent_TotalUnassigned">32</span>)</a>
</li>
<li><a href="#tabs-3">
<span id="ctl00_MainContent_Label3">Assigned Calls</span> (<span id="ctl00_MainContent_TotalAssigned">5</span>)</a>
</li>
<li><a href="#tabs-4">
<span id="ctl00_MainContent_Label4">Closed Calls</span> (<span id="ctl00_MainContent_TotalClosed">0</span>)</a>
</li>
</ul>
<div id="tabs-1">
<div>
<table class="viewCallsTable" cellspacing="0" rules="all" border="1" id="ctl00_MainContent_ViewCallsGridView" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Call ID</th>
<th scope="col">Date Time</th>
<th scope="col">Site</th>
<th scope="col">Category</th>
<th scope="col">Sub Category</th>
<th scope="col">Priority</th>
<th scope="col">Status</th>
<th scope="col">Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="Calldetails.aspx?CallDetailsID=45">45</a>
</td>
<td>23/10/2014 11:36:31</td>
<td>TestLocation</td>
<td>TestCat</td>
<td>Error Message</td>
...
JavaScript
$(function () {
$("#tabs").tabs();
});
$(document).ready(function () {
$('.viewCallsTable').DataTable();
});