Dash AG Grid - creating Custom Filter Options

Dash Python
1

Where is this documented? It is mentioned on Column Filters | Dash for Python Documentation | Plotly, but I can’t see anything more.

My use case is to have a filter that shows “Choose One” and the values to choose from are the unique values in the column, e.g. choose between “Complete” and “Failed”.

2

Hi @maklai

You can find more info on custom filters in the first example here:

Note also, that if you are using AG Grid Enterprise, you can use set filters for that use-case

1 Like
3

I was able to get “Choose One” to show up just by using column_def["filterParams"] = {"filterOptions": ["empty"]}. Can I just add another item to the filterParams dict with a list of choices, or do I need to write a function in assets/dashAgGridFunctions.js that returns a list of strings?

4

@AnnMarieW

Thanks. Are you referring to the comparator example in Ag-Grid Custom Filtering - #10 by AnnMarieW ? My understanding is that it is used for sorting.

I am trying to do this: https://www.ag-grid.com/react-data-grid/filter-set-filter-list/#supplying-filter-values

Tried

 "filterParams": {
            "filterOptions": ["empty"],
            "values": ["some_value"]
        }

, but that did not work.
Do I need filterValueGetter?

5

Hi @maklai

Are you using AG Grid Enterprise?

You can find the Dash version of the AG Grid Set Filter docs you mention here:

6

No, the free version.

7

The Set filters is an Enterprise feature. For the community version, if there are a limited number of choices, you could use the placeholder

"filterParams": {
            "filterOptions": "contains", 
            "placeholder": "Complete or Failed"
        },

Or you can use a custom component in the header using a checkbox or a dropdown. You can see an example with radio items here: Ag-Grid Custom Filtering - #14 by jinnyzor
Note - you need to use dash-ag-grid>=2.4.0

2 Likes
8

@AnnMarieW Thank you.