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",
@@ -31,9 +31,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';
@@ -1134,7 +1134,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(),
  },
@@ -1453,3 +1453,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()