@adaptabletools/adaptable 20.3.0-canary.2 → 21.0.0-canary.0

package/src/layout-manager/src/index.d.ts

@@ -42,11 +42,16 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     getTableLayoutModelFromGrid(): TableLayoutModel;
     private isTreeMode;
     getUndecidedLayoutModelFromGrid(columnState: ColumnState[]): TableLayoutModel | PivotLayoutModel;
-    static getAGGridInitialStateForLayout(layout: TableLayoutModel | PivotLayoutModel, colDefs: GridOptions['columnDefs'], options?: {
+    static getColumnDefsChangesForLayout(layout: TableLayoutModel | PivotLayoutModel, colDefs: GridOptions['columnDefs']): GridOptions['columnDefs'] | null;
+    static getAGGridInitialStateForLayout(layout: TableLayoutModel | PivotLayoutModel, colDefs: GridOptions['columnDefs'], options: {
         isTree: boolean;
+        colTypes: GridOptions['columnTypes'];
+        defaultColDef: GridOptions['defaultColDef'];
     }): GridState;
     static getAGGridInitialStateForTableLayout(layout: TableLayoutModel, colDefs: GridOptions['columnDefs'], _options?: {
-        isTree: boolean;
+        isTree?: boolean;
+        colTypes?: GridOptions['columnTypes'];
+        defaultColDef?: GridOptions['defaultColDef'];
     }): GridState;
     static getAGGridInitialStateForPivotLayout(layout: PivotLayoutModel, colDefs: GridOptions['columnDefs']): GridState;
     silentSetCurrentLayout(layout: TableLayoutModel | PivotLayoutModel, options?: {
@@ -60,6 +65,8 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private suspendAgGridListener;
     private resumeAgGridListener;
     private applyLayout;
+    applyColumnDefsChanges(layout: TableLayoutModel | PivotLayoutModel): boolean;
+    private applyColumnSizingColumnDefsChanges;
     private applyTableLayout;
     private getRowGroupNodePathsAs;
     applyRowGroupValues(RowGroupValues: TableLayoutModel['RowGroupValues'], rowGroupedColumns: string[]): void;
@@ -71,7 +78,7 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private computeRowGrouping;
     private computeColumnSorts;
     private getDefaultColumnWidthForCol;
-    private computeColumnWidths;
+    private computeColumnSizing;
     private computeColumnOrderAndVisibility;
     autoSizeColumns(columnIds?: string[]): false | string[];
     private applyPivotLayout;
@@ -82,5 +89,6 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private setupPivotTotals;
     private patchPivotAggregationTotal;
     private getPivotTotalColumnConfig;
+    private isInPivotMode;
 }
 export {};

package/src/layout-manager/src/index.js

@@ -13,6 +13,16 @@ export const PIVOT_ANY_TOTAL_COL_TYPE = 'pivotAnyTotal';
 export const PIVOT_GRAND_TOTAL_COL_TYPE = 'pivotGrandTotal';
 export const PIVOT_COLUMN_TOTAL_COL_TYPE = 'pivotColumnTotal';
 export const PIVOT_AGGREGATION_TOTAL_COL_TYPE = 'pivotAggregationTotal';
+function mapColDefs(colDefs, mapFn) {
+    const iteration = (c) => {
+        if (c.children) {
+            return { ...c, children: mapColDefs(c.children, mapFn) };
+        }
+        const colDef = c;
+        return mapFn(colDef);
+    };
+    return colDefs.map(iteration);
+}
 function flattenColDefs(colDefs) {
     const res = [];
     const iteration = (c) => {
@@ -26,6 +36,25 @@ function flattenColDefs(colDefs) {
     colDefs.forEach(iteration);
     return res;
 }
+function findInColDefs(colDefs, callback) {
+    function iteration(colDefs) {
+        for (const c of colDefs) {
+            if (c.children) {
+                const res = iteration(c.children);
+                if (res) {
+                    return res;
+                }
+            }
+            else {
+                const colDef = c;
+                if (callback(colDef)) {
+                    return colDef;
+                }
+            }
+        }
+    }
+    return iteration(colDefs);
+}
 const DEFAULT_COLUMN_WIDTH = 200;
 const DEFAULT_AGG_FUNC = 'sum';
 /**
@@ -67,6 +96,47 @@ function isGridLayoutSame(options) {
     }
     return isLayoutEqual(gridLayout, layout);
 }
+function getDefaultColumnSizeStateForColDef(colId, colDef, options) {
+    if (!colDef) {
+        colDef = findInColDefs(options?.columnDefs || [], (colDef) => colDef.colId ? colDef.colId === colId : colDef.field === colId);
+        if (!colDef) {
+            return undefined;
+        }
+    }
+    let propsFromColType = {
+        ...options?.defaultColDef,
+    };
+    if (options?.colTypes) {
+        // for col sizing, we want the columns sized as flex via col.type and defaultColDef
+        // to be sized as flex, even if they are not in the layout.ColumnSizing object
+        let colType = colDef?.type;
+        if (colType && !Array.isArray(colType)) {
+            colType = colType.split(',');
+        }
+        if (Array.isArray(colType) && colType.length) {
+            propsFromColType = colType.reduce((acc, type) => {
+                const props = options.colTypes[type];
+                if (props) {
+                    return { ...acc, ...props };
+                }
+                return acc;
+            }, {});
+        }
+    }
+    if (propsFromColType.flex) {
+        return {
+            colId,
+            flex: propsFromColType.flex,
+        };
+    }
+    if (propsFromColType.width) {
+        return {
+            colId,
+            width: propsFromColType.width,
+        };
+    }
+    return undefined;
+}
 export class LayoutManager extends LMEmitter {
     constructor(options) {
         super({ debugId: options.debugId });
@@ -111,6 +181,9 @@ export class LayoutManager extends LMEmitter {
             }
         };
         this.columnDefsChanged = (colDefs) => {
+            if (this.suppressGlobalAgGridEventListener) {
+                return;
+            }
             this.warn('onColumnDefsChanged');
             this.indexColumns();
             if (this.currentLayout) {
@@ -194,7 +267,7 @@ export class LayoutManager extends LMEmitter {
             // this.initialColumnWidths[colId] = colDef.width ?? colDef.initialWidth ?? DEFAULT_COLUMN_WIDTH; // this.gridApi.getColumn(colId).getActualWidth();
             // this.initialColumnWidths[colId] = col.getActualWidth();
             this.initialColumnWidths[colId] = this.getDefaultColumnWidthForCol(colId, colDef);
-            const rowGroupColumns = this.gridApi.getRowGroupColumns();
+            const rowGroupColumns = this.gridApi.getRowGroupColumns() ?? [];
             rowGroupColumns.forEach((column) => {
                 const colId = column.getColId();
                 // const col = this.gridApi.getColumn(colId);
@@ -253,7 +326,7 @@ export class LayoutManager extends LMEmitter {
         this.gridApi = options.gridApi;
     }
     getLayoutModelFromGrid() {
-        return this.gridApi.isPivotMode()
+        return this.isInPivotMode()
             ? this.getPivotLayoutModelFromGrid()
             : this.getTableLayoutModelFromGrid();
     }
@@ -266,13 +339,15 @@ export class LayoutManager extends LMEmitter {
             .filter((col) => !pivotResultColumnsSet.has(col.colId));
         let PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
         const layout = this.getUndecidedLayoutModelFromGrid(columnState);
-        let ColumnWidths = layout.ColumnWidths || {};
+        let ColumnSizing = layout.ColumnSizing || {};
         //let's also include the column widths of the pivotResult columns
         pivotResultColumns.forEach((col) => {
-            ColumnWidths[col.getColId()] = col.getActualWidth();
+            ColumnSizing[col.getColId()] = {
+                Width: col.getActualWidth(),
+            };
         });
-        if (!Object.keys(ColumnWidths).length) {
-            ColumnWidths = undefined;
+        if (!Object.keys(ColumnSizing).length) {
+            ColumnSizing = undefined;
         }
         delete layout.TableColumns;
         const pivotLayout = {
@@ -290,7 +365,7 @@ export class LayoutManager extends LMEmitter {
             PivotColumns,
             ColumnPinning: layout.ColumnPinning,
             ColumnSorts: layout.ColumnSorts,
-            ColumnWidths,
+            ColumnSizing,
             ColumnVisibility: layout.ColumnVisibility,
             RowGroupValues: layout.RowGroupValues,
             ColumnGroupValues: layout.ColumnGroupValues,
@@ -321,7 +396,6 @@ export class LayoutManager extends LMEmitter {
     getUndecidedLayoutModelFromGrid(columnState) {
         let TableColumns = columnState.map((c) => c.colId);
         // .filter((colId) => colId !== 'ag-Grid-SelectionColumn');
-        let ColumnWidths = {};
         let ColumnSorts = [];
         let RowGroupedColumns = [];
         let RowGroupValues = undefined;
@@ -331,6 +405,7 @@ export class LayoutManager extends LMEmitter {
         const gridState = this.gridApi.getState();
         const prevLayout = this.currentLayout;
         const prevAggColumns = prevLayout?.TableAggregationColumns ?? prevLayout?.PivotAggregationColumns;
+        let ColumnSizing = { ...prevLayout?.ColumnSizing };
         const prevAggColumnsMap = prevAggColumns?.reduce((acc, agg) => {
             acc[agg.ColumnId] = agg;
             return acc;
@@ -353,10 +428,19 @@ export class LayoutManager extends LMEmitter {
                         this.initialColumnWidths[colId.replace(AUTO_GROUP_COLUMN_ID__MULTI_PREFIX, '')];
                 }
             }
-            // and only add the col width to the layout ColumnWidths
+            if (colState.flex != undefined) {
+                const colSizing = { ...ColumnSizing[colId] };
+                delete colSizing.Width;
+                colSizing.Flex = colState.flex;
+                ColumnSizing[colId] = colSizing;
+            }
+            // and only add the col width to the layout ColumnSizing
             // if it's different from the initial default column width
-            if (colState.width && initialWidth != colState.width) {
-                ColumnWidths[colId] = colState.width;
+            else if (colState.width && initialWidth != colState.width) {
+                const colSizing = { ...ColumnSizing[colId] };
+                delete colSizing.Flex;
+                colSizing.Width = colState.width;
+                ColumnSizing[colId] = colSizing;
             }
             if (colState.hide) {
                 acc[colId] = false;
@@ -438,9 +522,9 @@ export class LayoutManager extends LMEmitter {
                 return col.isVisible();
             });
             const columnOrderSet = new Set(TableColumns);
-            Object.keys(ColumnWidths).forEach((colId) => {
+            Object.keys(ColumnSizing).forEach((colId) => {
                 if (!columnOrderSet.has(colId)) {
-                    delete ColumnWidths[colId];
+                    delete ColumnSizing[colId];
                 }
             });
             Object.keys(ColumnVisibility).forEach((colId) => {
@@ -608,7 +692,7 @@ export class LayoutManager extends LMEmitter {
             Ignore_Uuid: this.currentLayout?.Ignore_Uuid,
             TableColumns: TableColumns,
             ColumnVisibility,
-            ColumnWidths: ColumnWidths,
+            ColumnSizing,
             ColumnSorts,
             RowGroupedColumns,
             TableAggregationColumns,
@@ -620,6 +704,54 @@ export class LayoutManager extends LMEmitter {
         });
         return layout;
     }
+    static getColumnDefsChangesForLayout(layout, colDefs) {
+        const columnSizing = layout.ColumnSizing || {};
+        const flatColDefs = flattenColDefs(colDefs);
+        const changedColDefs = new Map();
+        flatColDefs.forEach((colDef) => {
+            const colId = colDef.colId ?? colDef.field;
+            const colSizing = columnSizing[colId] || {};
+            if (colDef) {
+                let changed = false;
+                if (colSizing.MinWidth != undefined && colSizing.MinWidth != colDef.minWidth) {
+                    colDef = { ...colDef, minWidth: colSizing.MinWidth };
+                    changed = true;
+                }
+                if (colSizing.MaxWidth != undefined && colSizing.MaxWidth != colDef.maxWidth) {
+                    colDef = { ...colDef, maxWidth: colSizing.MaxWidth };
+                    changed = true;
+                }
+                // this (width and flex) shouldn't be needed theoretically, as applyColumnState will apply sizing
+                // using the newly computed column state
+                // but for whatever reason, this is needed here, for some edge cases
+                // eg: when a layout has a column width a width and minWidth
+                // and then we create a new layout with a different width and different min width
+                // then if we don't have this code, the new layout might wrongly apply the previous
+                // minWidth as the current column width
+                // see #edge-case-min-width-width-mismatch
+                if (colSizing.Width !== undefined && colSizing.Width !== colDef.width) {
+                    colDef = { ...colDef, width: colSizing.Width };
+                }
+                if (colSizing.Flex !== undefined && colSizing.Flex !== colDef.flex) {
+                    colDef = { ...colDef, flex: colSizing.Flex };
+                    changed = true;
+                }
+                if (changed) {
+                    changedColDefs.set(colId, colDef);
+                }
+            }
+        });
+        if (changedColDefs.size) {
+            return mapColDefs(colDefs, (colDef) => {
+                const changedColDef = changedColDefs.get(colDef.colId);
+                if (changedColDef) {
+                    return changedColDef;
+                }
+                return colDef;
+            });
+        }
+        return null;
+    }
     static getAGGridInitialStateForLayout(layout, colDefs, options) {
         if (isPivotLayoutModel(layout)) {
             return LayoutManager.getAGGridInitialStateForPivotLayout(layout, colDefs);
@@ -634,14 +766,15 @@ export class LayoutManager extends LMEmitter {
         }
         // just in case the enduser provided falsy colIds, it will crash AG Grid internals
         layout.TableColumns = layout.TableColumns.filter((colId) => colId != undefined);
-        layout = normalizeTableLayoutModel(layout, _options);
+        layout = normalizeTableLayoutModel(layout, { isTree: _options?.isTree ?? false });
         const agGridState = {};
         const columnIds = getColumnOrderIdsForAllColDefs(layout.TableColumns, colDefs);
         agGridState.columnOrder = {
             orderedColIds: columnIds,
         };
         const flatColDefs = flattenColDefs(colDefs);
-        const getColDef = (colId) => flatColDefs.find((colDef) => colDef.colId === colId);
+        const colDefsById = new Map(flatColDefs.map((colDef) => [colDef.colId ?? colDef.field, colDef]));
+        const getColDef = (colId) => colDefsById.get(colId);
         agGridState.columnVisibility = {
             hiddenColIds: flatColDefs
                 .filter((colDef) => {
@@ -653,15 +786,42 @@ export class LayoutManager extends LMEmitter {
             })
                 .map((colDef) => colDef.colId ?? colDef.field),
         };
-        if (layout.ColumnWidths) {
-            agGridState.columnSizing = {
-                columnSizingModel: Object.keys(layout.ColumnWidths).map((colId) => {
-                    const width = layout.ColumnWidths[colId];
+        if (layout.ColumnSizing) {
+            const colsInColumnSizingModel = new Set();
+            const columnSizingModel = Object.keys(layout.ColumnSizing)
+                .map((colId) => {
+                const colSizing = layout.ColumnSizing[colId];
+                if (colSizing.Flex != undefined) {
+                    colsInColumnSizingModel.add(colId);
                     return {
                         colId,
-                        width,
+                        flex: colSizing.Flex,
                     };
-                }),
+                }
+                if (colSizing.Width != undefined) {
+                    colsInColumnSizingModel.add(colId);
+                    return {
+                        colId,
+                        width: colSizing.Width ?? DEFAULT_COLUMN_WIDTH,
+                    };
+                }
+            })
+                .filter(Boolean);
+            const options = {
+                ..._options,
+                columnDefs: colDefs,
+            };
+            columnIds.forEach((colId) => {
+                if (!colsInColumnSizingModel.has(colId)) {
+                    const colDef = getColDef(colId);
+                    const colSizeState = getDefaultColumnSizeStateForColDef(colId, colDef, options);
+                    if (colSizeState) {
+                        columnSizingModel.push(colSizeState);
+                    }
+                }
+            });
+            agGridState.columnSizing = {
+                columnSizingModel,
             };
         }
         if (layout.ColumnSorts) {
@@ -724,7 +884,8 @@ export class LayoutManager extends LMEmitter {
         //   orderedColIds: columnIds,
         // };
         const flatColDefs = flattenColDefs(colDefs);
-        const getColDef = (colId) => flatColDefs.find((colDef) => colDef.colId === colId);
+        const colDefsById = new Map(flatColDefs.map((colDef) => [colDef.colId ?? colDef.field, colDef]));
+        const getColDef = (colId) => colDefsById.get(colId);
         // agGridState.columnVisibility = {
         //   hiddenColIds: flatColDefs
         //     .filter((colDef) => {
@@ -742,15 +903,24 @@ export class LayoutManager extends LMEmitter {
             pivotMode: true,
             pivotColIds: layout.PivotColumns,
         };
-        if (layout.ColumnWidths) {
-            agGridState.columnSizing = {
-                columnSizingModel: Object.keys(layout.ColumnWidths).map((colId) => {
-                    const width = layout.ColumnWidths[colId];
+        if (layout.ColumnSizing) {
+            const columnSizingModel = Object.keys(layout.ColumnSizing)
+                .map((colId) => {
+                const colSizing = layout.ColumnSizing[colId];
+                if (colSizing.Flex != undefined) {
                     return {
                         colId,
-                        width,
+                        flex: colSizing.Flex,
                     };
-                }),
+                }
+                return {
+                    colId,
+                    width: colSizing.Width ?? DEFAULT_COLUMN_WIDTH,
+                };
+            })
+                .filter(Boolean);
+            agGridState.columnSizing = {
+                columnSizingModel,
             };
         }
         if (layout.ColumnSorts) {
@@ -861,7 +1031,7 @@ export class LayoutManager extends LMEmitter {
         // but we still want to avoid this unnecessary initial loop
         // which may cause more adaptable work
         const resume = this.suspendAgGridListener();
-        const pivotMode = this.gridApi.isPivotMode();
+        const pivotMode = this.isInPivotMode();
         if (!!layout.SuppressAggFuncInHeader !== !!this.gridApi.getGridOption('suppressAggFuncInHeader')) {
             this.gridApi.setGridOption('suppressAggFuncInHeader', !!layout.SuppressAggFuncInHeader);
         }
@@ -887,6 +1057,7 @@ export class LayoutManager extends LMEmitter {
         else {
             this.gridApi.setGridOption('grandTotalRow', null);
         }
+        this.applyColumnDefsChanges(layout);
         if (isPivotLayoutModel(layout)) {
             try {
                 const perfApplyPivot = this.beginPerf('applyLayout:pivot');
@@ -911,6 +1082,17 @@ export class LayoutManager extends LMEmitter {
             resume();
         }
     }
+    applyColumnDefsChanges(layout) {
+        return this.applyColumnSizingColumnDefsChanges(layout);
+    }
+    applyColumnSizingColumnDefsChanges(layout) {
+        const newColDefs = LayoutManager.getColumnDefsChangesForLayout(layout, this.gridApi.getColumnDefs());
+        if (newColDefs) {
+            this.gridApi.setGridOption('columnDefs', newColDefs);
+            return true;
+        }
+        return false;
+    }
     applyTableLayout(layout, options) {
         this.withSuppressColumnAnimation(() => {
             // if we apply the state here, before calling setGridOption for groupDisplayType
@@ -1034,7 +1216,7 @@ export class LayoutManager extends LMEmitter {
                 rowGroup: rowGroupIndex != null,
             };
         });
-        this.computeColumnWidths(layout, columnState);
+        this.computeColumnSizing(layout, columnState);
         this.computeColumnSorts(layout, columnState);
         this.computePinnedColumns(layout, columnState);
         this.computePivotAggregations(layout, columnState);
@@ -1059,7 +1241,7 @@ export class LayoutManager extends LMEmitter {
     computeColumnStateForTableLayout(layout) {
         const columnState = {};
         this.computeColumnOrderAndVisibility(layout, columnState);
-        this.computeColumnWidths(layout, columnState);
+        this.computeColumnSizing(layout, columnState);
         this.computeColumnSorts(layout, columnState);
         this.computeRowGrouping(layout, columnState);
         this.computeAggregations(layout, columnState);
@@ -1174,20 +1356,38 @@ export class LayoutManager extends LMEmitter {
         colDef = colDef ?? this.gridApi.getColumnDef(colId);
         return colDef?.width ?? DEFAULT_COLUMN_WIDTH;
     }
-    computeColumnWidths(layout, columnState) {
-        const widthMap = layout.ColumnWidths;
-        if (!widthMap || !Object.keys(widthMap).length) {
-            columnState.state.forEach((colState) => {
-                colState.width = this.getDefaultColumnWidthForCol(colState.colId);
-            });
-            return;
-        }
+    computeColumnSizing(layout, columnState) {
+        const ColumnSizing = layout.ColumnSizing || {};
+        const colDefs = this.gridApi.getColumnDefs();
+        const options = {
+            columnDefs: colDefs,
+            colTypes: this.gridApi.getGridOption('columnTypes'),
+            defaultColDef: this.gridApi.getGridOption('defaultColDef'),
+        };
         columnState.state.forEach((colState) => {
-            if (widthMap[colState.colId]) {
-                colState.width = widthMap[colState.colId];
+            const colSizing = ColumnSizing[colState.colId];
+            if (colSizing) {
+                if (colSizing.Width != undefined) {
+                    colState.width = colSizing.Width;
+                }
+                else if (colSizing.Flex != undefined) {
+                    colState.flex = colSizing.Flex;
+                }
             }
             else {
-                colState.width = this.getDefaultColumnWidthForCol(colState.colId);
+                let defaultColState;
+                if (!colState.flex) {
+                    defaultColState = getDefaultColumnSizeStateForColDef(colState.colId, undefined, options);
+                    if (defaultColState?.flex) {
+                        colState.flex = defaultColState.flex;
+                    }
+                }
+                if (!colState.flex) {
+                    colState.width =
+                        colState.width ??
+                            defaultColState?.width ??
+                            this.getDefaultColumnWidthForCol(colState.colId);
+                }
             }
         });
     }
@@ -1218,9 +1418,9 @@ export class LayoutManager extends LMEmitter {
                 // dont auto size hidden columns
                 tableColumns = tableColumns.filter((colId) => !currentLayout.ColumnVisibility[colId]);
             }
-            if (currentLayout.ColumnWidths) {
-                // dont auto size columns with a set width
-                tableColumns = tableColumns.filter((colId) => !currentLayout.ColumnWidths[colId]);
+            if (currentLayout.ColumnSizing) {
+                // dont auto size columns with a set sizing
+                tableColumns = tableColumns.filter((colId) => !currentLayout.ColumnSizing[colId]);
             }
         }
         columnIds = columnIds ?? tableColumns;
@@ -1231,50 +1431,62 @@ export class LayoutManager extends LMEmitter {
         return columnIds;
     }
     applyPivotLayout(layout, options) {
-        this.applyPivotTotals(layout);
-        const columnState = this.computeColumnStateForPivotLayout(layout);
-        // by simply calling this.gridApi.applyColumnState(columnState)
-        // the order of aggregations is not preserved/guaranteed by ag-grid
-        // so we want to apply multiple states - adding aggregations one by one
-        // first: no aggregation
-        // second: [agg[0]]
-        // third: [agg[0], agg[1]]
-        // fourth: ...etc
-        // so we apply the states for all aggregations except the last one
-        //
-        const aggregationsMapForOrder = (layout.PivotAggregationColumns || []).map((_, index) => layout.PivotAggregationColumns.slice(0, index));
-        aggregationsMapForOrder.forEach((agg) => {
-            // we're mutating the columnState here
-            this.computePivotAggregations({ ...layout, PivotAggregationColumns: agg }, columnState);
-            // and apply the state
-            this.gridApi.applyColumnState(columnState);
-        });
-        // now recompute and apply the last one
-        this.computePivotAggregations(layout, columnState);
-        this.gridApi.applyColumnState(columnState);
-        // let's also include the column widths of the pivotResult columns
-        // we can't simply include those in the columnState because the columnState will also apply order
-        // but we don't want to affect the order of the pivotResult columns
-        // so we'll do it manually, and apply the widths after the columnState
-        // by using the gridApi.setColumnWidths method
-        if (layout.ColumnWidths) {
-            const colWidthForPivotResultColumns = [];
-            (this.gridApi.getPivotResultColumns() || []).forEach((col) => {
-                const colId = col.getColId();
-                if (layout.ColumnWidths[colId]) {
-                    colWidthForPivotResultColumns.push({ key: colId, newWidth: layout.ColumnWidths[colId] });
+        this.withSuppressColumnAnimation(() => {
+            this.applyPivotTotals(layout);
+            const hasGroupedColumns = layout.PivotGroupedColumns && !!layout.PivotGroupedColumns.length;
+            if (hasGroupedColumns) {
+                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
+                if (groupDisplayType !== displayTypeFromLayout) {
+                    this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);
                 }
+            }
+            const columnState = this.computeColumnStateForPivotLayout(layout);
+            // by simply calling this.gridApi.applyColumnState(columnState)
+            // the order of aggregations is not preserved/guaranteed by ag-grid
+            // so we want to apply multiple states - adding aggregations one by one
+            // first: no aggregation
+            // second: [agg[0]]
+            // third: [agg[0], agg[1]]
+            // fourth: ...etc
+            // so we apply the states for all aggregations except the last one
+            //
+            const aggregationsMapForOrder = (layout.PivotAggregationColumns || []).map((_, index) => layout.PivotAggregationColumns.slice(0, index));
+            aggregationsMapForOrder.forEach((agg) => {
+                // we're mutating the columnState here
+                this.computePivotAggregations({ ...layout, PivotAggregationColumns: agg }, columnState);
+                // and apply the state
+                this.gridApi.applyColumnState(columnState);
             });
-            if (colWidthForPivotResultColumns.length) {
-                this.gridApi.setColumnWidths(colWidthForPivotResultColumns);
+            // now recompute and apply the last one
+            this.computePivotAggregations(layout, columnState);
+            this.gridApi.applyColumnState(columnState);
+            // let's also include the column widths of the pivotResult columns
+            // we can't simply include those in the columnState because the columnState will also apply order
+            // but we don't want to affect the order of the pivotResult columns
+            // so we'll do it manually, and apply the widths after the columnState
+            // by using the gridApi.setColumnWidths method
+            if (layout.ColumnSizing) {
+                const colWidthForPivotResultColumns = [];
+                (this.gridApi.getPivotResultColumns() || []).forEach((col) => {
+                    const colId = col.getColId();
+                    if (layout.ColumnSizing[colId]?.Width != undefined) {
+                        colWidthForPivotResultColumns.push({
+                            key: colId,
+                            newWidth: layout.ColumnSizing[colId].Width ?? DEFAULT_COLUMN_WIDTH,
+                        });
+                    }
+                });
+                if (colWidthForPivotResultColumns.length) {
+                    this.gridApi.setColumnWidths(colWidthForPivotResultColumns);
+                }
             }
-        }
-        this.applyColumnGroupCollapseExpandState(layout);
-        const hasGroupedColumns = layout.PivotGroupedColumns && layout.PivotGroupedColumns.length;
-        // but also let's not forget to apply the row group values
-        if (hasGroupedColumns && layout.RowGroupValues && !options?.skipApplyRowGroupsExpandedState) {
-            this.applyRowGroupValues(layout.RowGroupValues, layout.PivotGroupedColumns);
-        }
+            this.applyColumnGroupCollapseExpandState(layout);
+            // but also let's not forget to apply the row group values
+            if (hasGroupedColumns && layout.RowGroupValues && !options?.skipApplyRowGroupsExpandedState) {
+                this.applyRowGroupValues(layout.RowGroupValues, layout.PivotGroupedColumns);
+            }
+        });
     }
     applyPivotTotals(layout) {
         /**
@@ -1494,4 +1706,7 @@ export class LayoutManager extends LMEmitter {
             };
         }
     }
+    isInPivotMode() {
+        return this.gridApi.isModuleRegistered('PivotModule') && this.gridApi.isPivotMode();
+    }
 }

package/src/layout-manager/src/normalizeLayoutModel.js

@@ -18,8 +18,8 @@ export function normalizeTableLayoutModel(layout, options) {
     if (!layout.ColumnPinning) {
         layout.ColumnPinning = {};
     }
-    if (!layout.ColumnWidths) {
-        layout.ColumnWidths = {};
+    if (!layout.ColumnSizing) {
+        layout.ColumnSizing = {};
     }
     if (!layout.RowGroupedColumns) {
         layout.RowGroupedColumns = [];
@@ -124,8 +124,8 @@ export function normalizePivotLayoutModel(layout) {
     if (!layout.ColumnPinning) {
         layout.ColumnPinning = {};
     }
-    if (!layout.ColumnWidths) {
-        layout.ColumnWidths = {};
+    if (!layout.ColumnSizing) {
+        layout.ColumnSizing = {};
     }
     if (!layout.PivotGroupedColumns) {
         layout.PivotGroupedColumns = [];
@@ -157,6 +157,9 @@ export function normalizePivotLayoutModel(layout) {
         // make it an own property
         layout.PivotColumnTotal = undefined;
     }
+    if (layout.PivotGroupedColumns && layout.PivotGroupedColumns.length) {
+        layout.RowGroupDisplayType = layout.RowGroupDisplayType || 'single';
+    }
     return layout;
 }
 export function normalizeLayoutModel(layout, options) {