diff --git a/package-lock.json b/package-lock.json index 72741ee..6890a36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,21 @@ { "name": "dash-ag-grid", - "version": "31.2.1", + "version": "32.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "dash-ag-grid", - "version": "31.2.1", + "version": "32.2.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.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", "d3-format": "^3.1.0", "d3-time": "^3.1.0", "d3-time-format": "^4.1.0", @@ -3414,30 +3414,47 @@ } }, "node_modules/ag-charts-community": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.2.0.tgz", - "integrity": "sha512-dS5nPExh81owIIdyHli0TvWvSyhmZy2RncM/s3/KXpjAf3eiVN2fxfT2z+QxqsLyoms+fernp5cAuSju0peYXw==" + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.2.0.tgz", + "integrity": "sha512-zRB5xvMj14Mli8kEmcy4wDBzJpdOF7+3yqCXrr8ug3sGjMlAJaf33Vu6qqxzlS/Vpip6TNvjPK9Q6RdtDHslRw==", + "dependencies": { + "ag-charts-locale": "10.2.0", + "ag-charts-types": "10.2.0" + } + }, + "node_modules/ag-charts-locale": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.2.0.tgz", + "integrity": "sha512-JAwuJFXwoVE94YFuwo1ZtnCJa4rFLQna+t2xT5qT2KUaohVPHB+Zd8ivP62lOv9j2ZgzSg4WANBo2UT1LCtl2Q==" + }, + "node_modules/ag-charts-types": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", + "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==" }, "node_modules/ag-grid-community": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.1.tgz", - "integrity": "sha512-D+gnUQ4dHZ/EQJmupQnDqcEKiCEeuK5ZxlsIpdPKgHg/23dmW+aEdivtB9nLpSc2IEK0RUpchcSxeUT37Boo5A==" + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.0.tgz", + "integrity": "sha512-zr29DGo6U4JR6pSOgZrZWuN1CTWdpUCfZWWpF47us6MzdFWGN5gcdiXGw40wg9XMGacShNX1aW8o33S4yVkzMw==", + "dependencies": { + "ag-charts-types": "10.2.0" + } }, "node_modules/ag-grid-enterprise": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.2.1.tgz", - "integrity": "sha512-gQLy+fHNwNC4AK0dF38TqCWdfQ2vaw4xoIpEMj1rEcp8xYpU3acX71np/DXNEIzM6gqB13qxT2L1p0zaah5pMw==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.2.0.tgz", + "integrity": "sha512-fv2Jb4Hdr/hSqJ9xR08/FaeakY1aymnZh/+7ToYQUF1x6vhDBlhiD7//aBO4ErXypmymoHLVRqFQDa/8UpS5Zw==", "dependencies": { - "ag-charts-community": "9.2.0", - "ag-grid-community": "31.2.1" + "ag-charts-community": "10.2.0", + "ag-grid-community": "32.2.0" } }, "node_modules/ag-grid-react": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.1.tgz", - "integrity": "sha512-9UH3xxXRwZfW97oz58KboyCJl4t+zdetopieeHVcttsXX1DvGFDUIEz7A1sQaG8e1DAXLMf3IxoIPrfWheH4XA==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.0.tgz", + "integrity": "sha512-9jPyvcY0+7fP/XzL/oMLBve/ox1gFWtl/aQ/+fvQ5AEnDJxN8P84Kp5JapMsPLkSf9WI/5fOCoIKHSaXcU7mNQ==", "dependencies": { - "ag-grid-community": "31.2.1", + "ag-grid-community": "32.2.0", "prop-types": "^15.8.1" }, "peerDependencies": { @@ -14698,30 +14715,47 @@ "requires": {} }, "ag-charts-community": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.2.0.tgz", - "integrity": "sha512-dS5nPExh81owIIdyHli0TvWvSyhmZy2RncM/s3/KXpjAf3eiVN2fxfT2z+QxqsLyoms+fernp5cAuSju0peYXw==" + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.2.0.tgz", + "integrity": "sha512-zRB5xvMj14Mli8kEmcy4wDBzJpdOF7+3yqCXrr8ug3sGjMlAJaf33Vu6qqxzlS/Vpip6TNvjPK9Q6RdtDHslRw==", + "requires": { + "ag-charts-locale": "10.2.0", + "ag-charts-types": "10.2.0" + } + }, + "ag-charts-locale": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.2.0.tgz", + "integrity": "sha512-JAwuJFXwoVE94YFuwo1ZtnCJa4rFLQna+t2xT5qT2KUaohVPHB+Zd8ivP62lOv9j2ZgzSg4WANBo2UT1LCtl2Q==" + }, + "ag-charts-types": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", + "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==" }, "ag-grid-community": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.1.tgz", - "integrity": "sha512-D+gnUQ4dHZ/EQJmupQnDqcEKiCEeuK5ZxlsIpdPKgHg/23dmW+aEdivtB9nLpSc2IEK0RUpchcSxeUT37Boo5A==" + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.0.tgz", + "integrity": "sha512-zr29DGo6U4JR6pSOgZrZWuN1CTWdpUCfZWWpF47us6MzdFWGN5gcdiXGw40wg9XMGacShNX1aW8o33S4yVkzMw==", + "requires": { + "ag-charts-types": "10.2.0" + } }, "ag-grid-enterprise": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.2.1.tgz", - "integrity": "sha512-gQLy+fHNwNC4AK0dF38TqCWdfQ2vaw4xoIpEMj1rEcp8xYpU3acX71np/DXNEIzM6gqB13qxT2L1p0zaah5pMw==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.2.0.tgz", + "integrity": "sha512-fv2Jb4Hdr/hSqJ9xR08/FaeakY1aymnZh/+7ToYQUF1x6vhDBlhiD7//aBO4ErXypmymoHLVRqFQDa/8UpS5Zw==", "requires": { - "ag-charts-community": "9.2.0", - "ag-grid-community": "31.2.1" + "ag-charts-community": "10.2.0", + "ag-grid-community": "32.2.0" } }, "ag-grid-react": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.1.tgz", - "integrity": "sha512-9UH3xxXRwZfW97oz58KboyCJl4t+zdetopieeHVcttsXX1DvGFDUIEz7A1sQaG8e1DAXLMf3IxoIPrfWheH4XA==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.0.tgz", + "integrity": "sha512-9jPyvcY0+7fP/XzL/oMLBve/ox1gFWtl/aQ/+fvQ5AEnDJxN8P84Kp5JapMsPLkSf9WI/5fOCoIKHSaXcU7mNQ==", "requires": { - "ag-grid-community": "31.2.1", + "ag-grid-community": "32.2.0", "prop-types": "^15.8.1" } }, diff --git a/package.json b/package.json index c999c52..30091d0 100644 --- a/package.json +++ b/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", diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 0682fb9..d41e3f3 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'; @@ -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; diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 2128fa6..47be504 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 2afb68e..b0e6c54 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()