JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<table id="example" class="table table-striped datatable" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>
                Name
                <div class="dropdown colDropdown">
                      <button class="dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><div class="inner-addon left-addon"><i class="glyphicon glyphicon-search"></i><p></p></div></li>
                        <div class="divider"></div>
                        <li><a href="#" id="sortAscName"><i class="fa fa-sort-amount-asc"></i> Sort Ascending</a></li>
                        <li><a href="#" id="sortDscName"><i class="fa fa-sort-amount-desc"></i> Sort Descending</a></li>
                      </ul>
                    </div>
                    </th>
                <th>
                Created By
                <div class="dropdown colDropdown">
                      <button class="dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><div class="inner-addon left-addon"><i class="glyphicon glyphicon-search"></i><p></p></div></li>
                        <div class="divider"></div>
                        <li><a href="#"><i class="fa fa-sort-amount-asc"></i> Sort Ascending</a></li>
                        <li><a href="#"><i class="fa...

CSS

.datatable {border-radius:0 !important; border-bottom:none !important;}
.datatable th,
.datatable td,
.datatable thead,
.datatable tbody,
.fixed-table-container {border-radius:0 !important; font-family:'Open Sans';}
.content_table th {background-color:#eeeeee; font-family:'Open Sans'; font-size:14px; color:#181818;}
.colDropdown {float:right;}
.colDropdown button {border:none; background:none;}
.colDropdown .dropdown-menu {min-width:250px;}
.colDropdown .dropdown-menu li:last-child {margin-bottom:15px;}
.colDropdown .dropdown-menu li a {padding-top:5px; padding-bottom:5px;}
.inner-addon {position: relative; margin:0 10px;}
.inner-addon .glyphicon {position: absolute; padding: 10px; pointer-events: none;}
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.documents-re {width:100%; float:left;}
.documents-re a {margin-top:5px; float:left;
}
.doc_icon {width:22px; height:30px; float:left; margin-right:15px; background:url(../images/doc-ico.png) no-repeat; position:relative;}
.doc_icon i {position:absolute; right:-6px; top:50%; background-color:#1d90fe; padding:3px; font-size:6px; color:#fff; margin-top:-5px; border-radius:50%; width:13px; height:13px; text-align:center; line-height:9px;}

JavaScript

$(document).ready(function() {
	
    var oTable = $('#example').DataTable({
		"ordering": false,
		"aoColumnDefs": [
      { "sType": "html", "aTargets": [ 0 ] }
    ]
	});
	
	$('#example th .dropdown-menu li .inner-addon p').each( function () {
        var title = $(this).parent("th").text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" />' );
    } );
	
	oTable.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
	
	function filterByName() {
		oTable.columns(0).search("^(?=.?(" + $('#searchName').val() + ")).?",
        true).draw();	
	}
	$('#searchName').on( 'keyup click', function () {
        filterByName();
    });

	$('#sortAscName').click(function () {
        oTable.columns(0).sort( [ [0,'asc'] ] );	
		console.log("happened");
    });
	
	$('#sortDscName').click(function () {
        oTable.columns(0).sort( [ [0,'desc'] ] );	
		console.log("happenedDSC");
    });
	
	$('.dropdown-menu').on({
		"click":function(e){
			e.stopPropagation();
		}
     });
	
});