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

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, {
    data: data,
    colHeaders: true,
    search: true,
    hiddenRows: true
  });
  
  Handsontable.dom.addEvent(searchFiled, 'keyup', function (event) {
  
    var search = hot.getPlugin('search');
    var queryResult = search.query(this.value);

    const hiddenRowsPlugin = hot.getPlugin('hiddenRows');
    var matchingRows = _.map( queryResult, 'row' );
    matchingRows = _.uniq( matchingRows );
    var allRows = _.range( hot.countRows() );
    var excludedRows = _.difference(allRows, matchingRows);

  	if ( $('#search_field').val().trim() === '' ) {
      _.each(allRows, function( value ) {
        hiddenRowsPlugin.showRow( value );
      });
    }
    else {
      _.each(matchingRows, function( value ) {
        hiddenRowsPlugin.showRow( value );
      });
      _.each(excludedRows, function( value ) {
        hiddenRowsPlugin.hideRow( value );
      });
    }

    hot.render();
  });