adding support for filterModel

- info from the grid (read-only) (plotly#109)
- added output for `test_filter`
- added check for action props to delay until the grid is ready (plotly#99)
- set the default `dashGridOptions` to `{}` (plotly#97)

Author: BSd3v

src/lib/components/AgGrid.react.js

@@ -73,6 +73,7 @@ DashAgGrid.defaultProps = {
     suppressDragLeaveHidesColumns: true,
     dangerously_allow_code: false,
     rowModelType: 'clientSide',
+    dashGridOptions: {},
 };
 DashAgGrid.propTypes = {
     /********************************
@@ -346,6 +347,11 @@ DashAgGrid.propTypes = {
         failCallback: PropTypes.func,
     }),
 
+    /**
+     * If filtering client-side rowModel, what the filter model is (read-only)
+     */
+    filterModel: PropTypes.object,
+
     /**
      * Request from Dash AgGrid when suppressCallback is disabled and a user opens a row with a detail grid
      */

src/lib/fragments/AgGrid.react.js

@@ -337,7 +337,7 @@ export default class DashAgGrid extends Component {
 
             const filterModel = this.state.gridApi.getFilterModel();
             this.setState({filterModel});
-            setProps({virtualRowData});
+            setProps({virtualRowData, filterModel});
         }
     }
 
@@ -517,7 +517,17 @@ export default class DashAgGrid extends Component {
     onGridReady(params) {
         // Applying Infinite Row Model
         // see: https://www.ag-grid.com/javascript-grid/infinite-scrolling/
-        const {rowModelType, selectedRows} = this.props;
+        const {
+            rowModelType,
+            selectedRows,
+            resetColumnState,
+            csvExportParams,
+            exportDataAsCsv,
+            selectAll,
+            deselectAll,
+            autoSizeAllColumns,
+            deleteSelectedRows,
+        } = this.props;
         if (rowModelType === 'infinite') {
             params.api.setDatasource(this.getDatasource());
         }
@@ -528,6 +538,31 @@ export default class DashAgGrid extends Component {
         });
 
         this.updateColumnWidths();
+
+        if (resetColumnState) {
+            this.resetColumnState();
+        }
+
+        if (exportDataAsCsv) {
+            this.exportDataAsCsv(csvExportParams);
+        }
+
+        if (selectAll) {
+            this.selectAll(selectAll);
+        }
+
+        if (deselectAll) {
+            this.deselectAll();
+        }
+
+        if (autoSizeAllColumns) {
+            this.autoSizeAllColumns(autoSizeAllColumns);
+        }
+
+        if (deleteSelectedRows) {
+            this.deleteSelectedRows();
+        }
+
         this.updateColumnState();
 
         if (this.state.rowTransaction) {
@@ -666,21 +701,31 @@ export default class DashAgGrid extends Component {
         );
     }
 
-    resetColumnState() {
-        this.state.gridColumnApi.resetColumnState();
+    // Event actions that reset
+    exportDataAsCsv(csvExportParams) {
+        if (!this.state.gridApi) {
+            return;
+        }
+        this.state.gridApi.exportDataAsCsv(csvExportParams);
         this.props.setProps({
-            resetColumnState: false,
+            exportDataAsCsv: false,
         });
     }
 
-    exportDataAsCsv(csvExportParams) {
-        this.state.gridApi.exportDataAsCsv(csvExportParams);
+    resetColumnState() {
+        if (!this.state.gridApi) {
+            return;
+        }
+        this.state.gridColumnApi.resetColumnState();
         this.props.setProps({
-            exportDataAsCsv: false,
+            resetColumnState: false,
         });
     }
 
     selectAll(opts) {
+        if (!this.state.gridApi) {
+            return;
+        }
         if (opts?.filtered) {
             this.state.gridApi.selectAllFiltered();
         } else {
@@ -692,13 +737,19 @@ export default class DashAgGrid extends Component {
     }
 
     deselectAll() {
+        if (!this.state.gridApi) {
+            return;
+        }
         this.state.gridApi.deselectAll();
         this.props.setProps({
             deselectAll: false,
         });
     }
 
     deleteSelectedRows() {
+        if (!this.state.gridApi) {
+            return;
+        }
         const sel = this.state.gridApi.getSelectedRows();
         this.state.gridApi.applyTransaction({remove: sel});
         this.props.setProps({
@@ -707,6 +758,33 @@ export default class DashAgGrid extends Component {
         });
     }
 
+    autoSizeAllColumns(opts) {
+        if (!this.state.gridApi) {
+            return;
+        }
+        const allColumnIds = this.state.gridColumnApi
+            .getColumnState()
+            .map((column) => column.colId);
+        const skipHeaders = Boolean(opts?.skipHeaders);
+        this.state.gridColumnApi.autoSizeColumns(allColumnIds, skipHeaders);
+        this.props.setProps({
+            autoSizeAllColumns: false,
+        });
+    }
+    // end event actions
+
+    updateColumnState() {
+        if (!this.state.gridApi) {
+            return;
+        }
+        this.props.setProps({
+            columnState: JSON.parse(
+                JSON.stringify(this.state.gridColumnApi.getColumnState())
+            ),
+            updateColumnState: false,
+        });
+    }
+
     buildArray(arr1, arr2) {
         if (arr1) {
             if (!arr1.includes(arr2)) {
@@ -743,26 +821,6 @@ export default class DashAgGrid extends Component {
         this.syncRowData();
     }
 
-    autoSizeAllColumns(opts) {
-        const allColumnIds = this.state.gridColumnApi
-            .getColumnState()
-            .map((column) => column.colId);
-        const skipHeaders = Boolean(opts?.skipHeaders);
-        this.state.gridColumnApi.autoSizeColumns(allColumnIds, skipHeaders);
-        this.props.setProps({
-            autoSizeAllColumns: false,
-        });
-    }
-
-    updateColumnState() {
-        this.props.setProps({
-            columnState: JSON.parse(
-                JSON.stringify(this.state.gridColumnApi.getColumnState())
-            ),
-            updateColumnState: false,
-        });
-    }
-
     render() {
         const {
             id,

tests/test_filter.py

@@ -1,6 +1,7 @@
-from dash import Dash, html
+from dash import Dash, html, Input, Output
 from dash_ag_grid import AgGrid
 import plotly.express as px
+import json
 
 from . import utils
 
@@ -20,16 +21,30 @@ def test_fi001_floating_filter(dash_duo):
                 for col in default_display_cols
             ],
             defaultColDef={"filter": True, "floatingFilter": True}
-        )
+        ),
+        html.Div(id='filterModel')
     ])
 
+    @app.callback(
+        Output("filterModel", "children"),
+        Input("grid", "filterModel"),
+    )
+    def updateFilterModel(fM):
+        return json.dumps(fM)
+
     dash_duo.start_server(app)
 
     grid = utils.Grid(dash_duo, "grid")
 
     grid.wait_for_cell_text(0, 1, "101-Bois-de-Liesse")
+    dash_duo.wait_for_text_to_equal("#filterModel", "{}")
 
     grid.set_filter(0, "12")
+    dash_duo.wait_for_text_to_equal("#filterModel", '{"district_id": {"filterType": "text",'
+                                                    ' "type": "contains", "filter": "12"}}')
 
     grid.wait_for_cell_text(0, 1, "112-DeLorimier")
     grid.wait_for_rendered_rows(5)
+
+    grid.set_filter(0, "")
+    dash_duo.wait_for_text_to_equal("#filterModel", "{}")