JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
		<div class="header"><h1>DataTable -startAgain1 test data-  demo (Server side) in Php,Mysql and Ajax </h1></div>
		<div class="container">
			<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
					<thead>
						<tr>
							<th>Rec_Open_Date</th>
							<th>MSISDN</th>
							<th>IMEI</th>
							<th>Data_Volume_Bytes</th>
							<th>Device_Manufacturer</th>
							<th>Device_Model</th>
							<th>Product_Description</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th>Rec_Open_Date</th>
							<th>MSISDN</th>
							<th>IMEI</th>
							<th>Data_Volume_Bytes</th>
							<th>Device_Manufacturer</th>
							<th>Device_Model</th>
							<th>Product_Description</th>
						</tr>
					</tfoot>
          <!--START::  tbody here just for example -->
          <tbody>
						<tr>
							<td>Tiger Nixon</td>
							<td>System Architect</td>
							<td>Edinburgh</td>
							<td>61</td>
							<td>2011/04/25</td>
							<td>$320,800</td>
							<td>$320,800</td>
						</tr>
						<tr>
							<td>Garrett Winters</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>63</td>
							<td>2011/07/25</td>
							<td>$170,750</td>
							<td>$320,800</td>
						</tr>
					</tbody>
          <!--END::  tbody here just for example -->
			</table>
		</div>

CSS

div.container {
			    /* margin: 0 auto; */
			    max-width:760px;
			}
			div.header {
			    /* margin: 100px auto; */
			    line-height:30px;
			    max-width:760px;
			}
			body {
			    background: #f7f7f7;
			    color: #333;
			    font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
			}
			
			tfoot {
				display: table-header-group;
			}

JavaScript

$(document).ready(function() {
			  // Setup - add a text input to each footer cell
			  $('#employee-grid tfoot th').each(function() {
				  
				console.log("$(this).text()");
				var title = $(this).text();
				$(this).html('<input type="text" placeholder="Search ' + title + '" />');
			  });

			  // DataTable
			  var table = $('#employee-grid').DataTable();

			  // Apply the search
			  table.columns().every(function() {
				var that = this;
				console.log("other)");

				$('input', this.footer()).on('keyup change', function() {
				  if (that.search() !== this.value) {
					that
					  .search(this.value)
					  .draw();
				  }
				});
			  });
			});