JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.min.css">
<table id="reportCreativeAllDT">
</table>

JavaScript

/* DataTable dbOvFlightWiseDT configuration */
  var reportCreativeAllDT = $('#reportCreativeAllDT').DataTable({
    scrollX:        true,
    pageLength:     50,
    lengthChange:   false,
    searching:      true,
    bFilter:        false,
    dom: '<"pull-left"f<"clear">>Brt<"bottom"ip<"clear">>',
    buttons: [
      {
        className: 'btn btn-primary',
        text: 'CSV&nbsp;<i class="fa fa-download"></i>',
        extend: "csv",
          title: 'reportGeoAll'
      },
      {
        className: 'btn btn-primary',
        text: 'Filter&nbsp;<i class="fa fa-filter"></i>',

        action: function ( e, dt, node, config ) {
            $("#reportToggleAllHeaders").modal('show');
          }
        }
    ],
    columnDefs: [
      { className: "numericCol", targets: [2] }
    ],
    data:[
    	{
      	"random": "x",
        "ax": "1aa",
      	"Flight": "1",
        "Country": "AU",
      }
    ],
    columns: [
        { data: 'Flight' },
        { data: 'Country' },
    ],
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;
    }
  });/* dbOvFlightWiseDT End */

  // Apply the search
  reportCreativeAllDT.columns().every( function () {
      var that = this;
      $( 'input', this.header() ).on( 'keyup change', function () {
          if ( that.search() !== this.value ) {
              that
                  .search( this.value )
                  .draw();
          }
      } );
  } );