JSFiddle - React, Tailwind, and code Playground

by ben_davies

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

const columns = [{title: "Name", data: "name"}, {title: "Boolean", data: "boolean"}];
const table = $("#test").DataTable({
		data: [{name: "Test", boolean: "<input type='checkbox' data-valset='unchecked'>"}, {name: "Teast2", boolean: "<input type='checkbox' data-valset='checked' checked>"}, {name: "Test3", boolean: "<input type='checkbox' data-valset='unchecked'>"}, {name: "Te4st", boolean: "<input type='checkbox' data-calset='checked' checked>"}, {name: "Te5st", boolean: "<input type='checkbox' 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($);