Custom Filter icon and Context menu

Tags: #<Tag:0x00007efc61510db0>
#1

Hi,

Is there any way where i can update custom filter icon and the context menu open of filter with some stripped out fields?

Thanks & Regards,
Naveen

#2

Hey @nav2jaiswal

What exactly do you want to change? Usually, when you wan to to add anything new to the context menu you need to edit it as an object. Here’s an example https://codesandbox.io/s/nervous-morning-zvqmo

#3

I want to update filter context menu as attached (remove items which are not displayed), also need to update styling (fonts and color) to the context menu.
filter

#4

Currently there is no way to change the filter UI or order of options. After defining

dropdownMenu: true,
filters: true,

you get a predefined set of options

you can remove Filter by value or Filter by condition by defining a dropdownMenu like this

dropdownMenu: [filter_by_value,filter_action_bar]

but this is where the control ends.

The styling may be possible by using !important on the filters classes but I haven’t tried it before so that is only a theory.

#5

Thanks @aleksandra_budnik,

Dropdown menu works as expected.
Styling i am still working on, will let you know if I face any difficulties.

I have two more doubts -

  1. Is there any way I can update the filer icon as below
    icon

  2. When data table is initially empty or empty after applying filters,
    After headers I want to show user messae as label “Data is empty” or “Data is empty, try removing some filters”. Is there any flag update on filters.

Thanks,
Naveen

#6

Here’s an example on styling those icons https://jsfiddle.net/9zuj28mr/

Is there any flag update on filters.

Do you mean, how to know that there are no rows left?

#7

Do you mean, how to know that there are no rows left?

yes, after applying filters

#8

You can use the countRows() method in the afterFilter() hook.

1 Like
#9

Hi @aleksandra_budnik,

I am able to get the afterFilter hook , but not able to get the filtered datasets to get the countRows, can u share some example.

Thanks,
Naveen

#10

I guess that it would be easier if you could share your feedback, as this should work out of the box (without the afterFilter dataset).

Code sample

afterFilter: function(){
    	console.log(this.countRows())
}
1 Like
#11

Hi @aleksandra_budnik,

I have updated the code here below
https://jsfiddle.net/naveen2894/suv9w1qg/6/

Can u please check and let me know after applying any filter, how to get the data source count (which is displaying on UI) in OnAfterFilter method.

Thanks,
Naveen

#12

You are loading the condition stack, this is what this is in your hook. You need to get the instance there.

  1. Add hotId (line 12)
  2. Add lines 28-29 for the hotRegisterer
  3. Import HotTableRegisterer (line 4)

Then you can call the instance via

this.hotRegisterer.getInstance(this.id)

in the 47 line of the demo.

Updated demo https://jsfiddle.net/Ltw76sum/

#13