Handsontable example

HTML

<div>
  <div id="example3" class="hot as-you-type-demo handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

.handsontable.as-you-type-demo tr:first-child th {
  vertical-align: bottom;
}

.handsontable.as-you-type-demo th > div.filterHeader {
  border-top: 1px solid #CCC;
}

.handsontable.as-you-type-demo th > div.filterHeader > input {
  width: calc(100% - 10px);
  box-shadow: none;
  border: 1px solid #CCC;
  margin-top: 1px;
}

#externalFilter {
  display: none;
  margin-left: 10px;
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  margin-bottom: 50px;
}

#externalFilter > .button-holder {
  position: relative;
}

#externalFilter > .button-holder .buttons {
  left: 5px;
}

#externalFilter > .demo-columnChoose,
#externalFilter > .demo-columnChoose > select,
#externalFilter > .demo-filterSelect {
  width: 200px;
}

#externalFilter > .demo-columnChoose > select {
  display: block;
  margin: 2px 0px 10px 0px;
}

#externalFilter > .demo-filterSelect {
  border: 1px solid #cccccc;
  max-height: 200px;
  overflow: auto;
}

#externalFilter > .demo-filterSelect > .demo-controllers {
  font-weight: bold;
  border-bottom: 1px solid #cccccc;
  background-color: rgb(243, 243, 243);
  padding: 2px 0px;
}

#externalFilter > .demo-filterSelect > .demo-controllers {
  padding: 5px;
}

#externalFilter > .demo-filterSelect > .demo-items {
  padding: 5px;
}

#externalFilter > .demo-filterSelect > .demo-items > .demo-item > label:before {
  content: ' ';
  white-space: pre;
}

#externalFilter > .button-holder {
  margin-top: 10px;
}


</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 dataObj = [
    ['12/1/2015', 23],
    ['5/12/2015', 6],
    ['10/23/2015', 26],
    ['12/1/2014', 98],
    ['12/1/2016', 8.5]
  ];
  
  var hot = new Handsontable(document.getElementById('example3'), {
    data: dataObj,
    colHeaders: true,
    rowHeaders: true,
    columns: [
    	{
      	header: 'Date',
      	type: 'date',
        format: 'M/D/YYYY'
      },
      {
      	header: 'Number',
        type: 'numeric'
      }
    ],
    className: 'as-you-type-demo',
    filters: true,
    colWidths: 100
  });
  
	hot.getPlugin('filters').addCondition(0, 'lt', ['1/1/2016'], 'conjunction');
  hot.getPlugin('filters').filter();