@adaptabletools/adaptable 23.0.22 → 23.1.0-canary.0

package/src/agGrid/AgGridColumnAdapter.js

@@ -49,6 +49,22 @@ const stripCssKeys = (style, keys) => {
 };
 const stripFontCssKeys = (style) => stripCssKeys(style, FONT_CSS_KEYS);
 const stripCellBoxCssKeys = (style) => stripCssKeys(style, CELL_BOX_CSS_KEYS);
+const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
+    'cellStyle',
+    'cellClass',
+    'headerStyle',
+    'headerClass',
+    'valueGetter',
+    'valueFormatter',
+    'valueSetter',
+    'editable',
+    'comparator',
+    'pivotComparator',
+    'getFindText',
+    'getQuickFilterText',
+    'tooltipValueGetter',
+    'cellEditorParams',
+]);
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor;
@@ -60,9 +76,20 @@ export function getEditorForColumnDataType(columnDataType, variant) {
 export class AgGridColumnAdapter {
     adaptableInstance;
     colDefPropertyCache;
+    workingColDefs;
+    sortCacheInvalidationNeeded = false;
+    stableCallbacks;
+    stableCallbackImplementations;
+    stableCallbackOwners;
+    adaptableColumnFilterDef;
+    adaptableFloatingFilterComponent;
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.colDefPropertyCache = new Map();
+        this.workingColDefs = new Map();
+        this.stableCallbacks = new Map();
+        this.stableCallbackImplementations = new Map();
+        this.stableCallbackOwners = new WeakMap();
     }
     getVariant() {
         return this.adaptableInstance.variant;
@@ -71,6 +98,15 @@ export class AgGridColumnAdapter {
         this.adaptableInstance = null;
         this.colDefPropertyCache.clear();
         this.colDefPropertyCache = null;
+        this.workingColDefs.clear();
+        this.workingColDefs = null;
+        this.stableCallbacks.clear();
+        this.stableCallbacks = null;
+        this.stableCallbackImplementations.clear();
+        this.stableCallbackImplementations = null;
+        this.stableCallbackOwners = null;
+        this.adaptableColumnFilterDef = null;
+        this.adaptableFloatingFilterComponent = null;
     }
     get adaptableApi() {
         return this.adaptableInstance.api;
@@ -81,9 +117,55 @@ export class AgGridColumnAdapter {
     get agGridApi() {
         return this.adaptableApi.agGridApi;
     }
+    getColDefForSetup(col) {
+        return this.workingColDefs.get(col.getColId()) ?? col.getColDef();
+    }
+    beginColDefChanges(col) {
+        const workingColDef = { ...col.getColDef() };
+        this.workingColDefs.set(col.getColId(), workingColDef);
+        return workingColDef;
+    }
+    commitColDefChanges(col) {
+        const colId = col.getColId();
+        const workingColDef = this.workingColDefs.get(colId);
+        this.workingColDefs.delete(colId);
+        if (!workingColDef) {
+            return;
+        }
+        const agColumn = col;
+        if (typeof agColumn.setColDef !== 'function') {
+            errorOnce(`CRITICAL: AG Grid 'AgColumn.setColDef()' is not available, Adaptable cannot commit column definition changes! (see #col_def_commit)`);
+            Object.assign(col.getColDef(), workingColDef);
+            return;
+        }
+        agColumn.setColDef(workingColDef, col.getUserProvidedColDef(), 'api');
+    }
+    toStableCallback(colId, propertyName, implementation) {
+        const key = `${colId}.${propertyName}`;
+        this.stableCallbackImplementations.set(key, implementation);
+        let stableCallback = this.stableCallbacks.get(key);
+        if (!stableCallback) {
+            stableCallback = (...args) => {
+                return this.stableCallbackImplementations?.get(key)?.(...args);
+            };
+            this.stableCallbacks.set(key, stableCallback);
+            this.stableCallbackOwners.set(stableCallback, { colId, propertyName });
+        }
+        return stableCallback;
+    }
+    resolveUserProvidedValue(propertyName, value) {
+        if (typeof value !== 'function') {
+            return value;
+        }
+        const owner = this.stableCallbackOwners.get(value);
+        if (!owner) {
+            return value;
+        }
+        return this.colDefPropertyCache.get(`user.${owner.colId}.${propertyName}`);
+    }
     setColDefProperty(col, propertyName, propertyGetter) {
         const colId = col.getColId();
-        const colDef = col.getColDef();
+        const colDef = this.getColDefForSetup(col);
         const colSetupInfo = {
             col,
             colDef,
@@ -94,10 +176,15 @@ export class AgGridColumnAdapter {
         const value = colDef[propertyName];
         const isUserDefined = value !== this.colDefPropertyCache.get(adaptableKey);
         if (isUserDefined) {
-            this.colDefPropertyCache.set(userKey, value);
+            this.colDefPropertyCache.set(userKey, this.resolveUserProvidedValue(propertyName, value));
         }
         const userValue = this.colDefPropertyCache.get(userKey);
-        const adaptableValue = propertyGetter(userValue);
+        let adaptableValue = propertyGetter(userValue);
+        if (typeof adaptableValue === 'function' &&
+            adaptableValue !== userValue &&
+            STABLE_CALLBACK_COL_DEF_PROPERTIES.has(propertyName)) {
+            adaptableValue = this.toStableCallback(colId, propertyName, adaptableValue);
+        }
         if (adaptableValue != null) {
             this.colDefPropertyCache.set(adaptableKey, adaptableValue);
         }
@@ -115,7 +202,12 @@ export class AgGridColumnAdapter {
         if (theValue === undefined && colDef[propertyName] === undefined) {
             return;
         }
+        const previousValue = colDef[propertyName];
         colDef[propertyName] = theValue;
+        if ((propertyName === 'comparator' || propertyName === 'pivotComparator') &&
+            previousValue !== theValue) {
+            this.sortCacheInvalidationNeeded = true;
+        }
     }
     getUserColDefProperty(columnId, propertyName) {
         const userKey = `user.${columnId}.${propertyName}`;
@@ -148,42 +240,54 @@ export class AgGridColumnAdapter {
             cols = cols.filter((col) => specificColumnIds.includes(col.getColId()));
         }
         cols.forEach((col) => {
-            const colDef = col.getColDef();
             const colId = col.getColId();
             if (this.shouldSkipColumn(colId)) {
                 return;
             }
-            const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
-            const colSetupInfo = {
-                col,
-                colDef,
-                colId,
-                abColumn,
-            };
-            const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
-            this.setupColumnCellRenderer(colSetupInfo);
-            this.setupColumnCellStyle(colSetupInfo);
-            this.setupColumnCellClass(colSetupInfo);
-            this.setupColumnHeaderStyle(colSetupInfo);
-            this.setupColumnHeaderClass(colSetupInfo);
-            this.setupColumnValueGetter(colSetupInfo);
-            this.setupColumnTooltipValueGetter(colSetupInfo);
-            if (!isAutoRowGroupColumn) {
-                this.setupColumnFilter(colSetupInfo);
-                this.setupColumnFloatingFilter(colSetupInfo);
+            const colDef = this.beginColDefChanges(col);
+            try {
+                this.setupColumn({ col, colDef, colId });
+            }
+            finally {
+                this.commitColDefChanges(col);
             }
-            this.setupColumnValueFormatter(colSetupInfo);
-            this.setupColumnEditable(colSetupInfo);
-            this.setupColumnValueSetter(colSetupInfo);
-            this.setupColumnComparator(colSetupInfo);
-            this.setupColumnGetFindText(colSetupInfo);
-            this.setupColumnCellEditor(colSetupInfo);
-            this.setupColumnHeader(colSetupInfo);
-            this.setupColumnQuickFilterText(colSetupInfo);
-            this.setupColumnAllowedAggFuncs(colSetupInfo);
-            this.setupColumnType(colSetupInfo);
-            this.setupColumnCellDataType(colSetupInfo);
         });
+        if (this.sortCacheInvalidationNeeded) {
+            this.sortCacheInvalidationNeeded = false;
+            this.adaptableInstance.agGridAdapter?.DANGER_invalidateSortCache();
+        }
+    }
+    setupColumn({ col, colDef, colId }) {
+        const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
+        const colSetupInfo = {
+            col,
+            colDef,
+            colId,
+            abColumn,
+        };
+        const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
+        this.setupColumnCellRenderer(colSetupInfo);
+        this.setupColumnCellStyle(colSetupInfo);
+        this.setupColumnCellClass(colSetupInfo);
+        this.setupColumnHeaderStyle(colSetupInfo);
+        this.setupColumnHeaderClass(colSetupInfo);
+        this.setupColumnValueGetter(colSetupInfo);
+        this.setupColumnTooltipValueGetter(colSetupInfo);
+        if (!isAutoRowGroupColumn) {
+            this.setupColumnFilter(colSetupInfo);
+            this.setupColumnFloatingFilter(colSetupInfo);
+        }
+        this.setupColumnValueFormatter(colSetupInfo);
+        this.setupColumnEditable(colSetupInfo);
+        this.setupColumnValueSetter(colSetupInfo);
+        this.setupColumnComparator(colSetupInfo);
+        this.setupColumnGetFindText(colSetupInfo);
+        this.setupColumnCellEditor(colSetupInfo);
+        this.setupColumnHeader(colSetupInfo);
+        this.setupColumnQuickFilterText(colSetupInfo);
+        this.setupColumnAllowedAggFuncs(colSetupInfo);
+        this.setupColumnType(colSetupInfo);
+        this.setupColumnCellDataType(colSetupInfo);
     }
     setupColumnValueGetter({ col }) {
         this.setColDefProperty(col, 'valueGetter', (userValue) => {
@@ -744,11 +848,23 @@ export class AgGridColumnAdapter {
                 this.adaptableApi.consoleError(`Column "${colId}" has a custom filter in colDef.filter, but Adaptable filtering only accepts boolean (true/false) values for this property.`);
                 return false;
             }
-            return {
+            return this.getAdaptableColumnFilterDef();
+        });
+    }
+    getAdaptableColumnFilterDef() {
+        if (!this.adaptableColumnFilterDef) {
+            this.adaptableColumnFilterDef = {
                 component: AgGridFilterAdapterFactory(this.adaptableInstance),
                 handler: () => new AdaptableFilterHandler(this.adaptableApi),
             };
-        });
+        }
+        return this.adaptableColumnFilterDef;
+    }
+    getAdaptableFloatingFilterComponent() {
+        if (!this.adaptableFloatingFilterComponent) {
+            this.adaptableFloatingFilterComponent = AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+        }
+        return this.adaptableFloatingFilterComponent;
     }
     setupColumnFloatingFilter({ col, colDef }) {
         const userProvidedFilterProp = this.getUserColDefProperty(col.getColId(), 'filter');
@@ -775,13 +891,13 @@ export class AgGridColumnAdapter {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+            return this.getAdaptableFloatingFilterComponent();
         });
         this.setColDefProperty(col, 'floatingFilter', () => {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+            return this.getAdaptableFloatingFilterComponent();
         });
         this.setColDefProperty(col, 'suppressFloatingFilterButton', () => {
             return !isFloatingFilterDisabled;

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
+import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetColumnMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
 import { AdaptableColumn } from '../AdaptableState/Common/AdaptableColumn';
 import { AdaptableMenuItem } from '../AdaptableState/Common/Menu';
 export declare class AgGridMenuAdapter {
@@ -8,8 +8,14 @@ export declare class AgGridMenuAdapter {
     private get adaptableOptions();
     private get adaptableApi();
     destroy(): void;
-    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    buildColumnMenu(params: GetMainMenuItemsParams | GetColumnMenuItemsParams, _originalGetMainMenuItems?: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    /**
+     * Columns Tool Panel / Column Chooser (AG Grid 36.1 `getColumnMenuItems`).
+     * Phase 1 only strips dual-UI items; AdapTable items are added in Phase 2.
+     */
+    buildColumnsToolPanelMenu(params: GetColumnMenuItemsParams): (DefaultMenuItem | MenuItemDef)[];
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    private filterSuppressedAgGridDualUiMenuItems;
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;
     private createColumnMenuContextObject;

package/src/agGrid/AgGridMenuAdapter.js

@@ -3,6 +3,13 @@ import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
 import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+const AG_GRID_DUAL_UI_MENU_ITEMS = new Set([
+    'calculatedColumn',
+    'editCalculatedColumn',
+    'removeCalculatedColumn',
+    'editColumnName',
+    'showValuesAsSubMenu',
+]);
 function createAgGridIcon(name) {
     const element = document.createElement('span');
     element.className = `ag-icon ag-icon-${name}`;
@@ -114,8 +121,8 @@ export class AgGridMenuAdapter {
     destroy() {
         this._adaptableInstance = null;
     }
-    buildColumnMenu(params, originalGetMainMenuItems) {
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+    buildColumnMenu(params, _originalGetMainMenuItems) {
+        const agGridMenuItems = this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         if (!params.column) {
             return agGridMenuItems;
         }
@@ -158,18 +165,21 @@ export class AgGridMenuAdapter {
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    buildColumnsToolPanelMenu(params) {
+        return this.removeConsecutiveSeparators(this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []));
+    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
         }
         if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
-            return (params.defaultItems ? [...params.defaultItems] : []);
+            return this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         }
         this._adaptableInstance.refreshSelectedCellsState();
         const contextMenuOptions = this.adaptableOptions.contextMenuOptions;
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        const agGridMenuItems = this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         const agGridCopyItems = agGridMenuItems.filter((item) => ['copy', 'copyWithHeaders', 'copyWithGroupHeaders', 'cut', 'paste'].includes(item));
         const otherAgGridItems = agGridMenuItems.filter((item) => !agGridCopyItems.includes(item) &&
             !['export', 'csvExport', 'excelExport'].includes(item));
@@ -213,6 +223,9 @@ export class AgGridMenuAdapter {
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    filterSuppressedAgGridDualUiMenuItems(items) {
+        return items.filter((item) => typeof item !== 'string' || !AG_GRID_DUAL_UI_MENU_ITEMS.has(item));
+    }
     mapAgGridItemTypeToAgGridMenuItem(itemName) {
         return {
             menuType: 'AgGrid',

package/src/agGrid/AgGridModulesAdapter.js

@@ -17,6 +17,12 @@ export class AgGridModulesAdapter {
         return this.adaptableInstance.agGridAdapter.getAgGridApi();
     }
     isAgGridModuleRegistered(moduleName) {
+        if (moduleName === 'ClientSideRowModelModule') {
+            const rowModelType = this.agGridApi.getGridOption('rowModelType');
+            if (rowModelType == null || rowModelType === 'clientSide') {
+                return true;
+            }
+        }
         let isModuleRegistered = this.agGridApi.isModuleRegistered(moduleName);
         if (!isModuleRegistered) {
             const serverSideDependencies = [
@@ -61,7 +67,6 @@ export class AgGridModulesAdapter {
                 mandatoryModules.push('ViewportRowModelModule');
                 break;
             default:
-                mandatoryModules.push('ClientSideRowModelModule');
                 mandatoryModules.push('ClientSideRowModelApiModule');
         }
         mandatoryModules.push('CellApiModule', 'CellStyleModule', 'ColumnApiModule', 'ColumnMenuModule', 'ContextMenuModule', 'CustomFilterModule', 'EventApiModule', 'ExternalFilterModule', 'GridStateModule', 'GroupFilterModule', 'RenderApiModule', 'RowApiModule', 'RowGroupingModule', 'RowStyleModule', 'ScrollApiModule');

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -13,7 +13,24 @@ export declare class AgGridThemeAdapter {
     applyAgGridThemeOnAdaptableThemeChange(adaptableTheme: AdaptableTheme, variantTheme: string, agGridContainer: HTMLElement, themesToRemove: AdaptableTheme[]): void;
     private getAgGridContainerElement;
     private legacy_applyAgGridThemeOnAdaptableThemeChange;
+    /**
+     * Returns the space-separated `ag-theme-*` class names which have to be applied to elements rendered
+     * OUTSIDE the grid DOM (e.g. AdapTable popups/tooltips portaled to `document.body`) so that they
+     * pick up the AG Grid theme.
+     *
+     * - legacy theme mode: the `ag-theme-<name>` class of the grid container
+     * - Theming API: the `ag-theme-inherit-N` + `ag-theme-<part>-N ... ag-theme-params-N` classes
+     *   AG Grid 36 applies on the grid-owned `.ag-styled-root` wrappers around the grid
+     */
     getAgGridCurrentThemeClassNames(): string;
+    /**
+     * AG Grid 36+ wraps the grid in three grid-owned `div.ag-styled-root` elements
+     * (outer: `ag-theme-inherit-N`, middle: `ag-theme-<part>-N ... ag-theme-params-N`, inner: `ag-ltr|ag-rtl`);
+     * `AgGridAdapter.getAgGridRootElement()` is the innermost one.
+     * Collects the `ag-theme-*` classes of these wrappers (direction classes are skipped).
+     */
+    private getThemeClassNamesFromStyledRoots;
+    private getThemeClassNamesFromThemeInternals;
     private getAgGridLightThemeName;
     private legacy_getAgGridCurrentThemeClassNames;
 }

package/src/agGrid/AgGridThemeAdapter.js

@@ -74,15 +74,46 @@ export class AgGridThemeAdapter {
         }
     }
     getAgGridCurrentThemeClassNames() {
-        if (this.agGridThemeMode === 'legacy') {
-            this.legacy_getAgGridCurrentThemeClassNames();
-        }
         const currentAgGridTheme = this._adaptableInstance.agGridAdapter.getGridOption('theme');
-        if (currentAgGridTheme === 'legacy') {
+        if (this.agGridThemeMode === 'legacy' || currentAgGridTheme === 'legacy') {
             return this.legacy_getAgGridCurrentThemeClassNames();
         }
-        const currentAgGridTheme__cssClassCache = currentAgGridTheme?._cssClassCache;
-        return currentAgGridTheme__cssClassCache ?? '';
+        const classNamesFromDom = this.getThemeClassNamesFromStyledRoots();
+        if (classNamesFromDom) {
+            return classNamesFromDom;
+        }
+        return this.getThemeClassNamesFromThemeInternals(currentAgGridTheme);
+    }
+    getThemeClassNamesFromStyledRoots() {
+        const gridRoot = this._adaptableInstance.agGridAdapter.getAgGridRootElement();
+        const themeClassNames = [];
+        let element = gridRoot ?? null;
+        while (element && element.classList?.contains('ag-styled-root')) {
+            element.classList.forEach((cls) => {
+                if (cls.indexOf('ag-theme-') === 0) {
+                    themeClassNames.push(cls);
+                }
+            });
+            element = element.parentElement;
+        }
+        return themeClassNames.join(' ');
+    }
+    getThemeClassNamesFromThemeInternals(theme) {
+        if (!theme || typeof theme === 'string') {
+            return '';
+        }
+        const themeInternals = theme;
+        let cssClasses;
+        try {
+            cssClasses = themeInternals._getCssClasses?.() ?? themeInternals._cssClassCache;
+        }
+        catch {
+            cssClasses = themeInternals._cssClassCache;
+        }
+        if (Array.isArray(cssClasses)) {
+            return cssClasses.filter(Boolean).join(' ');
+        }
+        return typeof cssClasses === 'string' ? cssClasses : '';
     }
     getAgGridLightThemeName() {
         const container = this.getAgGridContainerElement();

package/src/components/Radio/index.d.ts

@@ -22,14 +22,14 @@ export interface RadioProps extends TypeProps, Omit<BoxProps, keyof TypeProps> {
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
 }
-export declare const useRadioContext: <T extends unknown>() => {
+export declare const useRadioContext: <T extends any>() => {
     value: T;
     onChange: (value: T) => void;
     name: string;
     variant: Variant;
 };
 declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => React.JSX.Element;
-export declare const RadioGroup: <T extends unknown>(props: {
+export declare const RadioGroup: <T extends any>(props: {
     orientation: "horizontal" | "vertical";
     value?: T;
     name?: string;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1789246590646 || Date.now(),
-    VERSION: "23.0.22" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1789413930421 || Date.now(),
+    VERSION: "23.1.0-canary.0" || '--current-version--',
 };

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

@@ -104,6 +104,15 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private computeColumnOrderAndVisibility;
     autoSizeColumns(columnIds?: string[]): false | string[];
     private applyPivotLayout;
+    /**
+     * Applies the layout state that targets pivot result columns (order, sorts, pinning).
+     *
+     * Must be called after the primary applyColumnState call(s) - i.e. after the pivot
+     * result columns have been (re)generated by AG Grid - because pivot result column
+     * state included in the same call that changes pivot/aggregation config is applied
+     * to the previous generation of pivot result columns (see AG Grid 36 notes in applyPivotLayout).
+     */
+    private applyPivotResultColumnsState;
     applyPivotTotals(layout: PivotLayoutModel): void;
     applyColumnGroupCollapseExpandState(layout: PivotLayoutModel | TableLayoutModel): void;
     private withSuppressColumnAnimation;

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

@@ -1340,20 +1340,6 @@ export class LayoutManager extends LMEmitter {
         this.computeColumnSorts(layout, columnState);
         this.computePinnedColumns(layout, columnState);
         this.computePivotAggregations(layout, columnState);
-        if (Array.isArray(layout.PivotResultColumnsOrder)) {
-            const pivotResultColumnsOrderSet = new Set(layout.PivotResultColumnsOrder);
-            const existingPivotResultState = {};
-            columnState.state = columnState.state.filter((colState) => {
-                if (pivotResultColumnsOrderSet.has(colState.colId)) {
-                    existingPivotResultState[colState.colId] = colState;
-                    return false;
-                }
-                return true;
-            });
-            layout.PivotResultColumnsOrder.forEach((colId) => {
-                columnState.state.push(existingPivotResultState[colId] || { colId });
-            });
-        }
         return columnState;
     }
     computePivotAggregations(layout, columnState) {
@@ -1583,10 +1569,8 @@ export class LayoutManager extends LMEmitter {
                 this.gridApi.applyColumnState(columnState);
             });
             this.computePivotAggregations(layout, columnState);
-            if (Array.isArray(layout.PivotResultColumnsOrder)) {
-                columnState.applyOrder = true;
-            }
             this.gridApi.applyColumnState(columnState);
+            this.applyPivotResultColumnsState(layout);
             if (layout.ColumnSizing) {
                 const colWidthForPivotResultColumns = [];
                 (this.gridApi.getPivotResultColumns() || []).forEach((col) => {
@@ -1608,6 +1592,43 @@ export class LayoutManager extends LMEmitter {
             }
         });
     }
+    applyPivotResultColumnsState(layout) {
+        const existingPivotResultColIds = (this.gridApi.getPivotResultColumns() || []).map((col) => col.getColId());
+        if (!existingPivotResultColIds.length) {
+            return;
+        }
+        const existingSet = new Set(existingPivotResultColIds);
+        const persistedOrder = Array.isArray(layout.PivotResultColumnsOrder) && layout.PivotResultColumnsOrder.length > 0
+            ? layout.PivotResultColumnsOrder
+            : null;
+        let orderedColIds = existingPivotResultColIds;
+        if (persistedOrder) {
+            const desiredSet = new Set(persistedOrder);
+            const knownColIds = existingPivotResultColIds.filter((colId) => desiredSet.has(colId));
+            const extraColIds = existingPivotResultColIds.filter((colId) => !desiredSet.has(colId));
+            orderedColIds = [
+                ...sortColumnIdsByOrder(knownColIds, persistedOrder).filter((colId) => existingSet.has(colId)),
+                ...extraColIds,
+            ];
+        }
+        const sorts = layout.ColumnSorts || [];
+        const sortIndexes = new Map(sorts.map((sort, index) => [sort.ColumnId, index]));
+        const pinning = layout.ColumnPinning || {};
+        const state = orderedColIds.map((colId) => {
+            const sortIndex = sortIndexes.get(colId);
+            const sort = sortIndex != null ? sorts[sortIndex] : undefined;
+            return {
+                colId,
+                sort: sort ? (sort.SortOrder === 'Asc' ? 'asc' : 'desc') : null,
+                sortIndex: sort ? sortIndex : null,
+                pinned: pinning[colId] ?? null,
+            };
+        });
+        this.gridApi.applyColumnState({
+            state,
+            applyOrder: !!persistedOrder,
+        });
+    }
     applyPivotTotals(layout) {
         if (layout.PivotGrandTotal) {
             const pivotGrandTotal = layout.PivotGrandTotal === true || layout.PivotGrandTotal === 'before'

package/src/types.d.ts

@@ -34,7 +34,7 @@ export type { OpenFinPluginOptions } from './AdaptableOptions/OpenFinPluginOptio
 export type { InteropioPluginOptions } from './AdaptableOptions/InteropioPluginOptions';
 export type { MasterDetailPluginOptions, DetailInitContext, } from './AdaptableOptions/MasterDetailPluginOptions';
 export type { DateInputOptions } from './AdaptableOptions/DateInputOptions';
-export type { FilterOptions, ColumnFilterOptions, GridFilterOptions, IsRowFilterableContext, InFilterValueInfo, InFilterValueResult, InFilterValue, CustomInFilterValuesContext, GridFilterEditors, DefaultPredicateFilterContext, AdaptableFilterComponentLocation, } from './AdaptableOptions/FilterOptions';
+export type { FilterOptions, ColumnFilterOptions, GridFilterOptions, IsRowFilterableContext, InFilterValueInfo, InFilterValueResult, InFilterValue, CustomInFilterValuesContext, InFilterLabelContext, GridFilterEditors, DefaultPredicateFilterContext, AdaptableFilterComponentLocation, } from './AdaptableOptions/FilterOptions';
 export type { QuickSearchOptions, QuickSearchContext } from './AdaptableOptions/QuickSearchOptions';
 export type { FormatColumnOptions, CustomDisplayFormatter, CustomDisplayFormatterContext, } from './AdaptableOptions/FormatColumnOptions';
 export type { PlusMinusOptions } from './AdaptableOptions/EditOptions';