@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.2

package/src/agGrid/Adaptable.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
 const tslib_1 = require("tslib");
 const core_1 = require("@ag-grid-community/core");
+const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const uniqBy_1 = tslib_1.__importDefault(require("lodash/uniqBy"));
 const React = tslib_1.__importStar(require("react"));
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const AdaptableApiImpl_1 = require("../Api/Implementation/AdaptableApiImpl");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -24,7 +24,6 @@ const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
 const getScrollbarSize_1 = tslib_1.__importDefault(require("../Utilities/getScrollbarSize"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/AdaptableHelper"));
-const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
 const Helper_1 = require("../Utilities/Helpers/Helper");
 const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
 const ObjectFactory_1 = require("../Utilities/ObjectFactory");
@@ -64,6 +63,8 @@ const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const RowEditService_1 = require("../Utilities/Services/RowEditService");
 const weightedAverage_1 = require("./weightedAverage");
 const AggregationColumns_1 = require("../PredefinedConfig/Common/AggregationColumns");
+const renderReactRoot_1 = require("../renderReactRoot");
+const ChartingService_1 = require("../Utilities/Services/ChartingService");
 const tinycolor = require('tinycolor2');
 const GROUP_PATH_SEPARATOR = '/';
 // IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
@@ -86,6 +87,14 @@ const assignColId = (colDef) => {
 const RowNodeProto = core_1.RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 const GridApi_setColumnDefs = core_1.GridApi.prototype.setColumnDefs;
+['addCssClass', 'removeCssClass', 'containsCssClass', 'addOrRemoveCssClass'].forEach((methodName) => {
+    // @ts-ignore
+    const CssClassManager_originalMethod = core_1.CssClassManager.prototype[methodName];
+    // @ts-ignore
+    core_1.CssClassManager.prototype[methodName] = function () {
+        return this.getGui() ? CssClassManager_originalMethod.apply(this, arguments) : undefined;
+    };
+});
 /**
  * AgGrid does not expose Events.EVENT_ROW_DATA_CHANGED
  * so we have to override `dispatchLocalEvent`
@@ -140,8 +149,10 @@ const forEachColumn = (cols, fn, parentColGroup) => {
 const adaptableInstances = {};
 class Adaptable {
     constructor() {
+        this.variant = 'vanilla';
         this.colDefPropertyCache = new Map();
         this.gridOptionsPropertyCache = new Map();
+        this.columnMinMaxValuesCache = {};
         this.isCheckedColumnDataType = false;
         // only for our private / internal events used within Adaptable
         // public events are emitted through the EventApi
@@ -169,6 +180,8 @@ class Adaptable {
         };
         this._adaptableReady = false;
         this.isDestroyed = false;
+        this.supressReact18RenderWarning = false;
+        this.renderReactRoot = (node, container) => (0, renderReactRoot_1.renderReactRoot)(node, container, this.supressReact18RenderWarning);
         this.isPluginLoaded = (pluginId) => {
             const plugins = this.adaptableOptions.plugins || [];
             for (let i = 0, len = plugins.length; i < len; i++) {
@@ -274,7 +287,9 @@ class Adaptable {
         else {
             core_1.ModuleRegistry.registerModules(runtimeConfig.agGridModules);
         }
-        return Adaptable.initInternal(adaptableOptions);
+        return Adaptable.initInternal(adaptableOptions, {
+            supressReact18RenderWarning: true,
+        });
     }
     /**
      * Lazy static constructor for Adaptable
@@ -336,7 +351,28 @@ class Adaptable {
     // the 'old' constructor which takes an Adaptable adaptable object
     // this is still used internally but should not be used externally as a preference
     async init(adaptableOptions, runtimeConfig, _staticInit) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (runtimeConfig) {
+            this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
+            if (runtimeConfig.renderReactRoot) {
+                this.renderReactRoot = (el, container) => {
+                    const unmount = runtimeConfig.renderReactRoot(el, container);
+                    return () => {
+                        // we used to capture here because of FloatingFilters/Filters - see FloatingFilterWrapper and FilterWrapper
+                        // as we didn't have a native React implementation for our React wrapper
+                        // but we might need to do this again in the future for some other components that are not native React
+                        // captureReactWarnings();
+                        if (typeof unmount === 'function') {
+                            unmount();
+                        }
+                        // releaseReactWarnings();
+                    };
+                };
+            }
+            if (runtimeConfig.variant) {
+                this.variant = runtimeConfig.variant;
+            }
+        }
         if (!_staticInit) {
             (0, LoggingHelper_1.ConsoleLogWarning)(`
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -389,6 +425,7 @@ class Adaptable {
         this.initStore();
         // create the services
         this.LicenseService = this.initLicenseService();
+        this.ChartingService = new ChartingService_1.ChartingService(this.api);
         this.ValidationService = new ValidationService_1.ValidationService(this.api);
         this.ReportService = new ReportService_1.ReportService(this.api);
         this.ModuleService = new ModuleService_1.ModuleService(this.api);
@@ -397,6 +434,7 @@ class Adaptable {
         this.QueryLanguageService = new QueryLanguageService_1.QueryLanguageService(this.api);
         this.AlertService = new AlertService_1.AlertService(this.api);
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
+        // @ts-ignore
         this.RowEditService = new RowEditService_1.RowEditService(this.api);
         this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.internalApi.getAdaptableOptions());
         this.forPlugins((plugin) => plugin.afterInitServices(this));
@@ -417,12 +455,15 @@ class Adaptable {
             abColDefDate: (_d = this.gridOptions.columnTypes.abColDefDate) !== null && _d !== void 0 ? _d : {},
             abColDefObject: (_e = this.gridOptions.columnTypes.abColDefObject) !== null && _e !== void 0 ? _e : {},
             abColDefCustom: (_f = this.gridOptions.columnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
+            abColDefNumberArray: (_g = this.gridOptions.columnTypes.abColDefNumberArray) !== null && _g !== void 0 ? _g : {},
         });
         if (this.gridOptions.columnTypes.abColDefNumber.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefNumber.cellEditor = AdaptableNumberEditor_1.AdaptableNumberEditor;
+            this.gridOptions.columnTypes.abColDefNumber.cellEditor =
+                this.variant === 'react' ? AdaptableNumberEditor_1.ReactAdaptableNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
         }
         if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
+            this.gridOptions.columnTypes.abColDefDate.cellEditor =
+                this.variant === 'react' ? AdaptableDateEditor_1.ReactAdaptableDateEditor : AdaptableDateEditor_1.AdaptableDateEditor;
         }
         // validate the provided AdaptableOptions
         this.MetamodelService.validateAdaptableOptionsValues();
@@ -456,26 +497,20 @@ class Adaptable {
                 AdaptableHelper_1.default.checkValidPrimaryKey(this);
             }, (e) => {
                 (0, LoggingHelper_1.ConsoleLogError)('Failed to Init Modules : ', e);
-                // for now we initiliaze the grid even if initialising Modules has failed (perhaps revisit this?)
+                // for now we initialize the grid even if initialising Modules has failed (perhaps revisit this?)
                 this.initInternalGridLogic();
                 this.api.internalApi.hideLoadingScreen(); // doesnt really help but at least clears the screen
             }).then(async () => {
                 this.api.internalApi.hideLoadingScreen();
                 this.isInitialised = true;
                 this._adaptableReady = true;
-                // setTimeout(() => {
-                // this.api.eventApi.emit('AdaptableReady', {
-                //   adaptableApi: this.api,
-                //   gridOptions: this.adaptableOptions.gridOptions,
-                // });
-                // }, 0);
             });
             if (this.abContainerElement == null) {
                 this.abContainerElement = this.getAdaptableContainerElement();
             }
             if (this.abContainerElement != null) {
                 this.abContainerElement.innerHTML = '';
-                ReactDOM.render((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), this.abContainerElement);
+                this.unmountReactRoot = this.renderReactRoot((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), this.abContainerElement);
             }
             // create debounce methods that take a time based on user settings
             this.throttleFilterOnEditDataChange = (0, throttle_1.default)(
@@ -866,7 +901,7 @@ class Adaptable {
                 allColumns.push(this.createAdaptableColumn(agGridColumn, colsToGroups));
             }
         });
-        this.api.internalApi.setColumns(allColumns);
+        this.api.gridApi.internalApi.setColumns(allColumns);
     }
     createAdaptableColumn(agGridColumn, colsToGroups) {
         const abColumn = this.agGridHelper.createAdaptableColumnFromAgGridColumn(agGridColumn, colsToGroups);
@@ -888,72 +923,108 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnCellStyle(abColumn, formatColumn, params) {
-        if (!formatColumn.IncludeGroupedRows && this.isGroupRowNode(params.node)) {
+    getStyledColumnStyle(styledColumn, abColumn, params) {
+        let style = {};
+        const gradientStyle = styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.GradientStyle;
+        if (params.value === undefined) {
             return;
         }
-        if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-            return;
+        let colValue = params.value;
+        if (this.api.gridApi.isGroupRowNode(params.node)) {
+            if (styledColumn.IncludeGroupedRows) {
+                const minColumnValue = this.api.styledColumnApi.internalApi.getMinValueForNumericColumn(abColumn);
+                const maxColumnValue = this.api.styledColumnApi.internalApi.getMaxValueForNumericColumn(abColumn);
+                /**
+                 * Color should always be in bounds, it should not overflow.
+                 * If the value is out of range, it shoul set the maximum/minimum color.
+                 */
+                colValue = (0, clamp_1.default)(params.value, minColumnValue, maxColumnValue);
+            }
+            else {
+                return style;
+            }
         }
-        let style = {};
-        // percent bar && do we show text
-        const columnStyle = formatColumn.ColumnStyle;
-        if (columnStyle) {
-            const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
-            if (gradientStyle) {
-                const min = this.api.formatColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
-                const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
-                const clampedValue = (0, clamp_1.default)(params.value, min, max);
-                let cellBackColor;
-                let reverseGradient = false;
-                if (gradientStyle.ColumnComparison) {
-                    cellBackColor = gradientStyle.ColumnComparison.Color;
-                }
-                else {
-                    const matchingRange = gradientStyle.CellRanges.find((r) => (r.Min == 'Col-Min' || r.Min <= clampedValue) &&
-                        (r.Max == 'Col-Max' || r.Max >= clampedValue));
-                    if (matchingRange) {
-                        cellBackColor = matchingRange.Color;
-                        reverseGradient = matchingRange.ReverseGradient;
-                    }
-                }
-                const increase = Math.abs(max - min);
-                const percentage = ((params.value - min) / increase) * 100;
-                let alpha = Number((percentage / 100).toPrecision(2));
-                if (reverseGradient) {
-                    alpha = 1 - alpha;
+        if (gradientStyle) {
+            const min = this.api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, colValue);
+            const max = this.api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, colValue);
+            let cellBackColor;
+            let reverseGradient = false;
+            if (gradientStyle.ColumnComparison) {
+                cellBackColor = gradientStyle.ColumnComparison.Color;
+            }
+            else {
+                const matchingRange = this.api.styledColumnApi.internalApi.findRangeForColumn(gradientStyle.CellRanges, abColumn, gradientStyle.RangeValueType, colValue);
+                if (matchingRange) {
+                    cellBackColor = matchingRange.Color;
+                    reverseGradient = matchingRange.ReverseGradient;
                 }
-                const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
-                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
             }
-            if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
-                style.paddingTop = 0;
-                style.paddingBottom = 0;
+            const increase = Math.abs(max - min);
+            const percentage = ((colValue - min) / increase) * 100;
+            let alpha = Number((percentage / 100).toPrecision(2));
+            if (reverseGradient) {
+                alpha = 1 - alpha;
+            }
+            const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
+            // if no range match, do not apply color (black in this case)
+            if (cellBackColor) {
+                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
             }
         }
-        else if (formatColumn.Style) {
-            style = this.convertAdaptableStyleToCSS(formatColumn.Style);
+        if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
+            style.paddingTop = 0;
+            style.paddingBottom = 0;
         }
-        if (formatColumn.CellAlignment) {
-            switch (formatColumn.CellAlignment) {
-                case 'Left':
-                    style.textAlign = 'left';
-                    break;
-                case 'Right':
-                    style.textAlign = 'right';
-                    break;
-                case 'Center':
-                    style.textAlign = 'center';
-                    break;
+        return style;
+    }
+    getFormatColumnAdaptableStyle(formatColumns) {
+        // first has more precedence, then they need to be applied in reverse order
+        return formatColumns.reduceRight((style, formatColumn) => {
+            const formatColumnStyle = formatColumn.Style
+                ? this.convertAdaptableStyleToCSS(formatColumn.Style)
+                : {};
+            if (formatColumn.CellAlignment) {
+                switch (formatColumn.CellAlignment) {
+                    case 'Left':
+                        style.textAlign = 'left';
+                        break;
+                    case 'Right':
+                        style.textAlign = 'right';
+                        break;
+                    case 'Center':
+                        style.textAlign = 'center';
+                        break;
+                }
             }
+            return Object.assign(Object.assign({}, style), formatColumnStyle);
+        }, {});
+    }
+    getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params) {
+        if (!activeFormatColumnsWithStyle.length) {
+            return {};
         }
-        return style;
+        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
+            return this.api.formatColumnApi.internalApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params);
+        });
+        return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
+    }
+    getFormatColumnCellClass(formatColumns, abColumn, params) {
+        const classNames = formatColumns
+            .map((formatColumn) => {
+            var _a, _b;
+            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                this.api.formatColumnApi.internalApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params)) {
+                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x);
+        return classNames;
     }
     getActiveAlertWithHighlightCell(col, params) {
-        return this.api.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
+        return this.api.alertApi.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
     }
     getActiveAlertWithHighlightRow(params) {
-        return this.api.internalApi.getAdaptableAlertWithHighlightRow(params.node);
+        return this.api.alertApi.internalApi.getAdaptableAlertWithHighlightRow(params.node);
     }
     getAlertCellStyle(col, params) {
         const alert = this.getActiveAlertWithHighlightCell(col, params);
@@ -1001,7 +1072,7 @@ class Adaptable {
         const primaryKey = params.node.aggData
             ? params.node.id
             : this.getPrimaryKeyValueFromRowNode(params.node);
-        const flashingCell = this.api.internalApi.getAdaptableFlashingCellFor(primaryKey, col.columnId);
+        const flashingCell = this.api.flashingCellApi.internalApi.getAdaptableFlashingCellFor(primaryKey, col.columnId);
         if (!flashingCell) {
             return {};
         }
@@ -1016,7 +1087,7 @@ class Adaptable {
         const primaryKey = params.node.aggData
             ? params.node.id
             : this.getPrimaryKeyValueFromRowNode(params.node);
-        const flashingCell = this.api.internalApi.getAdaptableFlashingCellFor(primaryKey, col.columnId);
+        const flashingCell = this.api.flashingCellApi.internalApi.getAdaptableFlashingCellFor(primaryKey, col.columnId);
         if (!flashingCell) {
             return;
         }
@@ -1078,7 +1149,7 @@ class Adaptable {
         }
         const gridCell = this.getGridCellFromRowNode(params.node, abColumn.columnId);
         if (gridCell) {
-            if (this.api.gridApi.areCellsEditable([gridCell])) {
+            if (this.api.gridApi.isCellEditable(gridCell)) {
                 return this.convertAdaptableStyleToCSS(editableCellStyle);
             }
         }
@@ -1091,45 +1162,18 @@ class Adaptable {
         }
         const gridCell = this.getGridCellFromRowNode(params.node, abColumn.columnId);
         if (gridCell) {
-            if (!this.api.gridApi.areCellsEditable([gridCell])) {
+            if (!this.api.gridApi.isCellEditable(gridCell)) {
                 return this.convertAdaptableStyleToCSS(editableCellStyle);
             }
         }
         return undefined;
     }
-    getConditionalStyleCellStyle(conditionalStyles = [], abColumn, params) {
-        const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
-        const result = conditionalStyles.reduce((result, conditionalStyle) => {
-            if (module.isConditionalStyleActiveForColumn(conditionalStyle, abColumn, params)) {
-                return Object.assign(Object.assign({}, result), conditionalStyle.Style);
-            }
-            else {
-                return result;
-            }
-        }, {});
-        return this.convertAdaptableStyleToCSS(result);
-    }
-    getConditionalStyleCellClass(conditionalStyles = [], abColumn, params) {
-        const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
-        let classNames = conditionalStyles
-            .map((conditionalStyle) => {
-            var _a, _b;
-            if (((_a = conditionalStyle.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
-                module.isConditionalStyleActiveForColumn(conditionalStyle, abColumn, params)) {
-                return (_b = conditionalStyle.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
-            }
-        })
-            .filter((x) => !!x);
-        return classNames;
-    }
     getEditableCellClass(abColumn, params) {
         const editableCellStyle = this.api.userInterfaceApi.getEditableCellStyle();
         if (!(editableCellStyle === null || editableCellStyle === void 0 ? void 0 : editableCellStyle.ClassName)) {
             return null;
         }
-        const isCellEditable = this.api.gridApi.areCellsEditable([
-            this.getGridCellFromRowNode(params.node, abColumn.columnId),
-        ]);
+        const isCellEditable = this.api.gridApi.isCellEditable(this.getGridCellFromRowNode(params.node, abColumn.columnId));
         return isCellEditable ? editableCellStyle.ClassName : null;
     }
     getReadonlyCellClass(abColumn, params) {
@@ -1137,9 +1181,7 @@ class Adaptable {
         if (!(readonlyCellStyle === null || readonlyCellStyle === void 0 ? void 0 : readonlyCellStyle.ClassName)) {
             return null;
         }
-        const isCellReadonly = !this.api.gridApi.areCellsEditable([
-            this.getGridCellFromRowNode(params.node, abColumn.columnId),
-        ]);
+        const isCellReadonly = !this.api.gridApi.isCellEditable(this.getGridCellFromRowNode(params.node, abColumn.columnId));
         return isCellReadonly ? readonlyCellStyle.ClassName : null;
     }
     isQuickSearchActive(abColumn, params) {
@@ -1233,7 +1275,7 @@ class Adaptable {
             this.api.layoutApi.createOrUpdateLayout(layout);
         }
         else {
-            this.api.internalApi.updateCurrentDraftLayout(layout);
+            this.api.layoutApi.internalApi.updateCurrentDraftLayout(layout);
         }
     }
     setLayout(layout) {
@@ -1262,12 +1304,6 @@ class Adaptable {
         let sortIndex = 0;
         const sortModelMap = ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).reduce((acc, customSort) => {
             const colId = customSort.ColumnId;
-            if (!layoutColumnsMap[colId]) {
-                // pivot layouts may have no pivot columns, only aggregation columns
-                if (layout.AggregationColumns[colId] == undefined) {
-                    return acc;
-                }
-            }
             acc[colId] = {
                 colId,
                 sort: customSort.SortOrder === 'Asc' ? 'asc' : 'desc',
@@ -1288,8 +1324,8 @@ class Adaptable {
                 [];
         let isChanged = false;
         const colsToAutoSize = {};
-        let newColState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState);
-        newColState = newColState
+        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState);
+        newColumnsState = newColumnsState
             .map((colState) => {
             var _a, _b, _c, _d, _e;
             const { colId } = colState;
@@ -1301,7 +1337,8 @@ class Adaptable {
             if (layout.ColumnWidthMap && layout.ColumnWidthMap[colId] != null) {
                 newColState.width = layout.ColumnWidthMap[colId];
             }
-            else {
+            else if (!hide) {
+                // autosize only the columns which are part of the selected layout
                 colsToAutoSize[colId] = true;
             }
             newColState.rowGroupIndex =
@@ -1365,7 +1402,7 @@ class Adaptable {
             // order changed
             const toString = (c) => `${c.colId}-${c.rowGroupIndex}-${c.pivotIndex}-${c.aggFunc}-${c.pinned}-${c.width}-${c.hide}`;
             const oldColStateString = columnsState.map(toString).join(',');
-            const newColStateString = newColState.map(toString).join(',');
+            const newColStateString = newColumnsState.map(toString).join(',');
             isChanged = newColStateString != oldColStateString;
         }
         const pivoted = !!layout.EnablePivot;
@@ -1396,7 +1433,7 @@ class Adaptable {
         this.gridOptions.columnApi.getColumns().forEach((col) => {
             const colDef = col.getColDef();
             const colId = col.getColId();
-            const abColumn = this.api.columnApi.getColumnFromId(colId);
+            const abColumn = this.api.columnApi.getColumnWithColumnId(colId);
             const colSetupInfo = {
                 col,
                 colDef,
@@ -1418,7 +1455,7 @@ class Adaptable {
                 this.gridOptions.columnApi.setPivotMode(pivoted);
             }
             this.gridOptions.columnApi.applyColumnState({
-                state: newColState,
+                state: newColumnsState,
                 applyOrder: true,
             });
             this.api.gridApi.setColumnSorts(layout.ColumnSorts);
@@ -1431,14 +1468,7 @@ class Adaptable {
             GridApi_setColumnDefs.call(this.gridOptions.api, this.gridOptions.api.getColumnDefs());
             // these updates need to be at the end, the methods are based on the grid state/col defs
             // the layout needs to be applied for them to work
-            if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts() &&
-                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues)) {
-                this.expandRowGroupsForValues(layout.ExpandedRowGroupValues);
-            }
-            if (this.adaptableOptions.layoutOptions.displayRowGroups === 'expanded') {
-                this.expandAllRowGroups();
-            }
-            // this.updateColumnsIntoStore();// no longer needed
+            this.updateRowGroupsExpandedState(layout);
         }
         const colsToAutoSizeArray = Object.keys(colsToAutoSize);
         if (pivoted && ((_d = (_c = this.adaptableOptions) === null || _c === void 0 ? void 0 : _c.layoutOptions) === null || _d === void 0 ? void 0 : _d.autoSizeColumnsInPivotLayout)) {
@@ -1456,9 +1486,8 @@ class Adaptable {
                     (_a = this.gridOptions.columnApi) === null || _a === void 0 ? void 0 : _a.autoSizeAllColumns();
                 }, 200);
             }, 100);
-            return;
         }
-        if (((_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.layoutOptions) === null || _f === void 0 ? void 0 : _f.autoSizeColumnsInLayout) &&
+        else if (((_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.layoutOptions) === null || _f === void 0 ? void 0 : _f.autoSizeColumnsInLayout) &&
             colsToAutoSizeArray.length) {
             (_g = this.gridOptions.columnApi) === null || _g === void 0 ? void 0 : _g.autoSizeColumns(colsToAutoSizeArray);
         }
@@ -1468,13 +1497,26 @@ class Adaptable {
             }
         });
     }
+    updateRowGroupsExpandedState(layout) {
+        if (!layout) {
+            layout = this.api.layoutApi.getCurrentLayout();
+        }
+        if (this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts() &&
+            ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues)) {
+            this.expandRowGroupsForValues(layout.ExpandedRowGroupValues);
+        }
+        if (this.adaptableOptions.layoutOptions.displayRowGroups === 'expanded') {
+            this.expandAllRowGroups();
+        }
+    }
     /*
      * This is the opposite of setLayout
      */
     updateLayoutFromGrid() {
+        var _a, _b;
         const currentLayout = this.api.layoutApi.getCurrentLayout();
         const layout = Object.assign({}, currentLayout);
-        const columnOrder = [];
+        let columnOrder = [];
         const columnFlexes = {};
         const pinnedColumns = {};
         const columnSorts = [];
@@ -1524,6 +1566,12 @@ class Adaptable {
         });
         groupedColumns = groupedColumns.filter((x) => !!x);
         pivotedColumns = pivotedColumns.filter((x) => !!x);
+        if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.restoreUngroupedColumns) {
+            columnOrder = this.restoreUnGroupColumnOrder({
+                columnOrder,
+                newGroupColumns: groupedColumns,
+            });
+        }
         layout.ColumnWidthMap = columnWidths;
         //  layout.ColumnFlexMap = columnFlexes;
         layout.PinnedColumnsMap = pinnedColumns;
@@ -1532,11 +1580,14 @@ class Adaptable {
         layout.RowGroupedColumns = groupedColumns;
         if (Object.keys(aggregatedColumns).length) {
             // ag-grid aggregations are not 1-1 with adaptable column-aggregations
-            layout.AggregationColumns = this.handleUpdateWeightedAvgFromGrid(aggregatedColumns);
+            layout.AggregationColumns = this.mapAggregationColumnsFromGrid(aggregatedColumns, currentLayout);
+        }
+        else {
+            layout.AggregationColumns = {};
         }
         layout.EnablePivot = this.gridOptions.columnApi.isPivotMode();
         layout.PivotColumns = pivotColumns;
-        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts()) {
+        if (this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts()) {
             layout.ExpandedRowGroupValues = this.getExpandRowGroupsKeys();
         }
         this.persistLayout(layout);
@@ -1574,7 +1625,7 @@ class Adaptable {
                         for (const column of rangeSelection.columns) {
                             if (column != null) {
                                 const colId = column.getColId();
-                                const selectedColumn = this.api.columnApi.getColumnFromId(colId);
+                                const selectedColumn = this.api.columnApi.getColumnWithColumnId(colId);
                                 if (selectedColumn &&
                                     columns.find((c) => c.columnId == selectedColumn.columnId) == null) {
                                     columns.push(selectedColumn);
@@ -1598,7 +1649,7 @@ class Adaptable {
             columns: columns,
             gridCells: selectedCells,
         };
-        this.api.internalApi.setSelectedCells(selectedCellInfo);
+        this.api.gridApi.internalApi.setSelectedCells(selectedCellInfo);
         this._emit('CellsSelected');
         this.agGridHelper.fireSelectionChangedEvent();
         return selectedCellInfo;
@@ -1633,7 +1684,7 @@ class Adaptable {
             });
         }
         const selectedRowInfo = { gridRows: selectedRows };
-        this.api.internalApi.setSelectedRows(selectedRowInfo);
+        this.api.gridApi.internalApi.setSelectedRows(selectedRowInfo);
         this.agGridHelper.fireSelectionChangedEvent();
         return selectedRowInfo;
     }
@@ -1778,7 +1829,7 @@ class Adaptable {
         let permittedMap = new Map();
         // check if there are permitted column values for that column
         // NB.  this currently contains a small bug as we dont check for visibility so if using permitted values then ALL are returned :(
-        const abColumn = this.api.columnApi.getColumnFromId(columnId);
+        const abColumn = this.api.columnApi.getColumnWithColumnId(columnId);
         const permittedValuesForColumn = this.api.userInterfaceApi.getPermittedValuesForColumn(abColumn);
         if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(permittedValuesForColumn)) {
             permittedValuesForColumn.forEach((pv) => {
@@ -1832,23 +1883,6 @@ class Adaptable {
             return undefined;
         }
     }
-    isCustomRenderedColumn(column) {
-        if (!column || column.isGrouped) {
-            return false;
-        }
-        // we need to return false if the column has a cell renderer i think...
-        const colDef = this.gridOptions.api.getColumnDef(column.columnId);
-        if (colDef && colDef.cellRenderer != null) {
-            return true;
-        }
-        if (this.api.columnApi.isFormatNumericStyleColumn(column)) {
-            return true;
-        }
-        if (this.api.columnApi.isBooleanColumn(column)) {
-            return true;
-        }
-        return false;
-    }
     getDisplayValue(primaryKey, columnId) {
         let returnValue;
         if (this.useRowNodeLookUp) {
@@ -1873,15 +1907,15 @@ class Adaptable {
         if (rowNode == null) {
             return undefined;
         }
-        const abColumn = this.api.columnApi.getColumnFromId(columnId);
+        const abColumn = this.api.columnApi.getColumnWithColumnId(columnId);
         const pkValue = this.getPrimaryKeyValueFromRowNode(rowNode);
         const rawValue = this.getRawValueFromRowNode(rowNode, columnId);
         const displayValue = this.getDisplayValueFromRawValue(rowNode, columnId, rawValue);
-        const normalisedvalue = this.getNormalisedValueFromRowValue(rawValue, abColumn);
+        const normalisedValue = this.getNormalisedValueFromRawValue(rawValue, abColumn);
         return {
             rawValue: rawValue,
             displayValue: displayValue,
-            normalisedValue: normalisedvalue,
+            normalisedValue: normalisedValue,
             column: abColumn,
             primaryKeyValue: pkValue,
             rowNode: rowNode,
@@ -1895,15 +1929,16 @@ class Adaptable {
         return this.getDisplayValueFromRawValue(rowNode, columnId, rawValue);
     }
     getDisplayValueFromRawValue(rowNode, columnId, rawValue) {
-        const abColumn = this.api.columnApi.getColumnFromId(columnId);
-        const isRenderedColumn = this.api.columnApi.isFormatNumericStyleColumn(abColumn);
-        if (isRenderedColumn) {
-            const colDef = this.gridOptions.api.getColumnDef(columnId);
-            if (typeof colDef.valueFormatter == 'function') {
-                return this.getFormattedValue(rowNode, rawValue, columnId, colDef, colDef.valueFormatter);
-            }
-            return this.agGridHelper.getCleanValue(rawValue);
-        }
+        // no need for this case, it's handled below after the ActionColumn logic
+        // const abColumn: AdaptableColumn = this.api.columnApi.getColumnWithColumnId(columnId);
+        // const isCustomRenderedColumn = this.api.styledColumnApi.hasPercentBarStyle(columnId);
+        // if (isCustomRenderedColumn) {
+        //   const colDef = this.gridOptions.api!.getColumnDef(columnId);
+        //   if (typeof colDef.valueFormatter == 'function') {
+        //     return this.getFormattedValue(rowNode, rawValue, columnId, colDef, colDef.valueFormatter);
+        //   }
+        //   return this.agGridHelper.getCleanValue(rawValue);
+        // }
         const isActionColumn = this.api.columnApi.isActionColumn(columnId);
         if (isActionColumn) {
             return this.agGridHelper.getCleanValue(rawValue);
@@ -1942,7 +1977,7 @@ class Adaptable {
         };
         return formatterFn(params);
     }
-    getNormalisedValueFromRowValue(rawValue, column) {
+    getNormalisedValueFromRawValue(rawValue, column) {
         if (!column) {
             return rawValue;
         }
@@ -2015,9 +2050,13 @@ class Adaptable {
         }
         return rowNodes;
     }
-    forAllRowNodesDo(func) {
+    forAllRowNodesDo(func, config) {
         this.gridOptions.api.forEachNode((rowNode) => {
-            func(rowNode);
+            const includeGroupRows = (config === null || config === void 0 ? void 0 : config.includeGroupRows) || !this.isGroupRowNode(rowNode);
+            const filterFnFulfilled = !(config === null || config === void 0 ? void 0 : config.filterFn) || (config === null || config === void 0 ? void 0 : config.filterFn(rowNode));
+            if (includeGroupRows && filterFnFulfilled) {
+                func(rowNode);
+            }
         });
     }
     forAllVisibleRowNodesDo(func) {
@@ -2034,13 +2073,7 @@ class Adaptable {
     }
     getAllRowNodes(config) {
         let rowNodes = [];
-        this.gridOptions.api.forEachNode((rowNode, rowIndex) => {
-            const includeGroupRows = (config === null || config === void 0 ? void 0 : config.includeGroupRows) || !this.isGroupRowNode(rowNode);
-            const filterFnFulfilled = !(config === null || config === void 0 ? void 0 : config.filterFn) || (config === null || config === void 0 ? void 0 : config.filterFn(rowNode));
-            if (includeGroupRows && filterFnFulfilled) {
-                rowNodes.push(rowNode);
-            }
-        });
+        this.forAllRowNodesDo((rowNode) => rowNodes.push(rowNode), config);
         return rowNodes;
     }
     getRowsInViewport() {
@@ -2129,6 +2162,9 @@ class Adaptable {
         };
         api.refreshCells(refreshCellParams);
     }
+    refreshColumns(columns, forceUpdate, suppressFlash) {
+        this.refreshCells(null, columns, forceUpdate, suppressFlash);
+    }
     jumpToRow(rowNode) {
         this.gridOptions.api.ensureNodeVisible(rowNode, 'middle');
     }
@@ -2149,7 +2185,7 @@ class Adaptable {
     }
     getColDefsForFreeTextColumns() {
         const defaultFreeTextColumnSettings = (0, ObjectFactory_1.CreateEmptyFreeTextColumn)().FreeTextColumnSettings;
-        return this.api.freeTextColumnApi.getAllFreeTextColumn().map((freeTextColumn) => {
+        return this.api.freeTextColumnApi.getFreeTextColumns().map((freeTextColumn) => {
             var _a;
             const freeTextColumnSettings = Object.assign(Object.assign({}, defaultFreeTextColumnSettings), freeTextColumn.FreeTextColumnSettings);
             const dataTypeEditor = freeTextColumn.DataType === 'Number'
@@ -2189,7 +2225,7 @@ class Adaptable {
                 cellRenderer: freeTextColumn.DataType && freeTextColumn.DataType == 'Boolean'
                     ? this.agGridHelper.createCheckboxRendererComp(freeTextColumn.ColumnId, false)
                     : undefined,
-                valueGetter: (params) => this.api.freeTextColumnApi.getFreeTextColumnValueFromRowNode(freeTextColumn, params.node),
+                valueGetter: (params) => this.api.freeTextColumnApi.getFreeTextColumnValueForRowNode(freeTextColumn, params.node),
             };
             if (freeTextColumnSettings.HeaderToolTip) {
                 newColDef.headerTooltip = freeTextColumnSettings.HeaderToolTip;
@@ -2215,61 +2251,68 @@ class Adaptable {
         }
     }
     getColDefsForRowEditColumns() {
-        const actionRowButtons = this.adaptableOptions.actionOptions.actionRowButtons;
+        const actionRowButtons = this.api.actionApi.getActionRowButtons();
         if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
+        const defaultEditButtonConfiguration = {
+            create: {
+                icon: {
+                    name: 'add-row',
+                },
+                tooltip: 'Create',
+                onClick: () => {
+                    this.api.actionApi.displayCreateActionRow();
+                },
+            },
+            edit: {
+                icon: {
+                    name: 'edit',
+                },
+                tooltip: 'Edit',
+                onClick: (button, context) => {
+                    this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
+                },
+            },
+            clone: {
+                icon: {
+                    name: 'clone',
+                },
+                tooltip: 'Clone',
+                onClick: (button, context) => {
+                    this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
+                },
+            },
+            delete: {
+                icon: {
+                    name: 'delete',
+                },
+                tooltip: 'Delete',
+                onClick: (button, context) => {
+                    var _a, _b;
+                    const eventInfo = {
+                        type: 'rowDeleted',
+                        rowNode: context.rowNode,
+                        adaptableApi: context.adaptableApi,
+                    };
+                    this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                    (_b = (_a = this.adaptableOptions.actionOptions.actionRowButtonOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                },
+            },
+        };
         const editButtons = actionRowButtons
-            .map((buttonName) => {
-            const button = buttonName === 'create'
-                ? {
-                    icon: {
-                        name: 'add-row',
-                    },
-                    tooltip: 'Create',
-                    onClick: () => {
-                        this.api.actionApi.displayCreateActionRow();
-                    },
-                }
-                : buttonName === 'edit'
-                    ? {
-                        icon: {
-                            name: 'edit',
-                        },
-                        tooltip: 'Edit',
-                        onClick: (button, context) => {
-                            this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
-                        },
-                    }
-                    : buttonName === 'clone'
-                        ? {
-                            icon: {
-                                name: 'clone',
-                            },
-                            tooltip: 'Clone',
-                            onClick: (button, context) => {
-                                this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
-                            },
-                        }
-                        : buttonName === 'delete'
-                            ? {
-                                icon: {
-                                    name: 'delete',
-                                },
-                                tooltip: 'Delete',
-                                onClick: (button, context) => {
-                                    var _a, _b;
-                                    const eventInfo = {
-                                        type: 'rowDeleted',
-                                        rowNode: context.rowNode,
-                                        adaptableApi: context.adaptableApi,
-                                    };
-                                    this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
-                                    (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
-                                },
-                            }
-                            : undefined;
-            return button;
+            .map((actionRowButtonType) => {
+            var _a, _b;
+            const defaultButtonConfig = defaultEditButtonConfiguration[actionRowButtonType];
+            if (!defaultButtonConfig) {
+                // should NOT happen unless the user sent some invalid button type in the predefined config
+                return;
+            }
+            const customButtonConfig = (_b = (_a = this.adaptableOptions.actionOptions.actionRowButtonOptions).customConfiguration) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                adaptableApi: this.api,
+                actionRowButtonType,
+            });
+            return Object.assign(Object.assign({}, defaultButtonConfig), customButtonConfig);
         })
             .filter(Boolean);
         if (!editButtons.length) {
@@ -2285,8 +2328,8 @@ class Adaptable {
                 colId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 hide: false,
                 editable: false,
-                // 17px is the icon widht + left&right padding
-                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 17) + 3,
+                // 15px is the icon width + left&right padding + left&right border
+                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 15) + 2,
                 resizable: false,
                 lockVisible: true,
                 suppressColumnsToolPanel: true,
@@ -2296,10 +2339,10 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
+                pinned: this.adaptableOptions.actionOptions.actionRowButtonOptions.position === 'pinnedRight'
                     ? 'right'
                     : 'left',
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 cellRendererParams: {
                     actionColumn: rowEditActionColumn,
                 },
@@ -2314,7 +2357,7 @@ class Adaptable {
             suppressMenu: false,
             suppressMovable: false,
         };
-        return this.api.actionApi.getAllActionColumn().map((actionColumn) => {
+        return this.api.actionApi.getActionColumns().map((actionColumn) => {
             const actionColumnSettings = Object.assign(Object.assign({}, defaultActionColumnSettings), actionColumn.actionColumnSettings);
             const newColDef = {
                 headerName: actionColumn.friendlyName ? actionColumn.friendlyName : actionColumn.columnId,
@@ -2328,7 +2371,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
             };
             (0, LoggingHelper_1.LogAdaptableInfo)('Setting up Action Column: ' + actionColumn.columnId);
@@ -2391,7 +2434,7 @@ class Adaptable {
     }
     getColDefsForCalculatedColumns() {
         const defaultCalculatedColumnSettings = (0, ObjectFactory_1.CreateEmptyCalculatedColumn)().CalculatedColumnSettings;
-        return this.api.calculatedColumnApi.getAllCalculatedColumn().map((calculatedColumn) => {
+        return this.api.calculatedColumnApi.getCalculatedColumns().map((calculatedColumn) => {
             const calculatedColumnSettings = Object.assign(Object.assign({}, defaultCalculatedColumnSettings), calculatedColumn.CalculatedColumnSettings);
             if (!calculatedColumnSettings.DataType) {
                 calculatedColumnSettings.DataType =
@@ -2404,7 +2447,7 @@ class Adaptable {
             if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(calculatedColumnSettings.ColumnTypes)) {
                 columnTypes.push(...calculatedColumnSettings.ColumnTypes);
             }
-            const isExternalEvaluation = !this.api.internalApi.evaluateExpressionInAdaptableQL('CalculatedColumn', this.api.queryLanguageApi.getAdaptableQueryExpression(calculatedColumn.Query));
+            const isExternalEvaluation = !this.api.queryLanguageApi.internalApi.evaluateExpressionInAdaptableQL('CalculatedColumn', this.api.queryLanguageApi.getAdaptableQueryExpression(calculatedColumn.Query));
             const newColDef = {
                 headerName: calculatedColumn.FriendlyName
                     ? calculatedColumn.FriendlyName
@@ -2489,7 +2532,7 @@ class Adaptable {
         return this.gridOptions.api.getDisplayedRowAtIndex(firstDisplayedRowIndex);
     }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         if (this.gridOptions && this.gridOptions.api) {
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_FIRST_DATA_RENDERED, this.listenerFirstDataRendered);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.listenerPivotModeChanged);
@@ -2563,37 +2606,37 @@ class Adaptable {
             return;
         }
         if (abContainerElement != null) {
-            ReactDOM.unmountComponentAtNode(abContainerElement);
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         }
         this.gridContainerElement = null;
         this.abContainerElement = null;
-        (_a = this.adaptableStore) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.adaptableStore) === null || _b === void 0 ? void 0 : _b.destroy();
         this.adaptableStore = null;
         this.gridOptions = null;
         this.adaptableOptions = null;
-        (_c = (_b = this.CalculatedColumnExpressionService) === null || _b === void 0 ? void 0 : _b.destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
+        (_d = (_c = this.CalculatedColumnExpressionService) === null || _c === void 0 ? void 0 : _c.destroy) === null || _d === void 0 ? void 0 : _d.call(_c);
         this.CalculatedColumnExpressionService = null;
-        (_e = (_d = this.DataService) === null || _d === void 0 ? void 0 : _d.destroy) === null || _e === void 0 ? void 0 : _e.call(_d);
+        (_f = (_e = this.DataService) === null || _e === void 0 ? void 0 : _e.destroy) === null || _f === void 0 ? void 0 : _f.call(_e);
         this.DataService = null;
-        (_g = (_f = this.EntitlementService) === null || _f === void 0 ? void 0 : _f.destroy) === null || _g === void 0 ? void 0 : _g.call(_f);
+        (_h = (_g = this.EntitlementService) === null || _g === void 0 ? void 0 : _g.destroy) === null || _h === void 0 ? void 0 : _h.call(_g);
         this.EntitlementService = null;
-        (_j = (_h = this.ReportService) === null || _h === void 0 ? void 0 : _h.destroy) === null || _j === void 0 ? void 0 : _j.call(_h);
+        (_k = (_j = this.ReportService) === null || _j === void 0 ? void 0 : _j.destroy) === null || _k === void 0 ? void 0 : _k.call(_j);
         this.ReportService = null;
-        (_l = (_k = this.ModuleService) === null || _k === void 0 ? void 0 : _k.destroy) === null || _l === void 0 ? void 0 : _l.call(_k);
+        (_m = (_l = this.ModuleService) === null || _l === void 0 ? void 0 : _l.destroy) === null || _m === void 0 ? void 0 : _m.call(_l);
         this.ModuleService = null;
-        (_o = (_m = this.ValidationService) === null || _m === void 0 ? void 0 : _m.destroy) === null || _o === void 0 ? void 0 : _o.call(_m);
+        (_p = (_o = this.ValidationService) === null || _o === void 0 ? void 0 : _o.destroy) === null || _p === void 0 ? void 0 : _p.call(_o);
         this.ValidationService = null;
-        (_q = (_p = this.QueryLanguageService) === null || _p === void 0 ? void 0 : _p.destroy) === null || _q === void 0 ? void 0 : _q.call(_p);
+        (_r = (_q = this.QueryLanguageService) === null || _q === void 0 ? void 0 : _q.destroy) === null || _r === void 0 ? void 0 : _r.call(_q);
         this.QueryLanguageService = null;
-        (_s = (_r = this.AlertService) === null || _r === void 0 ? void 0 : _r.destroy) === null || _s === void 0 ? void 0 : _s.call(_r);
+        (_t = (_s = this.AlertService) === null || _s === void 0 ? void 0 : _s.destroy) === null || _t === void 0 ? void 0 : _t.call(_s);
         this.AlertService = null;
-        (_u = (_t = this.TeamSharingService) === null || _t === void 0 ? void 0 : _t.destroy) === null || _u === void 0 ? void 0 : _u.call(_t);
+        (_v = (_u = this.TeamSharingService) === null || _u === void 0 ? void 0 : _u.destroy) === null || _v === void 0 ? void 0 : _v.call(_u);
         this.TeamSharingService = null;
-        (_w = (_v = this.RowEditService) === null || _v === void 0 ? void 0 : _v.destroy) === null || _w === void 0 ? void 0 : _w.call(_v);
+        (_x = (_w = this.RowEditService) === null || _w === void 0 ? void 0 : _w.destroy) === null || _x === void 0 ? void 0 : _x.call(_w);
         this.RowEditService = null;
-        (_y = (_x = this.MetamodelService) === null || _x === void 0 ? void 0 : _x.destroy) === null || _y === void 0 ? void 0 : _y.call(_x);
+        (_z = (_y = this.MetamodelService) === null || _y === void 0 ? void 0 : _y.destroy) === null || _z === void 0 ? void 0 : _z.call(_y);
         this.MetamodelService = null;
-        (_0 = (_z = this.LicenseService) === null || _z === void 0 ? void 0 : _z.destroy) === null || _0 === void 0 ? void 0 : _0.call(_z);
+        (_1 = (_0 = this.LicenseService) === null || _0 === void 0 ? void 0 : _0.destroy) === null || _1 === void 0 ? void 0 : _1.call(_0);
         this.LicenseService = null;
         this.isDestroyed = true;
     }
@@ -2793,9 +2836,13 @@ class Adaptable {
          * Action: Make the column invisible
          */
         this.gridOptions.api.addEventListener(core_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED, (this.listenerColumnRowGroupChanged = (params) => {
+            var _a, _b;
             if (this.api.internalApi.isGridInPivotMode()) {
                 return;
             }
+            if ((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.generalOptions) === null || _b === void 0 ? void 0 : _b.restoreUngroupedColumns) {
+                this.persistColumnIndexBeforeGrouping(params);
+            }
             if (this.adaptableOptions.columnOptions.hideColumnWhenGrouped === true &&
                 params.source !== 'api') {
                 params.columns.forEach((col) => {
@@ -2867,6 +2914,23 @@ class Adaptable {
                 }
             }
         }));
+        const eventsThatTriggerChartingChanges = [
+            core_1.Events.EVENT_CHART_CREATED,
+            /** Chart Range selection has changed */
+            core_1.Events.EVENT_CHART_RANGE_SELECTION_CHANGED,
+            /** Chart Options have changed */
+            core_1.Events.EVENT_CHART_OPTIONS_CHANGED,
+            /** Chart was destroyed */
+            core_1.Events.EVENT_CHART_DESTROYED,
+        ];
+        const chartingModule = this.ModuleService.getModuleById('Charting');
+        if (chartingModule.isModuleAvailable()) {
+            this.gridOptions.api.addGlobalListener((type, params) => {
+                if (ArrayExtensions_1.ArrayExtensions.ContainsItem(eventsThatTriggerChartingChanges, type)) {
+                    this.ChartingService.onChartModelChange(this.getChartModels(), type, params);
+                }
+            });
+        }
         /**
          * Row and Cell listeners created in 2020
          * These have supplanted many of the events we previously had and simplified things
@@ -2914,7 +2978,7 @@ class Adaptable {
                 if (!this.isGroupRowNode(node)) {
                     const currentQuery = this.api.queryApi.getCurrentQuery();
                     if (currentQuery) {
-                        const evaluateQueryOnClient = this.api.internalApi.evaluateExpressionInAdaptableQL('Query', currentQuery);
+                        const evaluateQueryOnClient = this.api.queryLanguageApi.internalApi.evaluateExpressionInAdaptableQL('Query', currentQuery);
                         if (evaluateQueryOnClient) {
                             const isCurrentQueryValid = this.api.queryLanguageApi.isValidBooleanExpression(currentQuery, ModuleConstants_1.QueryModuleId, `Invalid CurrentQuery '${currentQuery}'`);
                             if (!isCurrentQueryValid ||
@@ -2926,14 +2990,14 @@ class Adaptable {
                         }
                     }
                 }
-                const evaluateFilterOnClient = this.api.internalApi.evaluateExpressionInAdaptableQL('Filter');
+                const evaluateFilterOnClient = this.api.queryLanguageApi.internalApi.evaluateExpressionInAdaptableQL('Filter');
                 try {
                     // we then assess filters (if running locally)
                     if (evaluateFilterOnClient) {
                         const columnFilters = this.api.filterApi.getActiveColumnFilters();
                         if (columnFilters.length > 0) {
                             for (const columnFilter of columnFilters) {
-                                if (!this.api.filterApi.evaluateColumnFilter(columnFilter, node)) {
+                                if (!this.api.filterApi.internalApi.evaluateColumnFilter(columnFilter, node)) {
                                     return false;
                                 }
                             }
@@ -3019,7 +3083,7 @@ class Adaptable {
         cols.forEach((col) => {
             const colDef = col.getColDef();
             const colId = col.getColId();
-            const abColumn = this.api.columnApi.getColumnFromId(colId);
+            const abColumn = this.api.columnApi.getColumnWithColumnId(colId);
             const colSetupInfo = {
                 col,
                 colDef,
@@ -3139,16 +3203,18 @@ class Adaptable {
                 fontSize: null,
                 borderColor: null,
             };
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
-            const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
+            const activeFormatColumnsWithStyle = this.api.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(abColumn);
+            let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
+            if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
+                styledColumn = null;
+            }
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
-                const formatColumnCellStyle = formatColumn
-                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, params)
-                    : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params)), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), (!styledColumn
+                    ? this.getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params)
+                    : {})), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), (isQuickSearchActive ? quickSearchStyle : {})), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3156,13 +3222,7 @@ class Adaptable {
     }
     setupColumnCellClass({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellClass', (userCellClass) => {
-            var _a;
-            const formatColumn = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
-            const formatColumnStyleClassName = formatColumn && !formatColumn.IsSuspended ? (_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName : null;
-            const conditionalStyles = this.api.conditionalStyleApi
-                .getConditionalStylesForColumn(abColumn)
-                .filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName));
-            const hasConditionalStylesWithClassNames = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles);
+            const formatColumns = this.api.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
             const quickSearchStyleClassName = this.api.quickSearchApi.getQuickSearchStyle().ClassName;
             const hasQuickSearchStyleClassName = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyleClassName);
             const cellClass = (params) => {
@@ -3172,12 +3232,13 @@ class Adaptable {
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
                 const flashingClassName = this.getFlashingCellClass(abColumn, params);
+                const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
+                const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumnStyleClassName,
-                    hasConditionalStylesWithClassNames
-                        ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
+                    !hasStyledColumn && formatColumns.length
+                        ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
                     isQuickSearchActive ? quickSearchStyleClassName : null,
                     editableClassName,
@@ -3185,10 +3246,12 @@ class Adaptable {
                     highlightAlertClassName,
                     flashingClassName,
                 ]
-                    // we flatten the array because some rules ('userCellClass',conditionalStyles etc)  might return a string[]
+                    // we flatten the array because some rules ('userCellClass' etc)  might return a string[]
                     .flat()
                     .filter((x) => !!x);
-                return returnValue.length ? returnValue : undefined;
+                const result = returnValue.length ? returnValue : undefined;
+                // console.log(result);
+                return result;
             };
             return cellClass;
         });
@@ -3201,13 +3264,12 @@ class Adaptable {
         return excelClassName;
     }
     setupColumnCellEditor({ colId, col }) {
-        const adaptableColumn = this.api.columnApi.getColumnFromId(colId);
+        const adaptableColumn = this.api.columnApi.getColumnWithColumnId(colId);
         const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(adaptableColumn);
         const hasRichSelectCellEditor = this.isAgGridModulePresent(core_1.ModuleNames.RichSelectModule);
         this.setColDefProperty(col, 'cellEditor', () => {
-            var _a;
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(adaptableColumn);
-            if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && ((_a = formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle)) {
+            const styledColumn = this.api.styledColumnApi.getActiveStyledColumnForColumn(adaptableColumn);
+            if (styledColumn && !(styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) && styledColumn.CheckBoxStyle) {
                 return CheckboxRenderer_1.CheckboxEditor;
             }
             if (editLookUpItem) {
@@ -3234,43 +3296,44 @@ class Adaptable {
     }
     setupColumnCellRenderer({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellRenderer', () => {
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
-            if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn.ColumnStyle) {
-                if (formatColumn.ColumnStyle.PercentBarStyle) {
-                    return this.agGridHelper.createPercentBarRendererComp(formatColumn, abColumn);
+            const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(abColumn.columnId);
+            if (styledColumn && !styledColumn.IsSuspended) {
+                if (styledColumn.PercentBarStyle) {
+                    return this.agGridHelper.createPercentBarRendererComp(styledColumn, abColumn);
                 }
-                if (formatColumn.ColumnStyle.CheckBoxStyle) {
+                if (styledColumn.CheckBoxStyle) {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
                 }
+                if (styledColumn.SparkLineStyle) {
+                    return 'agSparklineCellRenderer';
+                }
+            }
+        });
+        this.setColDefProperty(col, 'cellRendererParams', (userDefined) => {
+            const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(abColumn.columnId);
+            if (styledColumn && !styledColumn.IsSuspended) {
+                if (styledColumn.SparkLineStyle) {
+                    const sparklineOptions = (0, merge_1.default)({}, userDefined === null || userDefined === void 0 ? void 0 : userDefined.sparklineOptions, styledColumn.SparkLineStyle.options);
+                    return Object.assign(Object.assign({}, userDefined), { sparklineOptions });
+                }
             }
         });
     }
     setupColumnTooltipValueGetter({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'tooltipValueGetter', () => {
-            var _a;
-            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumnId(colId);
-            if (formatColumn &&
-                !formatColumn.IsSuspended &&
-                formatColumn.ColumnStyle &&
-                formatColumn.ColumnStyle.PercentBarStyle &&
-                formatColumn.ColumnStyle.PercentBarStyle.ToolTipText) {
-                if ((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle) {
+            const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
+            if (styledColumn &&
+                !styledColumn.IsSuspended &&
+                styledColumn.PercentBarStyle &&
+                styledColumn.PercentBarStyle.ToolTipText) {
+                if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.PercentBarStyle) {
                     return (params) => {
-                        const min = this.api.formatColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const max = this.api.formatColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const textOptions = formatColumn.ColumnStyle.PercentBarStyle.ToolTipText;
+                        const min = this.api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
+                        const max = this.api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
+                        const textOptions = styledColumn.PercentBarStyle.ToolTipText;
                         let returnValue = '';
                         if (textOptions.includes('CellValue')) {
-                            if (formatColumn.DisplayFormat) {
-                                const options = formatColumn.DisplayFormat
-                                    .Options;
-                                returnValue = options
-                                    ? FormatHelper_1.default.NumberFormatter(params.value, options)
-                                    : params.value;
-                            }
-                            else {
-                                returnValue = params.value;
-                            }
+                            returnValue = params.value;
                         }
                         if (textOptions.includes('PercentageValue')) {
                             const clampedValue = Helper_1.Helper.clamp(params.value, min, max);
@@ -3306,7 +3369,7 @@ class Adaptable {
     triggerSetupColumnKeyCreator(colId) {
         const col = this.gridOptions.columnApi.getColumn(colId);
         const colDef = col.getColDef();
-        const abColumn = this.api.columnApi.getColumnFromId(colId);
+        const abColumn = this.api.columnApi.getColumnWithColumnId(colId);
         const colSetupInfo = {
             col,
             colDef,
@@ -3353,13 +3416,6 @@ class Adaptable {
             if (layoutCustomHeader) {
                 resultHeaderName = layoutCustomHeader;
             }
-            // check if the deprecated formatColumn header is used
-            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumnId(abColumn.columnId);
-            if (!layoutCustomHeader && (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.HeaderName) && !formatColumn.IsSuspended) {
-                // fallback to the formatColumn property if no Layout custom header is provided
-                resultHeaderName = formatColumn.HeaderName;
-                (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: 'FormatColumn.HeaderName' is deprecated: use 'Layout.ColumnHeadersMap' instead`);
-            }
             // required here for the initial layout rendering
             abColumn.friendlyName = resultHeaderName;
             return resultHeaderName;
@@ -3372,7 +3428,7 @@ class Adaptable {
             if (!colDef.filter) {
                 return;
             }
-            if (!this.api.columnApi.usesAdaptableFilterForm(col.getColId())) {
+            if (!this.api.columnApi.internalApi.usesAdaptableFilterForm(col.getColId())) {
                 return;
             }
             this.gridOptions.api.destroyFilter(col);
@@ -3380,7 +3436,8 @@ class Adaptable {
         });
     }
     setupColumnFloatingFilter({ col, colDef }) {
-        const isFloatingFilterDisabled = !colDef.floatingFilter || !this.api.columnApi.usesAdaptableQuickFilter(col.getColId());
+        const isFloatingFilterDisabled = !colDef.floatingFilter ||
+            !this.api.columnApi.internalApi.usesAdaptableQuickFilter(col.getColId());
         this.setColDefProperty(col, 'floatingFilterComponent', () => {
             if (isFloatingFilterDisabled) {
                 return;
@@ -3397,43 +3454,40 @@ class Adaptable {
         });
     }
     setupColumnValueFormatter({ col, abColumn }) {
-        this.setColDefProperty(col, 'valueFormatter', () => {
-            const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
-            if (!formatColumn) {
-                return;
-            }
-            if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
+        this.setColDefProperty(col, 'valueFormatter', (params) => {
+            const activeFormatColumnsWithDisplayFormat = this.api.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            if (!activeFormatColumnsWithDisplayFormat.length) {
                 return;
             }
-            if (formatColumn.DisplayFormat) {
-                let valueFormatter;
-                const options = formatColumn.DisplayFormat.Options;
-                if (formatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
+            return (params) => {
+                const { node, value } = params;
+                const [mostRelevantFormatColumn] = this.api.formatColumnApi.internalApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
+                if (!mostRelevantFormatColumn) {
+                    // ALL FormatColumns are conditional and NONE of them are relevant for this row
+                    return value;
+                }
+                const options = mostRelevantFormatColumn.DisplayFormat.Options;
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
                     // change the Number format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.internalApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (formatColumn.DisplayFormat.Formatter === 'DateFormatter') {
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'DateFormatter') {
                     // change the Date format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInDateScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getDateFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInDateScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.internalApi.getDateFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (formatColumn.DisplayFormat.Formatter === 'StringFormatter') {
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'StringFormatter') {
                     // change the String format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getStringFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.internalApi.getStringFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                return valueFormatter;
-            }
+                // should NEVER arrive at this line, but just to be sure
+                return value;
+            };
         });
     }
     setupColumnEditable({ col }) {
@@ -3456,7 +3510,7 @@ class Adaptable {
     setupColumnValueSetter({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'valueSetter', (userValueSetter) => {
             var _a;
-            const preventEditAlertsForColumn = this.api.alertApi
+            const preventEditAlertsForColumn = this.api.alertApi.internalApi
                 .getAlertDefinitionsWithPreventEdit()
                 .filter((alertDefinition) => {
                 return this.api.scopeApi.isColumnInScope(abColumn, alertDefinition.Scope);
@@ -3485,7 +3539,7 @@ class Adaptable {
                 const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
                     oldValue: params.oldValue,
                     newValue: params.newValue,
-                    column: this.api.columnApi.getColumnFromId(params.column.getColId()),
+                    column: this.api.columnApi.getColumnWithColumnId(params.column.getColId()),
                     primaryKeyValue: this.getPrimaryKeyValueFromRowNode(params.node),
                     rowNode: params.node,
                     trigger: 'edit',
@@ -3525,8 +3579,8 @@ class Adaptable {
         });
     }
     setupColumnComparator({ col, colId, abColumn }) {
-        const customSort = this.api.customSortApi.getCustomSortByColumn(colId);
-        const columnSortComparer = this.api.internalApi.getCustomSortComparer(abColumn);
+        const customSort = this.api.customSortApi.getCustomSortForColumn(colId);
+        const columnSortComparer = this.api.customSortApi.internalApi.getCustomSortComparer(abColumn);
         const comparatorGetter = (propName) => {
             return () => {
                 return this.getActiveColumnComparator(colId, customSort, columnSortComparer);
@@ -3568,14 +3622,14 @@ class Adaptable {
         // rowNode = this.getRowNodeForPrimaryKey(primaryKeyValue);
         let cellDataChangedInfos = [];
         Object.keys(oldData).forEach((key) => {
-            if (this.api.columnApi.doesColumnExist(key)) {
+            if (this.api.columnApi.isColumnInGrid(key)) {
                 const oldValue = oldData[key];
                 const newValue = newData[key];
                 if (oldValue != newValue) {
                     const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
                         oldValue: oldValue,
                         newValue: newValue,
-                        column: this.api.columnApi.getColumnFromId(key),
+                        column: this.api.columnApi.getColumnWithColumnId(key),
                         primaryKeyValue: primaryKeyValue,
                         rowNode: rowNode,
                         trigger: 'tick',
@@ -3593,7 +3647,7 @@ class Adaptable {
         if (oldValue == newValue) {
             return;
         }
-        const abColumn = this.api.columnApi.getColumnFromId(colId);
+        const abColumn = this.api.columnApi.getColumnWithColumnId(colId);
         if (!abColumn) {
             return;
         }
@@ -3649,12 +3703,13 @@ class Adaptable {
             }
             if (cellDataChangedInfo.trigger === 'edit' || cellDataChangedInfo.trigger === 'undo') {
                 this.checkChangedCellCurrentlySelected(cellDataChangedInfo);
-                this.api.freeTextColumnApi.checkFreeTextColumnForDataChange(cellDataChangedInfo);
+                this.api.freeTextColumnApi.internalApi.handleFreeTextColumnDataChange(cellDataChangedInfo);
             }
             this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
+            this.resetMinMaxCachedValueForColumn(cellDataChangedInfo.column);
         });
         // if node is visible then check if need to refresh other columns / whole row if the updating column is:
-        // 1. referenced in Conditional Styles that have Expressions (refreshing whole row if Scope is All)
+        // 1. referenced in Format Column Styles that have Expressions (refreshing whole row if Scope is All)
         // 2. referenced in Format Column styles that use Column Comparisons (which might also be calculated columns)
         if (this.isVisibleNode(firstInfo.rowNode)) {
             let dataChangedScope = {
@@ -3666,32 +3721,34 @@ class Adaptable {
                 this.redrawRow(firstInfo.rowNode);
             }
             else {
-                this.getFormatColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
+                this.getStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
                 if (dataChangedScope.columnIds.size > 0) {
                     this.refreshCells([firstInfo.rowNode], Array.from(dataChangedScope.columnIds.values()), true);
                 }
             }
         }
+        this.refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos);
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
-        const stylesWithExpression = this.api.conditionalStyleApi.getConditionalStylesWithExpression();
-        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
+        const formatColumnsWithExpression = [];
+        formatColumnsWithExpression.push(...this.api.formatColumnApi.internalApi.getFormatColumnsWithExpression());
+        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(formatColumnsWithExpression)) {
             return;
         }
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
-                stylesWithExpression.forEach((conditionalStyle) => {
+                formatColumnsWithExpression.forEach((styleModule) => {
                     if (!dataChangedScope.wholeRow) {
-                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(conditionalStyle.Rule.BooleanExpression);
+                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.scopeApi.scopeIsAll(conditionalStyle.Scope)) {
+                            if (this.api.scopeApi.scopeIsAll(styleModule.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
                             }
                             else {
                                 this.api.scopeApi
-                                    .getColumnsForScope(conditionalStyle.Scope)
+                                    .getColumnsForScope(styleModule.Scope)
                                     .map((c) => c.columnId)
                                     .forEach((colId) => {
                                     dataChangedScope.columnIds.add(colId);
@@ -3703,20 +3760,15 @@ class Adaptable {
             }
         });
     }
-    getFormatColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
-        this.api.formatColumnApi.getAllFormatColumn().forEach((fc) => {
-            let columnComparison = this.api.formatColumnApi.getColumnComparisonForFormatColumn(fc);
+    getStyledColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
+        this.api.styledColumnApi.getStyledColumns().forEach((sc) => {
+            let columnComparison = this.api.styledColumnApi.internalApi.getColumnComparisonForStyledColumn(sc);
             if (columnComparison) {
-                let affectedColumnIds = this.api.formatColumnApi.getColumnIdsFromColumnComparison(columnComparison);
+                let affectedColumnIds = this.api.styledColumnApi.internalApi.getColumnIdsFromColumnComparison(columnComparison);
                 if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(affectedColumnIds)) {
                     cellDataChangedInfos.forEach((cellDataChangedInfo) => {
                         if (affectedColumnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            this.api.scopeApi
-                                .getColumnsForScope(fc.Scope)
-                                .map((c) => c.columnId)
-                                .forEach((colId) => {
-                                dataChangedScope.columnIds.add(colId);
-                            });
+                            dataChangedScope.columnIds.add(sc.ColumnId);
                         }
                     });
                 }
@@ -3740,6 +3792,20 @@ class Adaptable {
             }
         }
     }
+    refreshColumnForRelativeRangeStyledColumns(cellDataChangedInfos) {
+        const columnIdMap = new Set();
+        cellDataChangedInfos.forEach((cellDataChangeInfo) => {
+            const styledColumn = this.api.styledColumnApi.getActiveStyledColumnForColumn(cellDataChangeInfo.column);
+            if (styledColumn &&
+                this.api.styledColumnApi.internalApi.hasStyledColumnRelativeCellRange(styledColumn)) {
+                columnIdMap.add(styledColumn.ColumnId);
+            }
+        });
+        const columnIdsToUpdate = [...columnIdMap];
+        if (columnIdsToUpdate.length) {
+            this.refreshColumns(columnIdsToUpdate, true);
+        }
+    }
     getColumnSorts() {
         const columnSorts = [];
         const columnState = this.gridOptions.columnApi.getColumnState();
@@ -3819,7 +3885,7 @@ class Adaptable {
     }
     getExpandRowGroupsKeys() {
         let returnValues = [];
-        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts()) {
+        if (this.api.layoutApi.internalApi.areExpandedRowGroupsSavedInLayouts()) {
             this.gridOptions.api.forEachNode((node) => {
                 if (node.group && node.expanded) {
                     let current = node;
@@ -3952,6 +4018,7 @@ class Adaptable {
         }
         this.gridOptions.api.setRowData(dataSource);
         this.updateColumnDataTypeIfRowDataIsEmpty();
+        this.updateRowGroupsExpandedState();
     }
     getGridData() {
         var _a;
@@ -4018,12 +4085,14 @@ class Adaptable {
                     }
                     resolve(transaction === null || transaction === void 0 ? void 0 : transaction.add);
                     this.updateColumnDataTypeIfRowDataIsEmpty();
+                    this.updateRowGroupsExpandedState();
                 });
             });
         }
         else {
             const transaction = this.gridOptions.api.applyTransaction(newData);
             this.updateColumnDataTypeIfRowDataIsEmpty();
+            this.updateRowGroupsExpandedState();
             return Promise.resolve(transaction === null || transaction === void 0 ? void 0 : transaction.add);
         }
     }
@@ -4050,7 +4119,7 @@ class Adaptable {
         let groupedColumns = this.gridOptions.columnApi.getRowGroupColumns();
         if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(groupedColumns)) {
             let groupedColumn = groupedColumns[0];
-            return this.api.columnApi.getColumnFromId(groupedColumn.getColId());
+            return this.api.columnApi.getColumnWithColumnId(groupedColumn.getColId());
         }
     }
     checkColumnsDataTypeSet() {
@@ -4213,7 +4282,7 @@ class Adaptable {
         const themeName = typeof theme === 'string' ? theme : theme.Name;
         const themeClassNamesToRemove = [];
         const themesToRemove = [];
-        const allThemes = this.api.themeApi.getAllTheme().map((t) => {
+        const allThemes = this.api.themeApi.getThemes().map((t) => {
             // we mutate the theme later,
             // and since we don't want the mutation to end up in state
             // we better clone it here
@@ -4261,7 +4330,7 @@ class Adaptable {
             }
             return val;
         });
-        const systemThemes = this.api.themeApi.getAllSystemTheme();
+        const systemThemes = this.api.themeApi.getSystemThemes();
         const isSystemTheme = !!systemThemes.filter((t) => t.Name === themeName)[0];
         const container = this.getAgGridContainerElement();
         const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
@@ -4315,12 +4384,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }
     }
     setupRowStyling() {
-        // first get the conditional style state
-        const conditionalStyles = this.api.conditionalStyleApi.getRowConditionalStyles();
         // Set any Row Styles (i.e. items without a classname)
         this.setGridOptionsProperty('getRowStyle', (userGetRowStyle) => {
             return (params) => {
-                const result = Object.assign(Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
+                const result = Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params));
                 return result;
             };
         });
@@ -4333,7 +4400,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     typeof userGetRowClass === 'function' ? userGetRowClass(params) : userGetRowClass,
                     highlightClassName,
                     alertHighlightClassName,
-                    this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
                 ]
                     // we flatten it because 'userGetRowClass' might return a string[]
                     .flat()
@@ -4352,30 +4418,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         const newValue = this.gridOptions.suppressAggFuncInHeader;
         return previousValue !== newValue;
     }
-    getConditionalStyleRowClass(conditionalStyles, params) {
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles)) {
-            const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
-            let classNames = conditionalStyles
-                .map((conditionalStyle) => {
-                var _a;
-                if (module.isConditionalStyleActiveForRow(conditionalStyle, params)) {
-                    return (_a = conditionalStyle.Style) === null || _a === void 0 ? void 0 : _a.ClassName;
-                }
-            })
-                .filter((x) => !!x)
-                .join(' ');
-            return classNames;
-        }
-    }
-    getConditionalStyleRowStyle(conditionalStyles, params) {
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles)) {
-            const module = this.ModuleService.getModuleById(ModuleConstants.ConditionalStyleModuleId);
-            const cs = conditionalStyles.find((cs) => module.isConditionalStyleActiveForRow(cs, params));
-            if (cs) {
-                return this.convertAdaptableStyleToCSS(cs.Style);
-            }
-        }
-    }
     getGridOptionsApi() {
         if (!this.gridOptions.api) {
             (0, LoggingHelper_1.ConsoleLogError)('There is a problem with your instance of AG Grid - it has no gridApi object.  Please contact Support.');
@@ -4459,6 +4501,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     const cellParams = {
                         colDef,
                         node,
+                        column,
                         data: node.data,
                         value: this.getRawValueFromRowNode(node, column.getId()),
                         rowIndex,
@@ -4483,7 +4526,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     if (userDefinedExcelStyle) {
                         excelStyles.push(userDefinedExcelStyle);
                     }
-                    // add adaptable derived styles (format column, conditional style etc.)
+                    // add adaptable derived styles (format column etc.)
                     const adaptableStyle = Object.assign(Object.assign({}, rowStyle), Object.keys(cellStyle).reduce((result, key) => {
                         if (cellStyle[key] !== null) {
                             result[key] = cellStyle[key];
@@ -4614,17 +4657,19 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
     }
     processRowGroupForExcelExport(rowNode) {
-        if (!rowNode.field || !rowNode.key) {
+        var _a, _b, _c, _d, _e;
+        const columnId = (_c = (_a = rowNode.field) !== null && _a !== void 0 ? _a : (_b = rowNode.rowGroupColumn) === null || _b === void 0 ? void 0 : _b.getColId()) !== null && _c !== void 0 ? _c : (_e = (_d = rowNode.rowGroupColumn) === null || _d === void 0 ? void 0 : _d.getColDef()) === null || _e === void 0 ? void 0 : _e.field;
+        if (!columnId || !rowNode.key) {
             return;
         }
-        const columnId = rowNode.field;
         let rawValue = rowNode.key;
-        if (this.api.columnApi.getColumnDataTypeFromColumnId(columnId) === 'Date' &&
+        if (this.api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Date' &&
             typeof rawValue === 'string') {
             // AG-Grid converts the value to string, we have to reconvert it back
-            const numericRawValue = parseInt(rawValue);
-            if (!isNaN(numericRawValue)) {
-                rawValue = numericRawValue;
+            const dateRawValue = (0, DateHelper_1.parseDateValue)(rawValue);
+            if (dateRawValue != undefined) {
+                // @ts-ignore
+                rawValue = dateRawValue;
             }
         }
         return this.ReportService.getCellExportValueFromRawValue(rowNode, rawValue, columnId);
@@ -4654,12 +4699,27 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             publishedAt: publishTimestamp_1.default,
         });
     }
-    showCharts(charts) {
+    showCharts(chartsDefinitions, chartContainer) {
+        return chartsDefinitions.map((chartDefinition) => this.showChart(chartDefinition, chartContainer));
+    }
+    showChart(chartDefinition, container) {
         if (!this.gridOptions.api) {
-            (0, LoggingHelper_1.ConsoleLogError)('Adaptable must be instantiated before calling showCharts');
-            return [];
+            (0, LoggingHelper_1.ConsoleLogError)('Adaptable must be instantiated before calling showChart');
+            return null;
         }
-        return charts.map((chart) => this.gridOptions.api.restoreChart(chart));
+        /**
+         * Ag-grid always creates new charts behind the sences.
+         * So we need to update the model inside adaptable state.
+         * This is important to be done as soon as possible so it is not considered new.
+         */
+        const chartRef = this.gridOptions.api.restoreChart(chartDefinition.Model, container);
+        const chartModel = this.getChartModels().find((chartModel) => chartModel.chartId === chartRef.chartId);
+        // Update the definition in state so it is not considered new
+        this.api.chartingApi.editChartDefinition(Object.assign(Object.assign({}, chartDefinition), { Model: chartModel }));
+        return chartRef;
+    }
+    getChartRef(chartId) {
+        return this.gridOptions.api.getChartRef(chartId);
     }
     getChartModels() {
         if (!this.gridOptions.api) {
@@ -4668,6 +4728,9 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }
         return this.gridOptions.api.getChartModels();
     }
+    getRowModel() {
+        return this.gridOptions.rowModelType;
+    }
     getActiveAdaptableAggFuncForCol(columnId) {
         if (!columnId) {
             return null;
@@ -4702,8 +4765,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     /**
      * When reading the state from the grid, we have to make sure 'avg' is not overriden with the 'avg' string.
      */
-    handleUpdateWeightedAvgFromGrid(aggFuncFromGrid) {
-        const currentLayout = this.api.layoutApi.getCurrentLayout();
+    mapAggregationColumnsFromGrid(aggFuncFromGrid, currentLayout) {
         return Object.entries(aggFuncFromGrid).reduce((acc, [colId, agg]) => {
             const adaptableAggFunc = this.getActiveAdaptableAggFuncForCol(colId);
             if ((adaptableAggFunc === null || adaptableAggFunc === void 0 ? void 0 : adaptableAggFunc.type) === 'weightedAverage' && agg === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME) {
@@ -4716,6 +4778,90 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             return acc;
         }, {});
     }
+    resetMinMaxCachedValueForColumn(column) {
+        if (!column) {
+            this.columnMinMaxValuesCache[column.columnId] = {};
+        }
+        if (this.columnMinMaxValuesCache[column.columnId]) {
+            this.columnMinMaxValuesCache[column.columnId] = undefined;
+        }
+    }
+    getMinMaxCachedValueForColumn(column, minMax) {
+        var _a;
+        const { columnId, dataType } = column;
+        if (dataType !== 'Number') {
+            return undefined;
+        }
+        let value = (_a = this.columnMinMaxValuesCache[columnId]) === null || _a === void 0 ? void 0 : _a[minMax];
+        if (value !== undefined) {
+            return value;
+        }
+        const distinctRawValues = this.api.gridApi.internalApi
+            .getUnsortedDistinctRawValuesForColumn(columnId)
+            .map((item) => item.rawValue);
+        value = minMax === 'min' ? Math.min(...distinctRawValues) : Math.max(...distinctRawValues);
+        this.columnMinMaxValuesCache[columnId] = Object.assign(Object.assign({}, this.columnMinMaxValuesCache[columnId]), { [minMax]: value });
+        return value;
+    }
+    persistColumnIndexBeforeGrouping(params) {
+        const layout = this.api.layoutApi.getCurrentLayout();
+        const columnGroupsInLayout = layout.RowGroupedColumns;
+        const columnGroupsInGrid = params.columns.map((col) => col.getColId());
+        // what is new
+        const newGroups = columnGroupsInGrid.filter((colId) => !columnGroupsInLayout.includes(colId));
+        newGroups.forEach((colId) => {
+            const columnIndex = layout.Columns.filter((colId) => !(this.api.columnApi.isAutoRowGroupColumn(colId) ||
+                this.api.columnApi.isAutoPivotColumn(colId))).findIndex((columnIdInLayout) => columnIdInLayout === colId);
+            // user may group after a column not in layout
+            if (columnIndex !== -1) {
+                this.api.internalApi.persistPreviousGroupedColumnsIndex(layout.Uuid, colId, columnIndex);
+            }
+        });
+    }
+    /**
+     * Restores the order previous grouping order.
+  
+     */
+    restoreUnGroupColumnOrder({ newGroupColumns, columnOrder, }) {
+        var _a;
+        const newColumnOrder = [...columnOrder];
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        const previousGroupedColumnsIndex = this.api.internalApi.getPreviousGroupedColumnsIndex(currentLayout.Uuid);
+        const isUnGroup = newGroupColumns.length < ((_a = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length);
+        if (!isUnGroup) {
+            return columnOrder;
+        }
+        if (!previousGroupedColumnsIndex) {
+            return columnOrder;
+        }
+        for (let [colId, previousIndex] of Object.entries(previousGroupedColumnsIndex)) {
+            const isStillGrouped = newGroupColumns.includes(colId);
+            const isAlreadyInGrid = currentLayout.Columns.includes(colId); // was not just added by ungrouping
+            if (isStillGrouped) {
+                continue;
+            }
+            if (isAlreadyInGrid) {
+                // no longer grouped, but already in grid, this means it was already in grid before ungrouping
+                // in this case the state can be cleared
+                this.api.internalApi.persistPreviousGroupedColumnsIndex(currentLayout.Uuid, colId, null);
+                continue;
+            }
+            // need to ajust index based if grouped
+            const numberOfGroupedColumns = newColumnOrder.filter((colId) => this.api.columnApi.isAutoRowGroupColumn(colId)).length;
+            const adjustedPreviousIndex = previousIndex + numberOfGroupedColumns;
+            const indexInGrid = newColumnOrder.indexOf(colId);
+            const hasDifferentPositionAsPreviousLayout = adjustedPreviousIndex !== null && // if null, the reorder was already applied
+                indexInGrid > 0 && // needs to be in grid
+                adjustedPreviousIndex !== indexInGrid;
+            const isPreviousPositionInRange = adjustedPreviousIndex < newColumnOrder.length;
+            if (hasDifferentPositionAsPreviousLayout && isPreviousPositionInRange) {
+                newColumnOrder.splice(indexInGrid, 1);
+                newColumnOrder.splice(adjustedPreviousIndex, 0, colId);
+            }
+            this.api.internalApi.persistPreviousGroupedColumnsIndex(currentLayout.Uuid, colId, null);
+        }
+        return newColumnOrder;
+    }
 }
 exports.Adaptable = Adaptable;
 class AdaptableNoCodeWizard {
@@ -4754,15 +4900,15 @@ class AdaptableNoCodeWizard {
         // this allows people to customize the wizard dimensions & styling
         // when it's visible
         container.classList.add('adaptable--in-wizard');
-        ReactDOM.render(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
+        const unmount = (0, renderReactRoot_1.renderReactRoot)(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
                 container.classList.remove('adaptable--in-wizard');
-                ReactDOM.unmountComponentAtNode(container);
+                unmount();
                 this.init({
                     adaptableOptions,
                     gridOptions: adaptableOptions.gridOptions,
                     agGridModules: [...this.agGridModules],
                 });
-            } })), container);
+            } })), container, true);
     }
 }
 exports.AdaptableNoCodeWizard = AdaptableNoCodeWizard;