Handsontable example

HTML

<input id="searchTrend" placeholder="Trend" type="text">
<input id="searchYear" placeholder="Year" type="text">
<input id="searchExt" placeholder="External Color" type="text">
<input id="searchInt" placeholder="Internal Color" type="text">
<button name="clear" id="clear" class="intext-btn">Clear</button>
<div id="table" class="hot handsontable"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com/0.15.0-beta6/scripts/jquery.min.js"></script> <script src="http://docs.handsontable.com/0.15.0-beta6/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0-beta6/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

document.addEventListener("DOMContentLoaded", function() {

	// Create an empty table of strings, 'searchFields', that will contain the input values
  var
  myData = [
    ['Nissan', 2012, 'black', 'black'],
    ['Nissan', 2013, 'blue', 'white'],
    ['Chrysler', 2014, 'yellow', 'black'],
    ['Volvo', 2015, 'yellow', 'gray']
  ],
  searchFields = ["","","",""],
  hot;
  
  hot = new Handsontable(document.getElementById('table'), {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    colHeaders: ["Trend", "Year", "Color Ext", "Color Int"],
  });
  
  // The function push every row sastisfying all the input values into an array that is loaded
  function filter() {
  	var row, r_len, col, c_len;
		var data = myData;
		var array = [];
    var match = true;
    for (row = 0, r_len = data.length; row < r_len; row++) {
			for(col = 0, c_len = searchFields.length; col < c_len; col++) {
				if(('' + data[row][col]).toLowerCase().indexOf(searchFields[col]) > -1);
				else match=false;
			}
			if(match) array.push(data[row]);
			match = true;
		}
		hot.loadData(array);
  }
  
  // Keeping the table of strings synchronize with all the input values
  Handsontable.dom.addEvent(document.getElementById('searchTrend'), 'keyup', function() {
    searchFields[0] = ('' + this.value).toLowerCase();
    filter();
  });

  Handsontable.dom.addEvent(document.getElementById('searchYear'), 'keyup', function() {
    searchFields[1] = ('' + this.value).toLowerCase();
    filter();
  });

  Handsontable.dom.addEvent(document.getElementById('searchExt'), 'keyup', function() {
    searchFields[2] = ('' + this.value).toLowerCase();
    filter();
  });

  Handsontable.dom.addEvent(document.getElementById('searchInt'), 'keyup', function() {
    searchFields[3] = ('' + this.value).toLowerCase();
    filter();
  });
  
  // Clearing the filters in one click (conveniance purpose)
  Handsontable.dom.addEvent(clear, 'click', function() {
  	searchFields = ["","","",""];
    filter();
   ...