JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/jszip-2.5.0/dt-1.10.24/af-2.3.5/b-1.7.0/b-colvis-1.7.0/b-html5-1.7.0/b-print-1.7.0/cr-1.5.3/date-1.0.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.3/datatables.min.css"/> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/jszip-2.5.0/dt-1.10.24/af-2.3.5/b-1.7.0/b-colvis-1.7.0/b-html5-1.7.0/b-print-1.7.0/cr-1.5.3/date-1.0.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.3/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo</title>
</head>
<body>
						<div id="storeSrc" style="width: 25%; float: right;">
						Display  #:<input type="text" id="col0_filter">
						</div>
						<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>UserID</th>
                  <th>Username</th>
								</tr>
							</thead>
						</table>
</body>
</html>

JavaScript

var jsonData = [{"userID":"1","userName":"name1"},{"userID":"2","userName":"name2"},{"userID":"3","userName":"name3"}];
  $(document).ready(function() {
    	var table = $('#myTable2').DataTable({
		dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
		buttons: [
		'excel', 'csv', 'pdf', 'copy'
		],
    data: jsonData,
		"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
		"bSort": false,
		"columns": [
            { "data": "userID" },
            { "data": "userName" }
	  ]
	});
  
 $('#col0_filter').keyup(function(){
    var term = $(this).val(),
	//regex = '\\b' + term + '\\b';
	regex = '^' + term + '$';
    table.columns(1).search(regex, true, false).draw();
} );

});