enable filter handlers

[AnnMarieW]

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]

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]

@AnnMarieW

Please add a test and a changelog entry

[BSd3v]

💃

[AnnMarieW]

@BSd3v This change needs to go in both v34 and v35. What's the best way to do that?

[BSd3v]

Merge this PR in, and then take these changes into v34 as well.

You should be able to cherry pick the changes.