Bump ag-grid to version 33.0.4

package.json

@@ -33,9 +33,9 @@
     "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "ag-grid-community": "31.3.2",
-        "ag-grid-enterprise": "31.3.2",
-        "ag-grid-react": "31.3.2",
+        "ag-grid-community": "33.0.4",
+        "ag-grid-enterprise": "33.0.4",
+        "ag-grid-react": "33.0.4",
         "@mui/icons-material": "^5.15.7",
         "@mui/material": "^5.15.7",
         "d3-format": "^3.1.0",

src/lib/components/AgGrid.react.js

@@ -60,7 +60,6 @@ export default class DashAgGrid extends Component {
 }
 
 DashAgGrid.defaultProps = {
-    className: 'ag-theme-alpine',
     resetColumnState: false,
     exportDataAsCsv: false,
     selectAll: false,

src/lib/fragments/AgGrid.react.js

@@ -47,12 +47,9 @@ import RowMenuRenderer from '../renderers/rowMenuRenderer';
 import {customFunctions} from '../renderers/customFunctions';
 
 import {AgGridReact} from 'ag-grid-react';
+import {AllCommunityModule, ModuleRegistry} from 'ag-grid-community';
 
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-import 'ag-grid-community/styles/ag-theme-balham.css';
-import 'ag-grid-community/styles/ag-theme-material.css';
-import 'ag-grid-community/styles/ag-theme-quartz.css';
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 // d3 imports
 import * as d3Format from 'd3-format';
@@ -1149,7 +1146,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(),
                         },

src/lib/fragments/AgGridEnterprise.react.js

@@ -1,7 +1,13 @@
 import React, {Component} from 'react';
-import {LicenseManager} from 'ag-grid-enterprise';
+import {
+    LicenseManager,
+    AllEnterpriseModule,
+    ModuleRegistry,
+} from 'ag-grid-enterprise';
 import DashAgGrid, {propTypes} from './AgGrid.react';
 
+ModuleRegistry.registerModules([AllEnterpriseModule]);
+
 export default class DashAgGridEnterprise extends Component {
     render() {
         const {licenseKey} = this.props;

src/lib/index.js

@@ -1,3 +1,4 @@
 import AgGrid, {getApi, getApiAsync} from './components/AgGrid.react';
 
 export {AgGrid, getApi, getApiAsync};
+export {useGridFilter} from 'ag-grid-react';

src/lib/utils/propCategories.js

@@ -338,6 +338,8 @@ export const PROPS_NOT_FOR_AG_GRID = [
     'selectAll',
     'deselectAll',
     'deleteSelectedRows',
+    'selectedRows',
+    'paginationInfo',
     'rowTransaction',
     'updateColumnState',
     'csvExportParams',

tests/assets/dashAgGridFunctions.js

@@ -184,28 +184,26 @@ 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;
-            },
+    dash_ag_grid.useGridFilter({
+        doesFilterPass(params) {
+            return params.data.year >= 2010;
+        },
 
-            isFilterActive() {
-                return 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() {
-            },
+        // this example isn't using getModel() and setModel(),
+        // so safe to just leave these empty. don't do this in your code!!!
+        getModel() {
+        },
 
-            setModel() {
-            }
+        setModel() {
         }
     });
 
     useEffect(() => {
-        props.filterChangedCallback()
+        props.onModelChange(year === "All" ? null : year)
     }, [year]);
 
     setProps = ({value}) => {

tests/test_cell_value_changed.py

@@ -31,6 +31,9 @@ def test_cv001_cell_value_changed(dash_duo):
                 columnDefs=[{"field": "Key", "checkboxSelection": True}]
                            + [{"field": i} for i in ["Column", "OldValue", "NewValue"]],
                 rowData=[],
+                dashGridOptions={
+                    "rowSelection": {"mode": "singleRow"},
+                },
             ),
         ],
         style={"margin": 20},

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"] .ag-header-cell-filter-button').click()
 
     dash_duo.find_element('.ag-filter label:nth-child(2)').click()
 

tests/test_dangerous_templates.py

@@ -74,7 +74,9 @@ def test_dt002_dangerous_templates(dash_duo):
             "field": "company",
         },
         {
-            "headerComponentParams": {"template": "<div>Testing</div>"},
+            "headerComponentParams": {
+                "template": '<div data-ref="eLabel">[<span data-ref="eText"></span>]</div>'
+            },
             "field": "price",
             "valueFormatter": {"function": """d3.format("($,.2f")(params.value)"""},
         },
@@ -122,4 +124,4 @@ def loadBlank(n):
     )
     dash_duo.find_element("#loadBlank").click()
     dash_duo.wait_for_text_to_equal(".ag-overlay-no-rows-wrapper", "whoops no info")
-    assert grid.get_header_cell(2).text == "Testing"
+    assert grid.get_header_cell(2).text == "[Price]"

tests/test_grid_apis.py

@@ -100,7 +100,7 @@ def test_ga001_grid_apis(dash_duo):
     app.clientside_callback(
         """function (n) {
             if (n) {
-                dash_ag_grid.getApi('grid').setColumnVisible("price", false)
+                dash_ag_grid.getApi('grid').setColumnsVisible(["price"], false)
             }
             return dash_clientside.no_update
         }""",

tests/test_scroll_to.py

@@ -123,6 +123,8 @@ def update_scrollTo(n_clicks):
         return scroll_to_inputs[n_clicks - 1]
 
     dash_duo.start_server(app)
+    dash_duo.driver.set_window_size(1000, 800)
+
     grid = utils.Grid(dash_duo, "grid")
 
     action = utils.ActionChains(dash_duo.driver)
@@ -231,6 +233,7 @@ def reset_columnState(n, s):
         return state
 
     dash_duo.start_server(app)
+    dash_duo.driver.set_window_size(1000, 800)
 
     grid = utils.Grid(dash_duo, "grid")
     until(lambda: "1" == grid.get_cell(2000, 9).text, timeout=3)

tests/test_user_style.py

@@ -52,11 +52,11 @@ def test_us001_user_style(dash_duo):
     grid.wait_for_cell_text(0, 0, "Toyota")
     until(
         lambda: "height: 500px"
-        in dash_duo.find_element("div.ag-theme-alpine").get_attribute("style"),
+        in dash_duo.find_element("#grid").get_attribute("style"),
         timeout=3,
     )
     until(
         lambda: "width: 500px"
-        in dash_duo.find_element("div.ag-theme-alpine").get_attribute("style"),
+        in dash_duo.find_element("#grid").get_attribute("style"),
         timeout=3,
     )