Handsontable example

by handsoncode

HTML

<button id="btn">clear filters</button>
<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

JavaScript

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: [
    ['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]
  ],
  licenseKey: 'non-commercial-and-evaluation',
  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
});
const filtersPlugin = hot.getPlugin('Filters');

document.querySelector('#btn').addEventListener('click', function() {
	filtersPlugin.clearConditions();
  filtersPlugin.filter();
  hot.render();
});