bump to AG Grid version 32.2

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dash-ag-grid",
-    "version": "31.2.0",
+    "version": "32.2.0",
     "description": "Dash wrapper around AG Grid, the best interactive data grid for the web.",
     "repository": {
         "type": "git",
@@ -32,9 +32,9 @@
     "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "ag-grid-community": "31.2.1",
-        "ag-grid-enterprise": "31.2.1",
-        "ag-grid-react": "31.2.1",
+        "ag-grid-community": "32.2.0",
+        "ag-grid-enterprise": "32.2.0",
+        "ag-grid-react": "32.2.0",
         "@mui/icons-material": "^5.15.7",
         "@mui/material": "^5.15.7",
         "d3-format": "^3.1.0",

src/lib/fragments/AgGrid.react.js

@@ -46,7 +46,7 @@ import MarkdownRenderer from '../renderers/markdownRenderer';
 import RowMenuRenderer from '../renderers/rowMenuRenderer';
 import {customFunctions} from '../renderers/customFunctions';
 
-import {AgGridReact} from 'ag-grid-react';
+import {AgGridReact, useGridFilter} from 'ag-grid-react';
 
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
@@ -1141,7 +1141,7 @@ export default class DashAgGrid extends Component {
                         cellRendererData: {
                             value,
                             colId: props.column.colId,
-                            rowIndex: props.rowIndex,
+                            rowIndex: props.node.sourceRowIndex,
                             rowId: props.node.id,
                             timestamp: Date.now(),
                         },
@@ -1465,3 +1465,6 @@ DashAgGrid.propTypes = {parentState: PropTypes.any, ..._propTypes};
 
 export const propTypes = DashAgGrid.propTypes;
 export const defaultProps = DashAgGrid.defaultProps;
+
+var dagfuncs = (window.dash_ag_grid = window.dash_ag_grid || {});
+dagfuncs.useGridFilter = useGridFilter;

tests/assets/dashAgGridFunctions.js

@@ -184,29 +184,23 @@ const {useImperativeHandle, useState, useEffect, forwardRef} = React;
 dagfuncs.YearFilter = forwardRef((props, ref) => {
     const [year, setYear] = useState('All');
 
-    useImperativeHandle(ref, () => {
-        return {
-            doesFilterPass(params) {
-                return params.data.year >= 2010;
-            },
-
-            isFilterActive() {
-                return year === '2010'
-            },
-
-            // this example isn't using getModel() and setModel(),
-            // so safe to just leave these empty. don't do this in your code!!!
-            getModel() {
-            },
-
-            setModel() {
-            }
-        }
-    });
-
-    useEffect(() => {
-        props.filterChangedCallback()
-    }, [year]);
+    dash_ag_grid.useGridFilter({
+           doesFilterPass(params) {
+               return params.data.year >= 2010;
+           },
+
+           // this example isn't using getModel() and setModel(),
+           // so safe to just leave these empty. don't do this in your code!!!
+           getModel() {
+           },
+
+           setModel() {
+           }
+   });
+
+   useEffect(() => {
+       props.onModelChange(year === "All" ? null : year)
+   }, [year]);
 
     setProps = ({value}) => {
         if (value) {

tests/test_custom_filter.py

@@ -114,7 +114,7 @@ def test_fi003_custom_filter(dash_duo):
 
     grid.wait_for_cell_text(0, 0, "23")
 
-    dash_duo.find_element('.ag-header-cell[aria-colindex="3"] .ag-icon-menu').click()
+    dash_duo.find_element('.ag-header-cell[aria-colindex="3"] span[data-ref="eFilterButton"]').click()
 
     dash_duo.find_element('.ag-filter label:nth-child(2)').click()