JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/datatables.min.css">


   <table id="example2">
   <thead><tr><th>Title</th><th>Title2</th></tr>
   <tr id=searchrow><th>Title</th><th>Title2</th></tr>
   </thead>
   <tbody>
   
   <tr><td>Hello</td><td>there</td></tr>
   <tr><td>Hello</td><td>there</td></tr><tr><td>Hello</td><td>there</td></tr><tr><td>Hello</td><td>there</td></tr>
   </tbody>
   </table>

CSS

body{
  height:1300px;
}

JavaScript

$(document).ready(function() {
   var table2 = $('#example2').DataTable( {
       // fixedHeader: {
       //    header: true,
       //     footer: true
       // },
      // fixedHeader: true,
          "fixedHeader": {
      header: true,
    },
        "bSortCellsTop": true,
          "initComplete": function (settings, json) {
              $('#example2 thead tr#searchrow th').each(function () {
                var title = $('#example2 thead th').eq($(this).index()).text().trim();
                $(this).html('<input type="text" placeholder="Search " />');
            });


            // Apply the filter
            $("#example2 thead input").on('keyup change', function () {
                table2
                    .column($(this).parent().index() + ':visible')
                    .search(this.value)
                    .draw();
            });
        }
    });   

});