Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/dist/handsontable.full.min.css" /> 

<div id="example3" class="hot "></div>

JavaScript

// Event for `keydown` event. Add condition after delay of 200 ms which is counted from the time of last pressed key.
const debounceFn = Handsontable.helper.debounce((colIndex, event) => {
  const filtersPlugin = hot.getPlugin('filters');

  filtersPlugin.removeConditions(colIndex);
  filtersPlugin.addCondition(colIndex, 'contains', [event.target.value]);
  filtersPlugin.filter();
}, 100);

const addEventListeners = (input, colIndex) => {
  input.addEventListener('keydown', event => {
    debounceFn(colIndex, event);
  });
};

// Build elements which will be displayed in header.
const getInitializedElements = colIndex => {
  const div = document.createElement('div');
  const input = document.createElement('input');

  div.className = 'filterHeader';

  addEventListeners(input, colIndex);

  div.appendChild(input);

  return div;
};

// Add elements to header on `afterGetColHeader` hook.
const addInput = (col, TH) => {
  // Hooks can return a value other than number (for example `columnSorting` plugin uses this).
  if (typeof col !== 'number') {
    return col;
  }

  if (col >= 0 && TH.childElementCount < 2) {
    TH.appendChild(getInitializedElements(col));
  }
};

const container = document.querySelector('#example3');

const hot = new Handsontable(container, {
  data: [
    ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
    ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
    ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
    ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
    ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
  ],
  height: 'auto',
  colHeaders: true,
  rowHeaders: true,
  className: 'as-you-type-demo',
  filters: true,
  colWidths: 100,
  hiddenColumns: {columns:[0]},
  afterGetColHeader: addInput,
  beforeOnCellMouseDown(event, coords) {
    // Deselect the column after clicking on input.
    if (coords.row === -1 && event.target.nodeName === 'INPUT') {
     ...