diff --git a/src/js/core/column/Column.js b/src/js/core/column/Column.js index 89f6caad9..9bf9bec94 100644 --- a/src/js/core/column/Column.js +++ b/src/js/core/column/Column.js @@ -69,6 +69,10 @@ class Column extends CoreFeature{ this._initialize(); } + get widthInitiallyFixed() { + return !!this.definition.width; + } + createElement (){ var el = document.createElement("div"); @@ -836,6 +840,7 @@ class Column extends CoreFeature{ //set width if present if(typeof this.definition.width !== "undefined" && !force){ // maxInitialWidth ignored here as width specified + console.log("reinitializeWidth", "setWidth"); this.setWidth(this.definition.width); } @@ -852,7 +857,7 @@ class Column extends CoreFeature{ return; } - if(!this.widthFixed){ + if(!this.widthInitiallyFixed){ this.element.style.width = ""; this.cells.forEach((cell) => { @@ -861,8 +866,12 @@ class Column extends CoreFeature{ } var maxWidth = this.element.offsetWidth; + console.log("fitToData[mid]", this.getField(), { maxWidth, width: this.width, fixed: this.widthInitiallyFixed }); + if (this.getField() === 'description') { + window.col = this; + } - if(!this.width || !this.widthFixed){ + if(!this.width || !this.widthInitiallyFixed){ this.cells.forEach((cell) => { var width = cell.getWidth(); @@ -871,11 +880,13 @@ class Column extends CoreFeature{ } }); + if(maxWidth){ var setTo = maxWidth + 1; if (this.maxInitialWidth && !force) { setTo = Math.min(setTo, this.maxInitialWidth); } + console.log("fitToData", this.getField(), "setting", { setTo, force, mI: this.maxInitialWidth }); this.setWidthActual(setTo); } } diff --git a/src/js/core/column/ColumnComponent.js b/src/js/core/column/ColumnComponent.js index 1678aa02e..e29d917b3 100644 --- a/src/js/core/column/ColumnComponent.js +++ b/src/js/core/column/ColumnComponent.js @@ -139,9 +139,11 @@ export default class ColumnComponent { setWidth(width){ var result; - + if(width === true){ result = this._column.reinitializeWidth(true); + } else if(width === 'initial') { + result = this._column.reinitializeWidth(false); }else{ result = this._column.setWidth(width); } @@ -150,4 +152,4 @@ export default class ColumnComponent { return result; } -} \ No newline at end of file +} diff --git a/src/js/modules/Persistence/Persistence.js b/src/js/modules/Persistence/Persistence.js index 3fa71c46e..61ff9a69c 100644 --- a/src/js/modules/Persistence/Persistence.js +++ b/src/js/modules/Persistence/Persistence.js @@ -190,6 +190,23 @@ class Persistence extends Module{ } setColumnLayout(layout){ + const autoSize = []; + layout.forEach((layoutItem) => { + if ([true, 'initial'].includes(layoutItem.width)) { + autoSize.push({...layoutItem}); + delete layoutItem.width; + } + }); + + autoSize.forEach((c) => { + const candidate = this.table.columnManager.getColumnByField(c.field); + console.log('candidate', candidate); + if (candidate) { + candidate.getComponent().setWidth(c.width); + const update = layout.find((l) => l.field === c.field); + if (update) update.width = candidate.getComponent().getWidth(); + } + }); this.table.columnManager.setColumns(this.mergeDefinition(this.table.options.columns, layout)); return true; } @@ -455,4 +472,4 @@ Persistence.moduleInitOrder = -10; Persistence.readers = defaultReaders; Persistence.writers = defaultWriters; -export default Persistence; \ No newline at end of file +export default Persistence;