Handsontable example

by handsoncode

HTML

<div>
  <div id="example1" class="hot 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/handsontable-pro@6.2.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.css">

JavaScript

var dataObj = [
    ['Lorem', 'ipsum', 'dolor', 'sit', '12/1/2015', 23],
    ['adipiscing', 'elit', 'Ut', 'imperdiet', '5/12/2015', 6],
    ['Pellentesque', 'vulputate', 'leo', 'semper', '10/23/2015', 26],
    ['diam', 'et', 'malesuada', 'libero', '12/1/2014', 98],
    ['orci', 'et', 'dignissim', 'hendrerit', '12/1/2016', 8.5]
  ];
  var example1 = document.getElementById('example1');
  
  var hot = new Handsontable(example1, {
    data: dataObj,
    columns: [
      {type: 'text'},
      {type: 'text'},
      {type: 'text'},
      {type: 'text'},
      {type: 'date', dateFormat: 'M/D/YYYY'},
      {type: 'numeric'}
    ],
    colHeaders: true,
    rowHeaders: true,
    dropdownMenu: true,
    filters: true
  });
 
 
 //filtering - visible 1/5 rows
 var plu = hot.getPlugin('Filters');
 plu.addCondition(0, 'begins_with', ['L']);
 plu.filter()
 
 //changing values
hot.setDataAtCell(0,0, 'ABC'); //visible row
hot.setDataAtCell(1,0, 'ABC'); //hidden row