JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/languages.min.js"></script>
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>
 
<div class="tableWrapper">
  <div class="searchBar hidden" id="searchBar"></div>
  <div id="example" class="hot "></div>
</div>

CSS

.shown {
    height: 25px;
}

.hidden {
    height: 0px;
}

.searchBar{
   display: flex;
   background-color: lightgrey;
   width: 600px;
   transition: all 0.3s;
}

.inputWrapper{
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.searchInput{
    width: 90%;
    height: 75%;
    box-sizing: border-box;
    border: 1px solid #CCC !important;
    border-radius: 5px;
    padding: 0px 5px;
    margin: 3px 0px 0px 0px;
    font-size: 13px;
}

JavaScript

const container = document.querySelector(`#example`);

const colWidths = [
        150,
        200,
        100,
        150
    ]

let table = new Handsontable(container, {
    data: [["A1", "B1", "C1", "D1"], ["A2", "B2", "C2", "D2"], ["A3", "B3", "C3", "D3"]],
    colHeaders: ["Col1", "Col2", "Col3", "Col4"],
    headerClassName: 'htLeft',
    colWidths: colWidths,
    fixedColumnsStart: 0,
    fixedRowsTop: 0,
    renderAllRows: false,
    contextMenu: [
        'row_above', 
        'row_below', 
        '---------', 
        'remove_row', 
        '---------', 
        'undo', 
        'redo', 
    ],
    filters: true,
    dropdownMenu: [
        '---------', 
        'alignment', 
        '---------', 
        'filter_by_condition', 
        'filter_by_value', 
        'filter_action_bar'
    ],
    afterGetColHeader: function(col, TH){
        TH.parentNode.addEventListener('dblclick', () => {this.deselectCell()})
    },
    licenseKey: 'non-commercial-and-evaluation',
});

const searchBar = document.getElementById('searchBar')
const hotCol = document.querySelectorAll('.ht_clone_top.handsontable thead tr th')

for (let col = 1; col < hotCol.length+1; col++){

    let hotCol = document.querySelector(`.ht_clone_top.handsontable thead tr th:nth-child(${col})`)
    let inputWrapper            = document.createElement('div')
        inputWrapper.className   = 'inputWrapper'
        inputWrapper.style.width = hotCol.offsetWidth+'px' 
    let searchInput            = document.createElement('input')
        searchInput.className   = 'searchInput'
        searchInput.id          = `searchInput${col}`
        searchInput.placeholder = 'Search...'
        searchInput.addEventListener('keydown', (event) => {
                const debounceFn    = Handsontable.helper.debounce((col, event) => {
                const filtersPlugin = table.getPlugin('filters')
                      filtersPlugin.removeConditions(col);
                     ...