Text Filters

Text filters allow you to filter string data.

The Provided Filters and Simple Filters pages explain the parts of the Text Filter that are the same as the other Provided Filters. This page builds on that and explains some details that are specific to the Text Filter.

Text Filter Parameters

Text Filters are configured though the filterParams attribute of the column definition (ITextFilterParams interface):

Text Matcher

By default the text filter performs strict case-insensitive text filtering, i.e. if you provide \['1,234.5USD','345GBP'\] as data for a text column:

You can change the default behaviour by providing your own textMatcher, which allows you to provide your own logic to decide when to include a row in the filtered results.

Text Formatter

By default, the grid compares the text filter with the values in a case-insensitive way, by converting both the filter text and the values to lower-case and comparing them; for example, ‘o’ will match ‘Olivia’ and ‘Salmon’. If you instead want to have case-sensitive matches, you can set caseSensitive = True in the filterParams, so that no lower-casing is performed. In this case, ‘o’ would no longer match ‘Olivia’.

Example: Text Filter

Note: See the Column Filters Overview section for more filter options

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"
)


athleteFilterParams = {
    "filterOptions": ["contains", "notContains"],
    "debounceMs": 200,
    "suppressAndOrCondition": True,
}

countryFilterParams = {
    "filterOptions": ["contains"],
    "trimInput": True,
    "debounceMs": 1000,
}

columnDefs = [
    {
        "field": "athlete",
        "filterParams": athleteFilterParams,
    },
    {
        "field": "country",
        "filter": "agTextColumnFilter",
        "filterParams": countryFilterParams,
    },
    {
        "field": "sport",
        "filter": "agTextColumnFilter",
        "filterParams": {
            "caseSensitive": True,
            "defaultOption": "startsWith",
        },
    },
]
defaultColDef = {
    "flex": 1,
    "sortable": True,
    "filter": True,
}


app.layout = html.Div(
    [
        dag.AgGrid(
            id="text-filter-example",
            rowData=df.to_dict("records"),
            columnDefs=columnDefs,
            columnSize="sizeToFit",
            defaultColDef=defaultColDef,
        ),
    ]
)


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