Handsontable example

by lollero

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<input id="search_field" type="search" placeholder="Search">
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<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">

JavaScript

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

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

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

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

  div.className = 'filterHeader';

  addEventListeners(input, colIndex);

  div.appendChild(input);

  return div;
};

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

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

// Deselect column after click on input.
var doNotSelectColumn = function (event, coords) {
  if (coords.row === -1 && event.target.nodeName === 'INPUT') {
    event.stopImmediatePropagation();
    this.deselectCell();
  }
};








var data = [
  ['Tesla', 2017, 'black', 'black'],
  ['Nissan', 2018, 'blue', 'blue'],
  ['Chrysler', 2019, 'yellow', 'black'],
  ['Volvo', 2020, 'yellow', 'gray']
],
example = document.getElementById('example1'),
searchFiled = document.getElementById('search_field'),
hot;

hot = new Handsontable(example, {
  licenseKey: 'non-commercial-and-evaluation',
  data: data,
  colHeaders: true,
  search: true,
  trimRows: true,
  afterGetColHeader: addInput,
  beforeOnCellMouseDown: doNotSelectColumn,
  filters: true,
});

  
var allRows = _.range( hot.countRows()...