JSFiddle - React, Tailwind, and code Playground

HTML

<thead>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</thead>
<tbody>
	<table id="mytable">
		<thead>
			<tr>
				<th>name</th>
				<th>type</th>
				<th>color</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>apple</td>
				<td>fruit</td>
				<td>red</td>
			</tr>
			<tr>
				<td>banana</td>
				<td>fruit</td>
				<td>yellow</td>
			</tr>
			<tr>
				<td>carrot</td>
				<td>vegie</td>
				<td>red</td>
			</tr>
			<tr>
				<td>potato</td>
				<td>vegie</td>
				<td>brown</td>
			</tr>
		</tbody>
	</table>
</tbody>

JavaScript

$(document).ready(function(){
	let table = $('#mytable').DataTable();
  $('#mytable tfoot th').each( function (i) {
        let title = $('#mytable thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } );
  $( table.table().container() ).on( 'keyup', 'tfoot input', function () {
    table
      .column( $(this).data('index') )
      .search( this.value )
      .draw();
  } );
});