JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/u/bs/dt-1.10.12,b-1.2.1,fh-3.1.2,r-2.1.0,rr-1.1.2,sc-1.4.2/datatables.min.css">
<script src="https://cdn.datatables.net/u/bs/dt-1.10.12,b-1.2.1,fh-3.1.2,r-2.1.0,rr-1.1.2,sc-1.4.2/datatables.min.js"></script>
<script src="https://use.fontawesome.com/3b984c65ef.js"></script>
<div class="container-fluid">
<table id="table_users" class="table table-hover ">
<thead>
<tr>
<th>Username</th>
<th>Full name</th>
<th>Email</th>
<th>Status</th>
<th></th>
<!--Dropdown -->
</tr>
</thead>
<tr>
<td>Admin</td>
<td>Admin Admin</td>
<td>[email protected]</td>
<td></td>
<td>
<div class="dropdown pull-right">
<button class="btn btn-primary btn-xs" data-toggle="dropdown"><span class="fa fa-chevron-down" aria-hidden="true"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="javascript:void(0)" class="editRow" id="editRow14"><span class="fa fa-pencil" aria-hidden="true"></span> Edit</a></li>
<li><a href="javascript:void(0)" class="disableRow" id="disableRow14"><span class="fa fa-times-circle" aria-hidden="true"></span> Disable</a></li>
<li><a href="javascript:void(0)" class="deleteRow" id="deleteRow14"><span class="fa fa-trash" aria-hidden="true"></span> Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>user</td>
<td>Dummy Admin</td>
<td>[email protected]</td>
<td></td>
<td>
<div class="dropdown pull-right">
<button class="btn btn-primary btn-xs" data-toggle="dropdown"><span class="fa fa-chevron-down"...
JavaScript
$("#table_users").DataTable({
searching: false,
lengthMenu: [25, 50, 75, 100],
info: false,
processing: true,
responsive: true,
fixedHeader: true
});
$(".deleteRow").on("click", function() {
alert("ok");
});
$(".disableRow").on("click", function() {
alert("ok");
});
$(".editRow").on("click", function() {
alert("ok");
});