JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

</head>
<body>
<table id="test"></table>
</body>
</html>

JavaScript

(function () {
  
jQuery.fn.dataTable.ext.type.search.chkbx = function ( data ) {

		// Get data valset for search
    return $(data).data('valset') ?
        $(data).data('valset') :
        '';
};
 
})();

const columns = [{title: "Name", data: "name"}, {title: "Boolean", data: "boolean",
type: 'chkbx'
}];
const table = $("#test").DataTable({
		data: [{name: "Test", boolean: "<input type='checkbox' data-valset='n'>"}, {name: "Teast2", boolean: "<input type='checkbox' data-valset='y' checked>"}, {name: "Test3", boolean: "<input type='checkbox' data-valset='n'>"}, {name: "Te4st", boolean: "<input type='checkbox' data-valset='y' checked>"}, {name: "Te5st", boolean: "<input type='checkbox' data-valset='y' checked>"}],
    columns,
    initComplete: function () {
      var tb = this;
    	setTimeout(() => {

        let searchString = "";
          columns.forEach(c => searchString += '<td><input type="text" placeholder="'+c.title+' Search" id="col-'+(c.data)+'" style="width: 100%; margin: 0; padding: 5;" /></td>');
        $('#test thead').append('<tr>' + searchString + '</tr>');
        
        tb.api().columns().every(function () {
        	const that = this;
          $('#col-' + columns[that["0"]["0"]].data).on('keyup change clear', function () {
          		const val = this.value;
              
              if(that.search() != val) {
              	that.search(val).draw();
              }
          });
        
        });
      }, 200);
    }
});

//console.log($);