JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
<script src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/1.10.6/type-detection/currency.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<div id="editItemDialog" title="Edit Item"><p>Dialog Text</p></div>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Date Added</th>
<th>Price</th>
<th>Sold</th>
<th>Order</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td><a href="#" id="itemNo1">Test</a>
</td>
<td>03/04/2015 19:00:50</td>
<td>£50</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function () {
$('#table').DataTable();
});
$(document).ready(function () {
$("#editItemDialog").dialog({
autoOpen: false
});
});
$("#itemNo1").click(
function () {
$("#editItemDialog").dialog('open');
return false;
});