Handsontable example

HTML

<div class="example"></div>

CSS

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

JavaScript

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

  var container = document.querySelector('.example'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(100, 10),
    filters: true,
    height: 400,
    dropdownMenu: true,
    colHeaders: true,
    beforeFilter: function(conditionsStack) {
      console.log('amount of filters: ' + conditionsStack.length);
      console.log('Last changed column index: ' + conditionsStack[0].column);
      console.log('amount of filters added to this column: ' + conditionsStack[0].conditions.length);
      //list of conditions
      console.log(conditionsStack[0].conditions);

      //here I return false to turn off front-end filtering
      return false
    }
  });



});