JSFiddle - React, Tailwind, and code Playground
HTML
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>
<div class="btn-group dropleft">
<button class="btn btn-secondary dropdown-toggle font-10-px" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-boundary="window">Options</button>
<div class="dropdown-menu">
<button class="dropdown-item font-12-px" type="button">Option 1</button>
<button class="dropdown-item font-12-px" type="button">Option 2</button>
<button class="dropdown-item font-12-px" type="button">Option 3</button>
<button class="dropdown-item font-12-px" type="button">Option 4</button>
</div>
</div>
...
JavaScript
$(function()
{
var table = $('table');
$(table).DataTable(
{
'bPaginate' : true,
'bLengthChange' : false,
'bFilter' : true,
'bInfo' : true,
'bAutoWidth' : false,
'aoColumnDefs' : [
{
'bSortable' : false,
'aTargets' : ['nosorting']
}],
'aaSorting' : [],
})
});