Dash AG Grid V32 Custom Filter Component error cant access doesFilterPass param

Dash Python
1

Hey everyone,

I use dash ag grid community, and am trying to make a custom filter component for my grid. I am using dash version 2.15.0 and dash ag grid version 32.3.0, which should be using ag grid version 32.3.4.

I have a custom component defined in /assets/dashAgGridComponentFunctions.js. However, no matter what I try, I cant get it to find the doesFilterPass hook used my the actual ag grid. Is anyone able to assist?

2

this is the error in the developer console:

index.esm.mjs:632 Uncaught TypeError: Cannot read properties of undefined (reading ‘doesFilterPass’)

3

Hi @nsledford

Just cross posting from the solution in the GitHub issue. See the full discussion and another example:

Note this is for AG Grid version 32. For anyone upgrading from V31, you can use the custom component defined for V31 by setting dashGridOptions={"reactiveCustomComponents": False}

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

app = Dash(__name__)

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': {'function': 'YearFilter'}},
    {
      '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"),
        dag.AgGrid(
            id="grid",
            columnDefs=columnDefs,
            rowData=rowData,
            defaultColDef=defaultColDef,          
        ),
    ]
)


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



var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

const {useImperativeHandle, useState, useEffect, forwardRef} = React;
dagfuncs.YearFilter = forwardRef((props, ref) => {
    const [year, setYear] = useState('All');

    dash_ag_grid.useGridFilter({
           doesFilterPass(params) {
               return params.data.year >= 2010;
           },          
   });

   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
        }
    )
});

See the two examples on PyCafe:

And here is an example with the custom Autocomplete component in the filter