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 id="example" class="hot "></div>

JavaScript

const container = document.querySelector(`#example`);
let headerSearchOn       = [];

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: [
        150,
        150,
        150,
        150
    ],
    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: addSearchBarsToHeader,
    beforeOnCellMouseDown: doNotSelectColumn,
    licenseKey: 'non-commercial-and-evaluation',
});


function addSearchBarsToHeader(colIndex, TH){
    headerSearchOn[colIndex] = true;
    // Add elements to header on `afterGetColHeader` hook.
    // Hooks can return value other than number (for example `columnSorting` plugin use this).
    if (typeof colIndex !== 'number') { return colIndex }
    if (colIndex >= 0 && TH.childElementCount < 2) {
    // Build elements which will be displayed in header.
        const searchDiv   = document.createElement('div');        
        const searchInput = document.createElement('input');
        
        searchDiv.appendChild(searchInput);
        searchDiv.className     = 'searchDiv';
        searchInput.className   = 'searchInput';
        searchInput.placeholder = 'Search';
                
        searchInput.addEventListener('keydown', (event) => {
            const debounceFn    = Handsontable.helper.debounce((colIndex, event) => {
            const filtersPlugin = table.getPlugin('filters')
                  filtersPlugin.removeConditions(colIndex);
                 ...