Skip to content

Conversation

@AnnMarieW
Copy link
Collaborator

Add more props to propCategories.js to enable function:

in filter added doesFilterPass and handler

This makes it possible to make custom filter components as recommended in V34
https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-34/#filters

@AnnMarieW
Copy link
Collaborator Author

AnnMarieW commented Jan 30, 2026

Here's a sample app:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)
print(dag.__version__)

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

rowData = df.to_dict('records')

columnDefs = [
    { 'field': 'age', 'filter': 'agNumberColumnFilter' },
    { 'field': 'country', 'minWidth': 150 },
    { 'field': 'year', 'filter': {'component':  'YearFilter35', 'doesFilterPass': {'function': 'doesFilterPass'}}},
    {
      'field': 'date',
      'minWidth': 130,
      'filter': 'agDateColumnFilter',
      'filterParams': {
        'comparator': {'function':'dateComparator'},
      },
    },
    { 'field': 'sport' },
    { 'field': 'gold', 'filter': 'agNumberColumnFilter' },
    { 'field': 'silver', 'filter': 'agNumberColumnFilter' },
    { 'field': 'bronze', 'filter': 'agNumberColumnFilter' },
    { 'field': 'total', 'filter': 'agNumberColumnFilter' },
]

defaultColDef = {
    'editable': True,
    'sortable': True,
    'flex': 1,
    'minWidth': 100,
    'filter': True,
    'resizable': True,
}


app.layout = html.Div(
    [
        html.H3("See the custom filter component in the Year column v35"),
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef=defaultColDef,            
            # Needs to be set in dash-ag-grid>=34.0 with filter logic sep from component
            dashGridOptions={"enableFilterHandlers": True}
        ),
    ]
)


if __name__ == "__main__":
    app.run(host="127.0.0.1", debug=True)
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};
const {useImperativeHandle, useState, useEffect} = React;
// for v35 filter logic separate

dagfuncs.doesFilterPass = (params) => {
   return params.data.year >= 2010;
}

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.YearFilter35 = ((props) => {
    const [year, setYear] = useState('All');

   useEffect(() => {
       props.onModelChange(year === "All" ? null : year)
   }, [year]);

    setProps = ({value}) => {
        if (value) {
            setYear(value)
        }
    }

    return React.createElement(
        window.dash_core_components.RadioItems,
        {
            options: [
                {'label': 'All', 'value': 'All'},
                {'label': 'Since 2010', 'value': '2010'},
            ],
            value: year,
            setProps
        }
    )
};

@BSd3v
Copy link
Collaborator

BSd3v commented Jan 30, 2026

@AnnMarieW

Please add a test and a changelog entry

@AnnMarieW AnnMarieW changed the title enable functions in filter enable filter handlers Jan 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants