Handsontable column filter

Tags: #<Tag:0x00007efc60a73920> #<Tag:0x00007efc60a73740>
#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: https://handsontable.com/docs/javascript-data-grid/api/hooks/#afteroncellmousedown).

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: https://jsfiddle.net/csb4uq1p/

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: https://jsfiddle.net/csb4uq1p/3/

#3

super helpful. Thanks!

#4

You’re welcome @kmd2

I’m closing this thread as solved.

#5