Column size updates

CHANGELOG.md

@@ -12,6 +12,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
   - Remove `agGridColumns` component due to deprecation in AG Grid v29
   - Remove some hardcoded CSS
 
+- [#132](https://github.com/plotly/dash-ag-grid/pull/132)
+  - removed prop `autoSizeAllColumns`
+
 ### Added
 
 - [Overhaul commit](https://github.com/plotly/dash-ag-grid/commit/b888d6ab4fcb4afac187492e8b6c9cf0d0f8842b)
@@ -58,7 +61,11 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
 - [#111](https://github.com/plotly/dash-ag-grid/pull/111)
   - added `filterModel` prop in order to capture the grid's active filters
 
-
+- [#132](https://github.com/plotly/dash-ag-grid/pull/132)
+  - added new `columnSize` available, `responsiveSizeToFit` which will adjust column sizes based upon grid size and columns added or removed
+  - added `columnSizeOptions` to take an object that is compatible with AG Grid to perform sizing options as needed
+  - added ability to push `columnState` back to grid and replay the settings
+
 ### Updated
 - [Overhaul commit](https://github.com/plotly/dash-ag-grid/commit/b888d6ab4fcb4afac187492e8b6c9cf0d0f8842b)
   - Update AG Grid from v27.x to v29.x - see [AG Grid Changelog](https://www.ag-grid.com/changelog/) for details.
@@ -96,6 +103,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
 - [#111](https://github.com/plotly/dash-ag-grid/pull/111)
   - fixing templates to only populate when `dangerously_allow_code=True`
 
+- [#132](https://github.com/plotly/dash-ag-grid/pull/132)
+  - fixed `columnSize` to update upon interaction
+
 ## [1.3.2] - 2023-01-13
 
 ### Updated

src/lib/components/AgGrid.react.js

@@ -65,7 +65,6 @@ DashAgGrid.defaultProps = {
     exportDataAsCsv: false,
     selectAll: false,
     deselectAll: false,
-    autoSizeAllColumns: false,
     enableEnterpriseModules: false,
     updateColumnState: false,
     persisted_props: ['selectedRows'],
@@ -168,18 +167,6 @@ DashAgGrid.propTypes = {
      */
     deselectAll: PropTypes.bool,
 
-    /**
-     * Set to true to autosize all columns, considering both headers and data
-     * Or pass an object of options for how to autosize.
-     * Currently supports `skipHeaders`, set this true to only consider data when autosizing.
-     */
-    autoSizeAllColumns: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.exact({
-            skipHeaders: PropTypes.bool,
-        }),
-    ]),
-
     /**
      * If true, the internal method updateColumnState() will be called
      */
@@ -288,11 +275,53 @@ DashAgGrid.propTypes = {
     }),
 
     /**
-     * Size the columns autoSizeAll changes the column sizes to fit the column's content,
+     * Size the columns autoSize changes the column sizes to fit the column's content,
      * sizeToFit changes the column sizes to fit the width of the table
+     * responsiveSizeToFit changes the column sizes to fit the width of the table and also resizing upon grid or column changes
      * and null bypasses the altering of the column widths
      */
-    columnSize: PropTypes.oneOf(['sizeToFit', 'autoSizeAll', null]),
+    columnSize: PropTypes.oneOf([
+        'sizeToFit',
+        'autoSize',
+        'responsiveSizeToFit',
+        null,
+    ]),
+
+    /**
+     * Options to customize the columnSize operation.
+     * autoSize calls either autoSizeColumns or autoSizeAllColumns, see:
+     * https://www.ag-grid.com/react-data-grid/column-sizing/#autosize-column-api,
+     * and sizeToFit and responsiveSizeToFit call sizeColumnsToFit, see:
+     * https://www.ag-grid.com/react-data-grid/column-sizing/#size-columns-to-fit
+     */
+    columnSizeOptions: PropTypes.exact({
+        /**
+         * for (responsive)sizeToFit: per-column minimum and maximum width, in pixels.
+         */
+        columnLimits: PropTypes.arrayOf(
+            PropTypes.exact({
+                key: PropTypes.string,
+                minWidth: PropTypes.number,
+                maxWidth: PropTypes.number,
+            })
+        ),
+        /**
+         * for (responsive)sizeToFit: default minimum width, in pixels, if not overridden by columnLimits
+         */
+        defaultMinWidth: PropTypes.number,
+        /**
+         * for (responsive)sizeToFit: default maximum width, in pixels, if not overridden by columnLimits
+         */
+        defaultMaxWidth: PropTypes.number,
+        /**
+         * for autoSize: list of column keys to autosize. If omitted, all columns will be autosized.
+         */
+        keys: PropTypes.arrayOf(PropTypes.string),
+        /**
+         * for autoSize: should we skip header contents and only consider cell contents?
+         */
+        skipHeader: PropTypes.bool,
+    }),
 
     /**
      * Object used to perform the row styling. See AG-Grid Row Style.

src/lib/fragments/AgGrid.react.js

@@ -100,7 +100,6 @@ export default class DashAgGrid extends Component {
         // Additional Exposure
         this.selectAll = this.selectAll.bind(this);
         this.deselectAll = this.deselectAll.bind(this);
-        this.autoSizeAllColumns = this.autoSizeAllColumns.bind(this);
         this.updateColumnState = this.updateColumnState.bind(this);
         this.deleteSelectedRows = this.deleteSelectedRows.bind(this);
         this.rowTransaction = this.rowTransaction.bind(this);
@@ -373,17 +372,17 @@ export default class DashAgGrid extends Component {
 
     onSortChanged() {
         const {setProps, rowModelType} = this.props;
+        const propsToSet = {};
         if (rowModelType === 'clientSide') {
             const virtualRowData = [];
             this.state.gridApi.forEachNodeAfterFilterAndSort((node) => {
                 virtualRowData.push(node.data);
             });
 
-            setProps({
-                virtualRowData: virtualRowData,
-                columnState: this.state.gridColumnApi.getColumnState(),
-            });
+            propsToSet.virtualRowData = virtualRowData;
         }
+        propsToSet.columnState = this.state.gridColumnApi.getColumnState();
+        setProps(propsToSet);
     }
 
     componentDidMount() {
@@ -534,10 +533,10 @@ export default class DashAgGrid extends Component {
             exportDataAsCsv,
             selectAll,
             deselectAll,
-            autoSizeAllColumns,
             deleteSelectedRows,
             filterModel,
             setProps,
+            columnState,
         } = this.props;
 
         const propsToSet = {};
@@ -550,12 +549,14 @@ export default class DashAgGrid extends Component {
             gridColumnApi: params.columnApi,
         });
 
-        this.updateColumnWidths();
-
         if (!isEmpty(filterModel)) {
             this.state.gridApi.setFilterModel(filterModel);
         }
 
+        if (columnState) {
+            this.setColumnState();
+        }
+
         if (resetColumnState) {
             this.resetColumnState(false);
             propsToSet.resetColumnState = false;
@@ -576,11 +577,6 @@ export default class DashAgGrid extends Component {
             propsToSet.deselectAll = false;
         }
 
-        if (autoSizeAllColumns) {
-            this.autoSizeAllColumns(autoSizeAllColumns, false);
-            propsToSet.autoSizeAllColumns = false;
-        }
-
         if (deleteSelectedRows) {
             this.deleteSelectedRows(false);
             propsToSet.deleteSelectedRows = false;
@@ -590,8 +586,6 @@ export default class DashAgGrid extends Component {
             setProps(propsToSet);
         }
 
-        this.updateColumnState();
-
         if (this.state.rowTransaction) {
             this.state.rowTransaction.map((data) =>
                 this.applyRowTransaction(data, params.api)
@@ -604,6 +598,8 @@ export default class DashAgGrid extends Component {
         this.setSelection(selectedRows);
         // Hydrate virtualRowData
         this.onFilterChanged(true);
+
+        this.updateColumnWidths();
     }
 
     onCellClicked({value, column: {colId}, rowIndex, node}) {
@@ -642,20 +638,48 @@ export default class DashAgGrid extends Component {
     }
 
     onDisplayedColumnsChanged() {
-        // this.updateColumnWidths();
+        if (this.props.columnSize === 'responsiveSizeToFit') {
+            this.updateColumnWidths();
+        }
     }
 
     onGridSizeChanged() {
-        // this.updateColumnWidths();
+        if (this.props.columnSize === 'responsiveSizeToFit') {
+            this.updateColumnWidths();
+        }
     }
 
     updateColumnWidths() {
-        if (this.state.gridApi || this.state.gridColumnApi) {
-            if (this.props.columnSize === 'autoSizeAll') {
-                this.state.gridColumnApi.autoSizeAllColumns(false);
-            } else if (this.props.columnSize === 'sizeToFit') {
-                this.state.gridApi.sizeColumnsToFit();
+        const {columnSize, columnSizeOptions, setProps} = this.props;
+        const {gridApi, gridColumnApi} = this.state;
+        if (gridApi || gridColumnApi) {
+            const {
+                keys,
+                skipHeader,
+                defaultMinWidth,
+                defaultMaxWidth,
+                columnLimits,
+            } = columnSizeOptions || {};
+            if (columnSize === 'autoSize') {
+                if (keys) {
+                    gridColumnApi.autoSizeColumns(keys, skipHeader);
+                } else {
+                    gridColumnApi.autoSizeAllColumns(skipHeader);
+                }
+            } else if (
+                columnSize === 'sizeToFit' ||
+                columnSize === 'responsiveSizeToFit'
+            ) {
+                gridApi.sizeColumnsToFit({
+                    defaultMinWidth,
+                    defaultMaxWidth,
+                    columnLimits,
+                });
+            }
+            if (columnSize !== 'responsiveSizeToFit') {
+                setProps({columnSize: null});
             }
+            this.updateColumnState();
         }
     }
 
@@ -741,6 +765,15 @@ export default class DashAgGrid extends Component {
         }
     }
 
+    setColumnState() {
+        if (!this.state.gridApi) {
+            return;
+        }
+        this.state.gridColumnApi.applyColumnState({
+            state: this.props.columnState,
+        });
+    }
+
     resetColumnState(reset = true) {
         if (!this.state.gridApi) {
             return;
@@ -750,6 +783,7 @@ export default class DashAgGrid extends Component {
             this.props.setProps({
                 resetColumnState: false,
             });
+            this.updateColumnState();
         }
     }
 
@@ -795,21 +829,6 @@ export default class DashAgGrid extends Component {
         }
     }
 
-    autoSizeAllColumns(opts, reset = true) {
-        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);
-        if (reset) {
-            this.props.setProps({
-                autoSizeAllColumns: false,
-            });
-        }
-    }
     // end event actions
 
     updateColumnState() {
@@ -869,13 +888,14 @@ export default class DashAgGrid extends Component {
             exportDataAsCsv,
             selectAll,
             deselectAll,
-            autoSizeAllColumns,
             deleteSelectedRows,
             rowTransaction,
             updateColumnState,
             csvExportParams,
             dashGridOptions,
             filterModel,
+            columnSize,
+            columnState,
             ...restProps
         } = this.props;
 
@@ -893,6 +913,14 @@ export default class DashAgGrid extends Component {
             }
         }
 
+        if (columnSize) {
+            this.updateColumnWidths();
+        }
+
+        if (columnState) {
+            this.setColumnState();
+        }
+
         if (resetColumnState) {
             this.resetColumnState();
         }
@@ -909,10 +937,6 @@ export default class DashAgGrid extends Component {
             this.deselectAll();
         }
 
-        if (autoSizeAllColumns) {
-            this.autoSizeAllColumns(autoSizeAllColumns);
-        }
-
         if (updateColumnState) {
             this.updateColumnState();
         }

tests/examples/custom_components.py

@@ -129,7 +129,7 @@ def last_volume(ticker):
     className="ag-theme-alpine-dark",
     columnDefs=columnDefs,
     rowData=df.to_dict("records"),
-    columnSize="autoSizeAll",
+    columnSize="autoSize",
     defaultColDef=defaultColDef,
 )