@adaptabletools/adaptable 18.0.0-canary.21 → 18.0.0-canary.23

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -143,6 +143,19 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'String') {
         return 'String';
     }
+    if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // need to check if all column with this column type has the same data type and return that particular one
+        const columns = scope.ColumnTypes.flatMap((columnType) => {
+            return api.columnApi.getColumnsByColumnType(columnType);
+        });
+        // check if all have the same type
+        if (columns.length &&
+            columns.every((column) => column.dataType === columns[0].dataType) &&
+            // supported data types
+            ['Number', 'Date', 'String'].includes(columns[0].dataType)) {
+            return columns[0].dataType;
+        }
+    }
     return undefined;
 };
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
@@ -189,7 +202,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -248,13 +261,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, { mr: 3 },
                         React.createElement(FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Integer Separator" },
-                            React.createElement(Input, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Prefix" },
-                            React.createElement(Input, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "prefix", value: (_c = data.DisplayFormat.Options.Prefix) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Suffix" },
-                            React.createElement(Input, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "suffix", value: (_d = data.DisplayFormat.Options.Suffix) !== null && _d !== void 0 ? _d : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Truncate" },
                             React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
                         React.createElement(FormRow, { label: "Ceiling" },
@@ -279,7 +292,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Input, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
                         React.createElement(FormRow, { label: "Content" },
-                            React.createElement(Input, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Input, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
                         React.createElement(FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -7,11 +7,6 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Tag } from '../../../components/Tag';
 import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
 import { Toggle } from '../../../components/Toggle/Toggle';
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 export const renderFormatColumnSettingsSummary = (data) => {
     var _a;
     return (React.createElement(Box, { padding: 2 },

package/src/View/Note/NotePopup.js

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import { GetAllNotesSelector } from '../../Redux/ActionsReducers/NoteRedux';
+import dateFnsFormat from 'date-fns/format';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -13,8 +15,10 @@ const tableDOMProps = {
     },
 };
 export const NotePopup = (props) => {
+    var _a;
     const adaptable = useAdaptable();
     const primaryKeyHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
+    const dateFormat = (_a = adaptable.api.optionsApi.getNoteOptions().dateFormat) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME;
     const allNotes = useSelector((state) => GetAllNotesSelector(state.Note));
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
@@ -39,8 +43,7 @@ export const NotePopup = (props) => {
             timestamp: {
                 field: 'Timestamp',
                 valueGetter: (params) => {
-                    var _a;
-                    return (_a = new Date(params.data.Timestamp)) === null || _a === void 0 ? void 0 : _a.toDateString();
+                    return dateFnsFormat(params.data.Timestamp, dateFormat);
                 },
             },
             delete: {

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -58,7 +58,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      * once layouts are properly handled with the new aggrid methods & events
      * we can remove this hack
      */
-    private previousAgGridColumnState;
+    private previousAgGridLayoutState;
     _rawAdaptableOptions: AdaptableOptions;
     adaptableOptions: AdaptableOptions;
     _isDetailGrid: boolean;
@@ -310,15 +310,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getChartRef(chartId: string): ChartRef;
     setLayout(layout?: Layout): void;
     private getActiveAdaptableAggFuncForCol;
-    /**
-     * Setting layout works by modifing the column state.
-     * The column state is based on the current existing columns.
-     * At this point the column groups do not exist, and the widths from layout are not applied.
-     *
-     * After the col sate is applied and the column groups are created we need
-     * to apply the state again to update the widths of the group columns.
-     */
-    private applyGroupColumnWidth;
     private onRowDataChanged;
     private onCellDataChanged;
     private isUndoChange;

package/src/agGrid/AdaptableAgGrid.js

@@ -96,6 +96,7 @@ import { ensurePortalElement } from '../components/Modal';
 import { AdaptableLoadingScreen } from '../View/Components/Popups/AdaptableLoadingScreen';
 import { createElement } from 'react';
 import { removeUuidAndSource } from '../Utilities/Helpers/AdaptableHelper';
+import { buildSortedColumnStateForLayout } from './buildSortedColumnStateForLayout';
 const RowNodeProto = RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 /**
@@ -143,7 +144,7 @@ export class AdaptableAgGrid {
          * once layouts are properly handled with the new aggrid methods & events
          * we can remove this hack
          */
-        this.previousAgGridColumnState = '';
+        this.previousAgGridLayoutState = '';
         this.columnMinMaxValuesCache = {};
         this.renderReactRoot = (node, container) => defaultRenderReactRoot(node, container);
         /**
@@ -2203,53 +2204,20 @@ export class AdaptableAgGrid {
         });
         this.deriveAdaptableColumnStateFromAgGrid();
     }
-    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, isPivot) {
+    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, layout) {
+        layout = layout || this.api.layoutApi.getCurrentLayout();
+        visibleColumnList = visibleColumnList || layout.Columns;
         columnState = columnState || this.agGridAdapter.getAgGridApi().getColumnState();
-        const pivotMode = isPivot !== null && isPivot !== void 0 ? isPivot : this.api.layoutApi.isCurrentLayoutPivot();
-        const NewVisibleColumnIdsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const columnsStateIndexes = columnState.reduce((acc, colState, index) => {
-            acc[colState.colId] = index;
-            return acc;
-        }, {});
-        const newVisibleColumnsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const result = [...columnState]
-            .sort((colState1, colState2) => {
-            const colId1 = colState1.colId;
-            const colId2 = colState2.colId;
-            const originalIndex1 = columnsStateIndexes[colId1];
-            const originalIndex2 = columnsStateIndexes[colId2];
-            if (pivotMode) {
-                const isRowGroup1 = this.api.columnApi.isAutoRowGroupColumn(colId1);
-                const isRowGroup2 = this.api.columnApi.isAutoRowGroupColumn(colId2);
-                if (isRowGroup1 && isRowGroup2) {
-                    return 1;
-                }
-                if (isRowGroup1) {
-                    return -1;
-                }
-                if (isRowGroup2) {
-                    return 1;
-                }
-            }
-            if (newVisibleColumnsMap[colId1] != null && newVisibleColumnsMap[colId2] == null) {
-                return -1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] != null) {
-                return 1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] == null) {
-                return originalIndex1 - originalIndex2;
-            }
-            return newVisibleColumnsMap[colState1.colId] - newVisibleColumnsMap[colState2.colId];
-        })
-            .map((colState) => (Object.assign(Object.assign({}, colState), { hide: NewVisibleColumnIdsMap[colState.colId] == null })));
-        return result;
+        return buildSortedColumnStateForLayout({
+            columnState: columnState.map((colState) => {
+                return {
+                    colId: colState.colId,
+                    hide: colState.hide,
+                };
+            }),
+            layout: Object.assign(Object.assign({}, layout), { Columns: visibleColumnList }),
+            gridOptions: this.agGridAdapter.getLiveGridOptions(),
+        });
     }
     getDistinctValuesForColumn(column, distinctValuesParams) {
         let gridCells = this.getGridCellsForPermittedValues(column, distinctValuesParams);
@@ -2957,7 +2925,7 @@ export class AdaptableAgGrid {
         else {
             (_b = this.agGridAdapter.getAgGridApi()) === null || _b === void 0 ? void 0 : _b.destroy();
         }
-        this.previousAgGridColumnState = '';
+        this.previousAgGridLayoutState = '';
         const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
             gridContainerElement.removeEventListener('keydown', this.agGridListenerKeydown);
@@ -3190,10 +3158,6 @@ export class AdaptableAgGrid {
             layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
             layout.PinnedColumnsMap[actionRowColumn.colId] = actionRowColumn.pinned;
         }
-        const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
-            acc[colId] = true;
-            return acc;
-        }, {});
         const columnsState = this.agGridAdapter.getAgGridApi().getColumnState();
         const columnsStateIndexes = {};
         const columnsStateMap = columnsState.reduce((acc, colState, index) => {
@@ -3225,20 +3189,19 @@ export class AdaptableAgGrid {
                 .getPivotResultColumns()) === null || _b === void 0 ? void 0 : _b.map((column) => column.getColId())) || [];
         let isChanged = false;
         const colsToAutoSize = {};
-        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, !!layout.EnablePivot);
+        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, layout);
         newColumnsState = newColumnsState
             .map((colState) => {
             var _a, _b, _c;
             const { colId } = colState;
             const oldColState = columnsStateMap[colId];
-            const hide = this.api.columnApi.isAutoPivotColumn(colId)
-                ? colState.hide
-                : !layoutColumnsMap[colId];
-            const newColState = Object.assign(Object.assign({}, oldColState), { hide });
+            // it's important to have width here, so it's not inherited from the existing colState
+            // which could be from a different layout
+            const newColState = Object.assign(Object.assign(Object.assign({}, oldColState), { width: null }), colState);
             if (layout.ColumnWidthMap && layout.ColumnWidthMap[colId] != null) {
                 newColState.width = layout.ColumnWidthMap[colId];
             }
-            else if (!hide) {
+            else if (!colState.hide) {
                 // autosize only the columns which are part of the selected layout
                 colsToAutoSize[colId] = true;
             }
@@ -3247,11 +3210,7 @@ export class AdaptableAgGrid {
             }
             newColState.rowGroupIndex =
                 groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
-            const previousRowGroup = newColState.rowGroup;
             newColState.rowGroup = newColState.rowGroupIndex != null;
-            if (!previousRowGroup && newColState.rowGroup) {
-                this.agGridColumnAdapter.triggerSetupColumnKeyCreator(colId);
-            }
             const normalizePinned = (pinnedValue) => {
                 if (typeof pinnedValue === 'string') {
                     return pinnedValue;
@@ -3356,14 +3315,13 @@ export class AdaptableAgGrid {
             // as otherwise column order is not preserved properly when
             // going from pivoted to unpivoted layout
             if (shouldUpdatePivoted) {
-                this.agGridAdapter.getAgGridApi().setPivotMode(pivoted);
+                this.agGridAdapter.setGridOption('pivotMode', pivoted);
             }
             const perfApplyColumnState = this.logger.beginPerf('applyColumnState (layout.isChanged)');
             this.agGridAdapter.getAgGridApi().applyColumnState({
                 state: newColumnsState,
                 applyOrder: true,
             });
-            this.applyGroupColumnWidth(layout);
             perfApplyColumnState.end();
             this.api.gridApi.setColumnSorts(layout.ColumnSorts);
             this.agGridAdapter.getAgGridApi().setPivotColumns(layout.PivotColumns || []);
@@ -3420,38 +3378,6 @@ export class AdaptableAgGrid {
         }
         return null;
     }
-    /**
-     * Setting layout works by modifing the column state.
-     * The column state is based on the current existing columns.
-     * At this point the column groups do not exist, and the widths from layout are not applied.
-     *
-     * After the col sate is applied and the column groups are created we need
-     * to apply the state again to update the widths of the group columns.
-     */
-    applyGroupColumnWidth(layout) {
-        if (!layout.RowGroupedColumns || !layout.RowGroupedColumns.length) {
-            return;
-        }
-        const groupColumnWithDifferentWidths = this.agGridAdapter
-            .getAgGridApi()
-            .getColumnState()
-            .reduce((acc, col) => {
-            var _a;
-            if (this.api.columnApi.isAutoRowGroupColumn(col.colId)) {
-                const widthInLayout = (_a = layout.ColumnWidthMap) === null || _a === void 0 ? void 0 : _a[col.colId];
-                if (widthInLayout && widthInLayout !== col.width) {
-                    acc.push(Object.assign(Object.assign({}, col), { width: widthInLayout }));
-                }
-            }
-            return acc;
-        }, []);
-        if (groupColumnWithDifferentWidths.length === 0) {
-            return;
-        }
-        this.agGridAdapter.getAgGridApi().applyColumnState({
-            state: groupColumnWithDifferentWidths,
-        });
-    }
     onRowDataChanged({ rowNode, oldData, newData, }) {
         if (oldData == null || oldData == undefined) {
             return;
@@ -3748,15 +3674,18 @@ export class AdaptableAgGrid {
         var _a, _b;
         const agGridApi = this.agGridAdapter.getAgGridApi();
         const columnState = agGridApi.getColumnState();
+        const expandedState = agGridApi.getState().rowGroupExpansion || { expandedRowGroupIds: [] };
+        const currentLayoutState = { columnState, expandedState };
         try {
-            const stringifiedState = JSON.stringify(columnState);
-            if (stringifiedState === this.previousAgGridColumnState) {
+            // TODO
+            const stringifiedLayoutState = JSON.stringify(currentLayoutState);
+            if (stringifiedLayoutState === this.previousAgGridLayoutState) {
                 // same grid column state as a previous,
                 // so no need to update, as the layout has already been updated
                 // for this grid column state
                 return;
             }
-            this.previousAgGridColumnState = stringifiedState;
+            this.previousAgGridLayoutState = stringifiedLayoutState;
         }
         catch (ex) {
             this.logger.consoleError('Error stringifying column state', ex);

package/src/agGrid/AgGridAdapter.d.ts

@@ -24,6 +24,7 @@ export declare class AgGridAdapter {
     grabAgGridApiOnTheFly(args: unknown): void;
     getLiveGridOptions(): GridOptions | undefined;
     updateGridOptions(options: ManagedGridOptions): void;
+    getGridOption<Key extends keyof GridOptions>(key: Key): GridOptions[Key];
     setGridOption<Key extends ManagedGridOptionKey>(key: Key, value: GridOptions[Key]): void;
     getUserGridOptionsProperty<T extends keyof GridOptions>(propertyName: T): GridOptions[T];
     updateColumnFilterActiveState(): void;

package/src/agGrid/AgGridAdapter.js

@@ -60,6 +60,10 @@ export class AgGridAdapter {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.updateGridOptions(options);
     }
+    getGridOption(key) {
+        var _a;
+        return (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.getGridOption(key);
+    }
     setGridOption(key, value) {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.setGridOption(key, value);

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -12,7 +12,6 @@ export declare class AgGridColumnAdapter {
     setColDefProperty<T extends keyof ColDef>(col: Column, propertyName: T, propertyGetter: (userPropertyValue: ColDef[T]) => ColDef[T] | undefined): void;
     getUserColDefProperty<T extends keyof ColDef>(columnId: string, propertyName: T): ColDef[T] | undefined;
     setupColumns(): void;
-    triggerSetupColumnKeyCreator(colId: string): void;
     private setupColumnValueGetter;
     private setupColumnCellClass;
     private setupColumnCellStyle;
@@ -21,7 +20,6 @@ export declare class AgGridColumnAdapter {
     private setupColumnTooltipValueGetter;
     private setupColumnQuickFilerText;
     private setupColumnAllowedAggFuncs;
-    private setupColumnKeyCreator;
     private setupColumnCellDataType;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
     private setupColumnFilter;

package/src/agGrid/AgGridColumnAdapter.js

@@ -102,24 +102,11 @@ export class AgGridColumnAdapter {
             this.setupColumnHeader(colSetupInfo);
             this.setupColumnQuickFilerText(colSetupInfo);
             this.setupColumnAllowedAggFuncs(colSetupInfo);
-            this.setupColumnKeyCreator(colSetupInfo);
             // this is just to make sure that AG Grid does NOT infer the cellDataType
             // https://github.com/AdaptableTools/adaptable/issues/2230 should render it obsolete
             this.setupColumnCellDataType(colSetupInfo);
         });
     }
-    triggerSetupColumnKeyCreator(colId) {
-        const col = this.agGridApi.getColumn(colId);
-        const colDef = col.getColDef();
-        const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
-        const colSetupInfo = {
-            col,
-            colDef,
-            colId,
-            abColumn,
-        };
-        this.setupColumnKeyCreator(colSetupInfo);
-    }
     setupColumnValueGetter({ col }) {
         // need this here if we want plugins to intercept
         this.setColDefProperty(col, 'valueGetter', (userValue) => {
@@ -287,36 +274,6 @@ export class AgGridColumnAdapter {
             return abColumn.availableAggregationFunctions;
         });
     }
-    setupColumnKeyCreator(columnSetupInfo) {
-        const { col, abColumn } = columnSetupInfo;
-        const adaptableOptions = this.adaptableOptions;
-        this.setColDefProperty(col, 'keyCreator', (userPropertyValue) => {
-            return (params) => {
-                var _a;
-                if (typeof userPropertyValue === 'function') {
-                    return userPropertyValue(params);
-                }
-                const value = params.value;
-                if (this.adaptableInstance.agGridAdapter.getLiveGridOptions().groupAllowUnbalanced) {
-                    return value;
-                }
-                const balancedGroupsKey = (_a = adaptableOptions.groupingOptions) === null || _a === void 0 ? void 0 : _a.balancedGroupsKey;
-                if (!balancedGroupsKey) {
-                    return value;
-                }
-                let groupBalancedGroupsUnderKeyValue = typeof balancedGroupsKey === 'function'
-                    ? balancedGroupsKey({
-                        adaptableApi: this.adaptableApi,
-                        userName: this.adaptableOptions.userName,
-                        adaptableId: this.adaptableOptions.adaptableId,
-                        adaptableColumn: abColumn,
-                        params,
-                    })
-                    : balancedGroupsKey;
-                return value === null || value === undefined ? groupBalancedGroupsUnderKeyValue : value;
-            };
-        });
-    }
     setupColumnCellDataType(columnSetupInfo) {
         const { col } = columnSetupInfo;
         // AG Grid introduced since v30.x an inferred cellDataType

package/src/agGrid/buildSortedColumnStateForLayout.d.ts

@@ -0,0 +1,7 @@
+import { ColumnState, GridOptions } from '@ag-grid-community/core';
+import { Layout } from '../types';
+export declare function buildSortedColumnStateForLayout(params: {
+    columnState: ColumnState[];
+    layout: Layout;
+    gridOptions: GridOptions;
+}): ColumnState[];

package/src/agGrid/buildSortedColumnStateForLayout.js

@@ -0,0 +1,120 @@
+import { AG_GRID_GROUPED_COLUMN } from '../Utilities/Constants/GeneralConstants';
+import { getAutoRowGroupColumnIdFor } from '../Api/Internal/ColumnInternalApi';
+import { isAutoRowGroupColumn } from '../Api/Implementation/ColumnApiImpl';
+import { sortColumnStateForVisibleColumns } from './sortColumnStateForVisibleColumns';
+export function buildSortedColumnStateForLayout(params) {
+    const { columnState, layout, gridOptions } = params;
+    let visibleColumnList = [...layout.Columns];
+    const multipleGroupColumns = gridOptions.groupDisplayType === 'multipleColumns';
+    const singleGroupColumn = !multipleGroupColumns;
+    const rowGroupedColumnsIndexes = {};
+    let generatedRowGroupColumnsIds = [];
+    // here we make sure the visibleColumnList includes all the generated group columns
+    if (layout.RowGroupedColumns) {
+        layout.RowGroupedColumns.forEach((colId, index) => {
+            rowGroupedColumnsIndexes[colId] = index;
+            rowGroupedColumnsIndexes[getAutoRowGroupColumnIdFor(colId)] = index;
+        });
+        // if the layout does not include the grouped columns,
+        // make sure we add the grouped columns to the visible column list
+        // at the start of the list
+        if (singleGroupColumn) {
+            if (!visibleColumnList.includes(AG_GRID_GROUPED_COLUMN)) {
+                visibleColumnList = [AG_GRID_GROUPED_COLUMN, ...visibleColumnList];
+            }
+            generatedRowGroupColumnsIds.push(AG_GRID_GROUPED_COLUMN);
+        }
+        else {
+            let missingGroupColumns = 0;
+            [...layout.RowGroupedColumns].reverse().forEach((colId) => {
+                const groupColId = getAutoRowGroupColumnIdFor(colId);
+                if (!visibleColumnList.includes(groupColId)) {
+                    visibleColumnList = [groupColId, ...visibleColumnList];
+                    missingGroupColumns++;
+                }
+                generatedRowGroupColumnsIds = [groupColId, ...generatedRowGroupColumnsIds];
+            });
+            // now we need to sort the visibleColumnList to contain the group columns
+            // in the correct order
+            // but we only need to do this if the layout.Columns list missed some of the
+            // group columns, but not all of them. if all were missing, we already
+            // inserted them at the start of the list
+            if (missingGroupColumns && missingGroupColumns < layout.RowGroupedColumns.length) {
+                visibleColumnList.sort((colId1, colId2) => {
+                    const isRowGroup1 = isAutoRowGroupColumn(colId1);
+                    const isRowGroup2 = isAutoRowGroupColumn(colId2);
+                    if (isRowGroup1 && isRowGroup2) {
+                        return rowGroupedColumnsIndexes[colId1] - rowGroupedColumnsIndexes[colId2];
+                    }
+                    return 0;
+                });
+            }
+        }
+    }
+    const visibleColumnsIndexes = visibleColumnList.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const pivotMode = layout.EnablePivot;
+    if (pivotMode) {
+        // in pivot mode, we sort the Visible columns of the layout
+        // to make sure the group cols are at the beginning
+        const groupCols = visibleColumnList.filter(isAutoRowGroupColumn);
+        visibleColumnList = visibleColumnList.filter((colId) => !isAutoRowGroupColumn(colId));
+        visibleColumnList = [...groupCols, ...visibleColumnList];
+    }
+    // we're now ready to go over the columnState
+    // we want as much as possible to keep the order of the columns
+    // as they are in the column state.
+    // if the order is different in the visibleColumns, we only move those columns around
+    // if some columns in the columnState are not in the visibleColumns, we need to return them as hide: true
+    // first step - keep the same order, but filter out old group columns
+    // VERY IMPORTANT to only filter out OLD group columns, that is,
+    // group columns that are not in the layout anymore
+    // since we might have different group columns in the layout
+    let newColumnState = [...columnState].filter((colState) => {
+        const { colId } = colState;
+        if (isAutoRowGroupColumn(colId) && rowGroupedColumnsIndexes[colId] == null) {
+            return false;
+        }
+        return true;
+    });
+    // second step - keep the same order
+    // but make sure the visibility is adjusted to reflect the
+    // visible columns in the layout
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const visibleIndex = visibleColumnsIndexes[colId];
+        if (visibleIndex == null) {
+            return Object.assign(Object.assign({}, colState), { hide: true });
+        }
+        return Object.assign(Object.assign({}, colState), { hide: null });
+    });
+    // third step - correctly mark the columns that are grouped
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const groupIndex = rowGroupedColumnsIndexes[colId];
+        if (groupIndex != null) {
+            return Object.assign(Object.assign({}, colState), { rowGroup: true, rowGroupIndex: groupIndex });
+        }
+        return Object.assign(Object.assign({}, colState), { rowGroup: false, rowGroupIndex: null });
+    });
+    // fourth step - add the new group columns, if they are missing
+    const columnStateIndexes = newColumnState.reduce((acc, colState, index) => {
+        acc[colState.colId] = index;
+        return acc;
+    }, {});
+    generatedRowGroupColumnsIds.reverse().forEach((rowGroupColId) => {
+        if (columnStateIndexes[rowGroupColId] == null) {
+            newColumnState = [
+                {
+                    colId: rowGroupColId,
+                },
+                ...newColumnState,
+            ];
+        }
+    });
+    // fitfth step - sort the column state to respect the order of the visible columns
+    // we can't simply call sort in this case
+    return sortColumnStateForVisibleColumns(newColumnState, visibleColumnList);
+}

package/src/agGrid/defaultAdaptableOptions.js

@@ -143,7 +143,6 @@ const DefaultAdaptableOptions = {
     customSortOptions: { customSortComparers: undefined },
     dataSetOptions: { dataSets: EMPTY_ARRAY },
     groupingOptions: {
-        balancedGroupsKey: undefined,
         restoreUngroupedColumns: false,
         autoOrderGroupedColumns: true,
     },

package/src/agGrid/sortColumnStateForVisibleColumns.d.ts

@@ -0,0 +1,12 @@
+type ColState = {
+    colId: string;
+    hide?: boolean | null;
+};
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export declare function sortColumnStateForVisibleColumns<T extends ColState>(columnState: T[], visibleColumns: string[]): T[];
+export {};

package/src/agGrid/sortColumnStateForVisibleColumns.js

@@ -0,0 +1,46 @@
+function insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset = 0, lastVisibleOffset = 0) {
+    const prevColState = result[result.length - 1 - offset];
+    if (!prevColState) {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+        return;
+    }
+    if (prevColState.hide) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /* do not advance this as, as we've encountered a hidden column*/ lastVisibleOffset);
+        return;
+    }
+    const prevCol_visibilityIndex = visibleColumnsIndexes[prevColState.colId];
+    const currentCol_visibilityIndex = visibleColumnsIndexes[colState.colId];
+    if (currentCol_visibilityIndex < prevCol_visibilityIndex) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /*make sure we sync with the normal offset, as we've hit a visible col*/ offset + 1);
+    }
+    else {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+    }
+}
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export function sortColumnStateForVisibleColumns(columnState, visibleColumns) {
+    const visibleColumnsIndexes = visibleColumns.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const result = [];
+    for (let i = 0, len = columnState.length; i < len; i++) {
+        const colState = columnState[i];
+        const colVisible = visibleColumnsIndexes[colState.colId] != null;
+        if (!colVisible) {
+            // for cols not present in this layout, we keep them
+            // where they are
+            result.push(colState);
+            continue;
+        }
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes);
+    }
+    return result;
+}

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1712152010975 || Date.now(),
-    VERSION: "18.0.0-canary.21" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1712304058670 || Date.now(),
+    VERSION: "18.0.0-canary.23" || '--current-version--',
 };