Applying Filters

This section describes the different ways to apply the four filters provided by the
grid - Text Filter,
Number Filter,
Date Filter
and Set Filter.

Apply, Clear, Reset and Cancel Buttons

Each of the provided filters can optionally include Apply, Clear, Reset and Cancel buttons.

When the Apply button is used, the filter is only applied once the Apply button is pressed. This is useful if the
filtering operation will take a long time because the dataset is large, or if using server-side filtering (thus
preventing unnecessary calls to the server). Pressing <kbd>↵ Enter<kbd> is equivalent to pressing the Apply button.

The Clear button clears just the filter UI, whereas the Reset button clears the filter UI and removes any active
filters for that column.

The Cancel button will discard any changes that have been made in the UI, restoring the state of the filter to match
the applied model.

The buttons will be displayed in the order they are specified in the buttons array.

The example below demonstrates using the different buttons. It also demonstrates the relationship between the buttons
and filter events. Note the following:

Note the expected behaviour when clicking the filter popup buttons:

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",
        "filter": "agTextColumnFilter",
        "filterParams": {
            "buttons": ["reset", "apply"],
        },
    },
    {
        "field": "age",
        "maxWidth": 100,
        "filter": "agNumberColumnFilter",
        "filterParams": {
            "buttons": ["apply", "reset"],
            "closeOnApply": True,
        },
    },
    {
        "field": "country",
        "filter": "agTextColumnFilter",
        "filterParams": {
            "buttons": ["clear", "apply"],
        },
    },
    {
        "field": "year",
        "filter": "agNumberColumnFilter",
        "filterParams": {
            "buttons": ["apply", "cancel"],
            "closeOnApply": True,
        },
        "maxWidth": 100,
    },
    {"field": "sport"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="applying-filters",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            defaultColDef={"flex": 1, "filter": True},
            dashGridOptions={"animateRows": False}
        ),
    ]
)

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

Provided Filter Params

All the provided filters have the following parameters: