JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<link rel="stylesheet" href="http://handsontable.com/demo/css/samples.css">
Search: <input id="searchgrid" type="text" />
NRAI Active Status: <select id="searchgrid1" type="text">
<option value="">Select Option</option>
</select>
<br />
<br />
<div id="exampleGrid">
</div>
<div id="gridpage" class="pagination"></div>
<br />
<br />
<div id="console">
</div>
Row Count: <select id="rowCount" type="text">
<option value="">10</option>
</select>
<button id="export-file" class="intext-btn">
  Export as a File
</button>

CSS

body {
    background-color: white;
    margin: 20px;
}

h2 {
    margin: 20px 0;
}
body {
    background-color: white;
    margin: 20px;
}

h2 {
    margin: 20px 0;
}

.handsontable.as-you-type-demo tr:first-child th {
  vertical-align: bottom;
}

.handsontable.as-you-type-demo th > div.filterHeader {
  border-top: 1px solid #CCC;
}

.handsontable.as-you-type-demo th > div.filterHeader > input {
  width: calc(100% - 10px);
  box-shadow: none;
  border: 1px solid #CCC;
  margin-top: 1px;
}

.handsontable table thead th {
  white-space: pre-line;
  max-width: /* enter here your max header width */
}

#externalFilter {
  display: none;
  margin-left: 10px;
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  margin-bottom: 50px;
}

#externalFilter > .button-holder {
  position: relative;
}

#externalFilter > .button-holder .buttons {
  left: 5px;
}

#externalFilter > .demo-columnChoose,
#externalFilter > .demo-columnChoose > select,
#externalFilter > .demo-filterSelect {
  width: 200px;
}

#externalFilter > .demo-columnChoose > select {
  display: block;
  margin: 2px 0px 10px 0px;
}

#externalFilter > .demo-filterSelect {
  border: 1px solid #cccccc;
  max-height: 200px;
  overflow: auto;
}

#externalFilter > .demo-filterSelect > .demo-controllers {
  font-weight: bold;
  border-bottom: 1px solid #cccccc;
  background-color: rgb(243, 243, 243);
  padding: 2px 0px;
}

#externalFilter > .demo-filterSelect > .demo-controllers {
  padding: 5px;
}

#externalFilter > .demo-filterSelect > .demo-items {
  padding: 5px;
}

#externalFilter > .demo-filterSelect > .demo-items > .demo-item > label:before {
  content: ' ';
  white-space: pre;
}

#externalFilter > .button-holder {
  margin-top: 10px;
}


</style><!-- Ugly Hack due to jsFiddle issue -->
<script src="https://docs.handsontable.com/pro/1.15.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet"...

JavaScript

var myData = [
    	['000DTTM OPERATIONS LLC', 'Delaware', 'No'],
    	['03 STRATEGIC OPPORTUNITY FUND', 'South Carolina', 'No'],
    	['1000 PASSIONS EUROPE INC.', 'Delaware', 'No'],
    	['1000 WOOD & JACKSON PROPERTY LLC', 'Delaware', 'No'],
    	['100 Cooper Residences, LLC', 'New York', 'Yes'],
      ['000DTTM OPERATIONS LLC', 'Delaware', 'No'],
    	['03 STRATEGIC OPPORTUNITY FUND', 'South Carolina', 'No'],
    	['1000 PASSIONS EUROPE INC.', 'Delaware', 'No'],
    	['1000 WOOD & JACKSON PROPERTY LLC', 'Delaware', 'No'],
    	['100 Cooper Residences, LLC', 'New York', 'Yes'],
      ['TEST', 'Los Angeles', 'Yes'], 
      ['000DTTM OPERATIONS LLC', 'Delaware', 'No'],
    	['03 STRATEGIC OPPORTUNITY FUND', 'South Carolina', 'No'],
    	['1000 PASSIONS EUROPE INC.', 'Delaware', 'No'],
    	['1000 WOOD & JACKSON PROPERTY LLC', 'Delaware', 'No'],
    	['100 Cooper Residences, LLC', 'New York', 'Yes'],
      ['000DTTM OPERATIONS LLC', 'Delaware', 'No'],
    	['03 STRATEGIC OPPORTUNITY FUND', 'South Carolina', 'No'],
    	['1000 PASSIONS EUROPE INC.', 'Delaware', 'No'],
    	['1000 WOOD & JACKSON PROPERTY LLC', 'Delaware', 'No'],
    	['100 Cooper Residences, LLC', 'New York', 'Yes'],
      ['TEST', 'Los Angeles', 'Yes']];

var noOfRowstoShow = 10; //set the maximum number of rows that should be displayed per page.

var console = function() {
    var log = function(message, type) {
        switch(type) {
            case 0:
                strMessage = "<p class=\"debug\">" + message + "</p>";
                break;
            default:
                strMessage = "<p class=\"debug\">" + message + "</p>";
        }
        
        $("#console").append(strMessage);        
    };
    
    return {
        log: log
    };
}();

$("#exampleGrid").handsontable({
    startRows: 5,
    startCols: 3,
    rowHeaders: true,
    colHeaders: true,
    colHeaders: [
    	'COMPANY NAME',
    	'DOM STATE',
    	'NRAI Active Status'],
    columns: [{ data:0, type:'text'},{...