JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/se-1.2.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/se-1.2.2/datatables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
        
</table>

JavaScript

$(document).ready(function() {

  var header = [{
    "title": "test1"
  }, {
    "title": "test2"
  }, {
    "title": "test4"
  }];
  var dataSet = [
    ["val1", "val2","val5"],
    ["val1", "val2","val5"],
    ["val1", "val2","val5"],
    ["val1", "val2","val5"],
    ["val1", "val2","val5"],
    ["val1", "val2","val5"],
    ["val1", "val2","val5"],
    
  ];

  // Setup - add a text input to each header	 cell
  //$('#example thead tr').clone().appendTo('#example thead');
  /*$('#example thead tr:eq(1) th').each( function () {
      //var title = $('#example thead th').eq( $(this).index() ).text();
      $(this).html( '<input type="text" placeholder="Search" />' );
  } );
  */

  // DataTable
  var table = $('#example').DataTable({
    orderCellsTop: true,
    //colReorder: true,
    scrollY: "500px",
    //scrollCollapse: true,
    paging: false,
    //columnDefs: colDefs,
    columns: header,
    initComplete: function(settings, json) {
    	//console.log('is this okay ?');
      var scrollThead = $('#example').parent().prev('div').find('thead');
      console.log($(scrollThead).html())
      $('tr', scrollThead).clone(false).appendTo(scrollThead);
      
      $('tr:eq(1) th', scrollThead).each(function() {
        //var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).removeClass('sorting sorting_asc sorting_desc');
        
        $(this).html('<input type="text" placeholder="Search" />');
      });
      //console.log($('#example thead tr:eq(1)').children());
    }
  });

  // dump all rows and redraw
  table.clear().draw();

  // add rows and redraw
  table.rows.add(dataSet).draw();
  
  //table.column(1).visible(false);
  
    // Apply the filter
    $( table.table().container() ).on( 'keyup', 'thead input', function () {
        table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
    } );


});