Handsontable column filter

Getting help Questions
,
1

Hi. I’m new to Handsontable. I am hoping to be able to click on a column header and have the table filtered by ‘Non Empty’ for this column. I don’t want a drop down menu, just to click on the header. I would also need a way to clear the filter, ideally by clicking on the header again, but a separate button would be OK. Can anyone point me in the right direction?

Thanks

2

Hi @kmd2

There’s a callback that detects a click on a column cell/header, you can use that. It is called afterOnCellMouseDown (ref: Hooks API reference - JavaScript Data Grid | Handsontable).

Based on the available callback parameters we can base our condition to fire custom logic only when a column header is clicked. Then to check what index of a header that is

afterOnCellMouseDown: function(e, coords, TD){
  	if(coords.row < 0){
    	console.log(`header ${coords.col} clicked`)
    }
  }

Demo: Handsontable example - JSFiddle - Code Playground

Then, as a second step we will add the filters logic (here you have to remember to add the filters: true to the configuration to enable the filter).

filters: true, //enabling filters

and filters logic

  afterOnCellMouseDown: function(e, coords, TD){
  	if(coords.row < 0){
    	let filtersPlugin = this.getPlugin('Filters');
      let filtersApplied = filtersPlugin.conditionCollection.filteringStates.orderOfIndexes; //array of column indexes with conditions applied
      
      if(coords.row && !filtersApplied.includes(coords.col)){
        filtersPlugin.addCondition(coords.col, 'not_empty', []);
        filtersPlugin.filter();
      } else {
      	//remove filters
        filtersPlugin.clearConditions();
        filtersPlugin.filter();
      }
    }
  }

Demo: Handsontable example - JSFiddle - Code Playground

3

super helpful. Thanks!

4

You’re welcome @kmd2

I’m closing this thread as solved.