Filter Dash AG Grid by more than 2 params

Dash Python
1

Hi Everyone,

Is it possible to configure Dash AG Grid to filter columns by more than the the default 2 parameters (using AND / OR) without having an enterprise license? This seems to be one of the biggest draw backs with AG Grid.

2

Hello @kbally,

Yes, you should be able to create your own filter.

The default filters are limited to two, but I like you should be able to make it more with a custom one.

Or, make your own way to filter your data. Like a list or whatnot.

1 Like
3

Hi @kbally

The default is 2, but you can have more. This example has not yet been added to the dash docs, but you can find out more info here:

Here’s an example with dash:

The following example demonstrates Filter Condition configuration that can be applied to any Simple Filter.

  • The Athlete column shows a Text Filter with default behaviour for all options.
  • The Country column shows a Text Filter with filterOptions set to show a different list of available options, and defaultOption set to change the default option selected.
  • The Sport column shows a Text Filter with maxNumConditions set to 10 so that up to ten conditions can be entered.
  • The Age column has a Number Filter with numAlwaysVisibleConditions set to 2 so that two conditions are always shown. The defaultJoinOperator is also set to 'OR' rather than the default ('AND').
import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "athlete"},
    {
        "field": "country",
        "filterParams": {
            "filterOptions": ["contains", "startsWith", "endsWith"],
            "defaultOption": "startsWith",
        },
    },
    {
        "field": "sport",
        "filterParams": {
            "maxNumConditions": 10,
        },
    },
    {
        "field": "age",
        "filter": "agNumberColumnFilter",
        "filterParams": {
            "numAlwaysVisibleConditions": 2,
            "defaultJoinOperator": "OR",
        },
        "maxWidth": 100,
    },
]

app.layout = html.Div(
    [
        dag.AgGrid(            
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={
                "resizable": True,
                "sortable": True,
                "filter": True,
                "minWidth": 150,
            },
            columnSize="sizeToFit",
        ),
    ]
)

if __name__ == "__main__":
    app.run(debug=True)

dag-docs

1 Like