diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a2b435f..e1b5913b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ 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] + ## [31.3.1] - 2025-03-17 ### Fixed diff --git a/package-lock.json b/package-lock.json index 454b649a..919466d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,21 @@ { "name": "dash-ag-grid", - "version": "31.3.1", + "version": "32.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "dash-ag-grid", - "version": "31.3.1", + "version": "32.3.0", "license": "MIT", "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.7", "@mui/material": "^5.15.7", - "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", "d3-format": "^3.1.0", "d3-time": "^3.1.0", "d3-time-format": "^4.1.0", @@ -3414,39 +3414,58 @@ } }, "node_modules/ag-charts-community": { - "version": "9.3.2", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.3.2.tgz", - "integrity": "sha512-jw2llxTYzGAZ24m7eQsKS24BnJBhspZKsL03DbqH0wxLepbEcC3eeWICe+02TBQCbFVsWmSsYukjzQg3FkVWRw==", + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.3.4.tgz", + "integrity": "sha512-Acm4KNaS2khHH1Q1J96xtXclhqU2ku10amYRcpsVPdKL9dz9MmMbE6ja9DSGJuz3Zl8pwXlcT4GaQjNnaLKUFw==", + "license": "MIT", + "dependencies": { + "ag-charts-locale": "10.3.4", + "ag-charts-types": "10.3.4" + } + }, + "node_modules/ag-charts-locale": { + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.3.4.tgz", + "integrity": "sha512-b2DiNzkzJpyAM+YXv7qapApHRCmyJdn1qPWGDnFD8NqoMatMbvxpbjkbD8nmR9rECsI3l5uw9lvH1uxDks5lLA==", "license": "MIT" }, - "node_modules/ag-grid-community": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.4.tgz", - "integrity": "sha512-jOxQO86C6eLnk1GdP24HB6aqaouFzMWizgfUwNY5MnetiWzz9ZaAmOGSnW/XBvdjXvC5Fpk3gSbvVKKQ7h9kBw==", + "node_modules/ag-charts-types": { + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.4.tgz", + "integrity": "sha512-MU+3gvKn1jEyLlMHS0Vu0nHmIQxiVJAnA6ftUatLZvV0c7hOWap4VWghqZ0cVZUJsCdMI59Iuq1u3xquKv4LOQ==", "license": "MIT" }, + "node_modules/ag-grid-community": { + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.3.4.tgz", + "integrity": "sha512-iYQYFapKkqtCml1BvIX/nyNO6SvZYe/Z/1hLa7/7Dpzj2uqABJZIPGgW/ZTOc+/YiM9JYJWMkD7c+5E23GzkAw==", + "license": "MIT", + "dependencies": { + "ag-charts-types": "10.3.4" + } + }, "node_modules/ag-grid-enterprise": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.3.4.tgz", - "integrity": "sha512-kreGRsFjz41APXXchLcQFtginnrmIGQYH48p7ydz33x8v+aja06HS5yEM6NP8j+VVHX43LeXnsl5Y4TLRgSoeg==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.3.4.tgz", + "integrity": "sha512-IgOw87Wg65x/fxKIhGHKgKL21Acht6P5kN1LHxzrV+PUn3Q13+52qhbLq+9Ck1FTxPqd2PgKrtLrZiQJWneYTA==", "license": "Commercial", "dependencies": { - "ag-charts-community": "9.3.2", - "ag-grid-community": "31.3.4" + "ag-charts-community": "10.3.4", + "ag-grid-community": "32.3.4" } }, "node_modules/ag-grid-react": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.4.tgz", - "integrity": "sha512-WmPASHRFGSTxCMRStWG5bRtln0Ugsdqbb3+Y8sEyGHeLw4hXqfpqie3lT9kqCOl7wPWUjCpwmFdXzRnWPmyyeg==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.3.4.tgz", + "integrity": "sha512-JuIum0etQnWUxWt4EbCXkLGa2lNLgFXNK0nR/rr2+WcOHZSIo1wXe5DPySnL725BK+yPqfB6XZmZcETpEDT+bQ==", "license": "MIT", "dependencies": { - "ag-grid-community": "31.3.4", + "ag-grid-community": "32.3.4", "prop-types": "^15.8.1" }, "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/ajv": { @@ -14702,30 +14721,47 @@ "requires": {} }, "ag-charts-community": { - "version": "9.3.2", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.3.2.tgz", - "integrity": "sha512-jw2llxTYzGAZ24m7eQsKS24BnJBhspZKsL03DbqH0wxLepbEcC3eeWICe+02TBQCbFVsWmSsYukjzQg3FkVWRw==" + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.3.4.tgz", + "integrity": "sha512-Acm4KNaS2khHH1Q1J96xtXclhqU2ku10amYRcpsVPdKL9dz9MmMbE6ja9DSGJuz3Zl8pwXlcT4GaQjNnaLKUFw==", + "requires": { + "ag-charts-locale": "10.3.4", + "ag-charts-types": "10.3.4" + } + }, + "ag-charts-locale": { + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.3.4.tgz", + "integrity": "sha512-b2DiNzkzJpyAM+YXv7qapApHRCmyJdn1qPWGDnFD8NqoMatMbvxpbjkbD8nmR9rECsI3l5uw9lvH1uxDks5lLA==" + }, + "ag-charts-types": { + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.4.tgz", + "integrity": "sha512-MU+3gvKn1jEyLlMHS0Vu0nHmIQxiVJAnA6ftUatLZvV0c7hOWap4VWghqZ0cVZUJsCdMI59Iuq1u3xquKv4LOQ==" }, "ag-grid-community": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.4.tgz", - "integrity": "sha512-jOxQO86C6eLnk1GdP24HB6aqaouFzMWizgfUwNY5MnetiWzz9ZaAmOGSnW/XBvdjXvC5Fpk3gSbvVKKQ7h9kBw==" + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.3.4.tgz", + "integrity": "sha512-iYQYFapKkqtCml1BvIX/nyNO6SvZYe/Z/1hLa7/7Dpzj2uqABJZIPGgW/ZTOc+/YiM9JYJWMkD7c+5E23GzkAw==", + "requires": { + "ag-charts-types": "10.3.4" + } }, "ag-grid-enterprise": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.3.4.tgz", - "integrity": "sha512-kreGRsFjz41APXXchLcQFtginnrmIGQYH48p7ydz33x8v+aja06HS5yEM6NP8j+VVHX43LeXnsl5Y4TLRgSoeg==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.3.4.tgz", + "integrity": "sha512-IgOw87Wg65x/fxKIhGHKgKL21Acht6P5kN1LHxzrV+PUn3Q13+52qhbLq+9Ck1FTxPqd2PgKrtLrZiQJWneYTA==", "requires": { - "ag-charts-community": "9.3.2", - "ag-grid-community": "31.3.4" + "ag-charts-community": "10.3.4", + "ag-grid-community": "32.3.4" } }, "ag-grid-react": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.4.tgz", - "integrity": "sha512-WmPASHRFGSTxCMRStWG5bRtln0Ugsdqbb3+Y8sEyGHeLw4hXqfpqie3lT9kqCOl7wPWUjCpwmFdXzRnWPmyyeg==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.3.4.tgz", + "integrity": "sha512-JuIum0etQnWUxWt4EbCXkLGa2lNLgFXNK0nR/rr2+WcOHZSIo1wXe5DPySnL725BK+yPqfB6XZmZcETpEDT+bQ==", "requires": { - "ag-grid-community": "31.3.4", + "ag-grid-community": "32.3.4", "prop-types": "^15.8.1" } }, diff --git a/package.json b/package.json index b4af6a8e..4480c33d 100644 --- a/package.json +++ b/package.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 ", "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", @@ -87,4 +86,4 @@ "browserslist": [ "last 7 years and not dead" ] -} +} \ No newline at end of file diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index 3cca1376..5495c896 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -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); @@ -750,11 +750,19 @@ 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; +DashAgGrid.dashRenderType = true; +export default DashAgGrid; + export const apiGetters = {}; const _get = (flavor) => (id) => { diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 4762646e..d4d7dd13 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/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'; @@ -604,7 +604,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 +620,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 +1175,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 +1499,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; diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 670a0907..2fc31490 100644 --- a/tests/assets/dashAgGridFunctions.js +++ b/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) { diff --git a/tests/test_custom_filter.py b/tests/test_custom_filter.py index 2afb68ea..b0e6c545 100644 --- a/tests/test_custom_filter.py +++ b/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()