Handsontable example

by pdivasto

HTML

<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://docs.handsontable.com/0.23.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.23.0/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

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

  var
    data = [
      ['Nissan', 2012, 'black', 'black'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015, 'yellow', 'gray'],
      ['Nissan', 2013, 'blue', 'blue'],
      ['Chrysler', 2014, 'yellow', 'black'],
      ['Volvo', 2015,...