Merge pull request #328 from BSd3v/bump-to-v32_2

bump to AG Grid version `32.3`

Author: BSd3v

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to `dash-ag-grid` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo
 
+## [unreleased]
+
+### Fixed
+- [#328](https://github.com/plotly/dash-ag-grid/pull/328) fixed issue where `getRowStyle` wast able to be passed as a complete function
+
+### Changed
+- [#328](https://github.com/plotly/dash-ag-grid/pull/328) 
+  - bumping to v`32.3` for the grid
+  - the grid checks if updates are from an internal source (3.0.2 dash) and will selectively rerender if so
+
 ## [31.3.1] - 2025-03-17
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "dash-ag-grid",
-    "version": "31.3.1",
+    "version": "32.3.0",
     "description": "Dash wrapper around AG Grid, the best interactive data grid for the web.",
     "repository": {
         "type": "git",
@@ -25,17 +25,16 @@
         "private::lint.eslint": "eslint src",
         "private::lint.prettier": "prettier src --list-different --ignore-path=.prettierignore",
         "lint": "run-s private::lint.*",
-        "test": "pytest --headless",
-        "dist": "npm run build && run-s pre-flight-dag-version && rimraf build dist && python setup.py sdist bdist_wheel"
+        "dist": "npm run build && run-s pre-flight-dag-version &&  python setup.py sdist bdist_wheel"
     },
     "author": "Plotly <[email protected]>",
     "license": "MIT",
     "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "ag-grid-community": "31.3.4",
-        "ag-grid-enterprise": "31.3.4",
-        "ag-grid-react": "31.3.4",
+        "ag-grid-community": "32.3.4",
+        "ag-grid-enterprise": "32.3.4",
+        "ag-grid-react": "32.3.4",
         "@mui/icons-material": "^5.15.7",
         "@mui/material": "^5.15.7",
         "d3-format": "^3.1.0",

package.json

@@ -12,7 +12,7 @@ function getGrid(enable) {
 /**
  * Dash interface to AG Grid, a powerful tabular data component.
  */
-export default class DashAgGrid extends Component {
+class DashAgGrid extends Component {
     constructor(props) {
         super(props);
 
@@ -24,6 +24,8 @@ export default class DashAgGrid extends Component {
         this.buildArray = this.buildArray.bind(this);
     }
 
+    static dashRenderType = true;
+
     buildArray(arr1, arr2) {
         if (arr1) {
             if (!arr1.includes(arr2)) {
@@ -750,11 +752,18 @@ DashAgGrid.propTypes = {
      * Other ag-grid options
      */
     dashGridOptions: PropTypes.object,
+
+    /**
+     * dashRenderType to determine why grid is rendering
+     */
+    dashRenderType: PropTypes.string,
 };
 
 export const propTypes = DashAgGrid.propTypes;
 export const defaultProps = DashAgGrid.defaultProps;
 
+export default DashAgGrid;
+
 export const apiGetters = {};
 
 const _get = (flavor) => (id) => {

src/lib/components/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';
@@ -488,7 +488,10 @@ export default class DashAgGrid extends Component {
             if (target === 'getRowId') {
                 return this.convertFunction(value);
             }
-            if (target === 'getRowStyle') {
+            if (
+                target === 'getRowStyle' &&
+                (has('styleConditions', value) || has('defaultStyle', value))
+            ) {
                 return this.handleDynamicStyle(value);
             }
             if (OBJ_OF_FUNCTIONS[target]) {
@@ -604,7 +607,10 @@ export default class DashAgGrid extends Component {
             !equals(
                 {...omit(OMIT_PROP_RENDER, nextProps)},
                 {...omit(OMIT_PROP_RENDER, this.props)}
-            )
+            ) &&
+            (nextProps?.dashRenderType !== 'internal' ||
+                !equals(nextProps.rowData, this.props.rowData) ||
+                !equals(nextProps.selectedRows, this.props.selectedRows))
         ) {
             return true;
         }
@@ -617,14 +623,16 @@ export default class DashAgGrid extends Component {
             return true;
         }
         if (gridApi && !gridApi?.isDestroyed()) {
-            if (columnState) {
-                if (columnState !== this.props.columnState) {
-                    return true;
+            if (nextProps?.dashRenderType !== 'internal') {
+                if (columnState) {
+                    if (columnState !== this.props.columnState) {
+                        return true;
+                    }
                 }
-            }
-            if (filterModel) {
-                if (!equals(filterModel, gridApi.getFilterModel())) {
-                    return true;
+                if (filterModel) {
+                    if (!equals(filterModel, gridApi.getFilterModel())) {
+                        return true;
+                    }
                 }
             }
             if (selectedRows) {
@@ -1170,7 +1178,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(),
                         },
@@ -1494,3 +1502,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;

src/lib/fragments/AgGrid.react.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;
-            },
+    dash_ag_grid.useGridFilter({
+           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() {
+           },
 
-            // 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()
-    }, [year]);
+   useEffect(() => {
+       props.onModelChange(year === "All" ? null : year)
+   }, [year]);
 
     setProps = ({value}) => {
         if (value) {
@@ -504,4 +498,8 @@ dagfuncs.sortColumns = (a, b) => b.localeCompare(a)
 dagfuncs.TestEvent = (params, setEventData) => {
     console.log(params)
     setEventData('here I am')
+}
+
+dagfuncs.testToyota = (params) => {
+    return params.data.make == 'Toyota' ? {'color': 'blue'} : {}
 }