Filter Value like Google sheets

Tags: #<Tag:0x00007efc6578bb90>
#1

Hi,
I need to show the filtered options on the top ,similar to google sheet
Any Idea how to implement it more specifically in angular
See images below

googlesheet
googlesheet.png1862×874 44.4 KB

and handsontable displays like this
handson-filter
handson-filter.png905×780 43.9 KB

Thanks

#2

Well, this is the default Handsontable implementation. As close as we could get to fulfill various requirements. I understand you have your own requirements and you will have to put some effort into custom development. Looks like you will need custom renderer with button, and reimplement or reuse our dropdown menu with filters controls in it.

Kind regards,
Wojciech

#3

I would gladly do that. But a few examples with documentation about where to look would be more helpful

Thanks

#4

Hi @hamishn

here’s http://jsfiddle.net/mx1tor5v/ a demo with a custom dropdown menu. And here’s an example of a custom renderer with Handsontable for Angular https://handsontable.com/docs/7.2.2/frameworks-wrapper-for-angular-custom-renderer-example.html

#5

Thanks,
How can I access the filter by value plugin and change its UI?
Is it possible to access the UI of the plugin so that I can display the checked values on top without changing the logic?

#6

Currently there is no option to change filters or extend their UI. You can only pick of of the predefined keys to load them into dropdown menu

filter_by_value
filter_by_condition
filter_action_bar (action buttons)

#7

How can I use filter_action_bar in my custom filter ??
Is there a way to get unique filter data for all the columns (using filter api)
Also how can I get subsequent columns’ filter_by_value data if a column is filtered??

Thanks

#8

filter_actiob_bar is only a set of button that you need to trigger filtering.
To get data while filtering you should you get afterFilter hook + getData to get updated data. We also have methods like getDataAtRow and getDataAtRowProp for objects.

#9