@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.0

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -3,32 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutStatusBarSubPanelPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
-const LayoutRadioSelector_1 = require("./LayoutRadioSelector");
-const colItems = [
-    { Content: 'Current', Size: 2 },
-    { Content: 'Layout Name', Size: 4 },
-];
 exports.LayoutStatusBarSubPanelPopover = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
-    const accessLevel = adaptable.EntitlementService.getEntitlementAccessLevelForModule(ModuleConstants.LayoutModuleId);
     const layouts = adaptable.api.layoutApi.getAllLayout();
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-        React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
-        layouts.map((layout) => {
-            return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: layout.Name, colItems: [
-                    {
-                        Content: (React.createElement(LayoutRadioSelector_1.LayoutRadioSelector, { accessLevel: accessLevel, id: layout.Name, data: layout })),
-                        Size: 1,
-                    },
-                    {
-                        Content: (React.createElement("label", { style: { cursor: 'pointer' }, htmlFor: layout.Name }, layout.Name)),
-                        Size: 4,
-                    },
-                ] }));
-        })));
+    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Uuid }));
+    const handleChange = (option) => {
+        adaptable.api.layoutApi.setLayout(option.label);
+    };
+    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleChange });
 };

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -223,7 +223,7 @@ exports.LayoutEditor = React.memo((props) => {
                         // JW: Not sure we do - why not just make it always visible as we ignore if if not required.
                         const aggregateEnabled = true;
                         const customHeader = headerColumnsMap[c.columnId];
-                        const initialHeader = api.internalApi.getUserDefinedHeaderName(c.columnId);
+                        const initialHeader = api.columnApi.getFriendlyNameFromColumnId(c.columnId);
                         return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.columnId },
                             React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "secondary", color: "text-on-secondary" },
                                 React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" },

package/src/View/Layout/Wizard/LayoutEditorWizard.d.ts

@@ -27,6 +27,7 @@ export declare class LayoutEditorWizard extends React.Component<LayoutEditorWiza
             [columnId: string]: number;
         };
         ColumnSorts?: import("../../../types").ColumnSort[];
+        ColumnFilters?: import("../../../types").ColumnFilter[];
         RowGroupedColumns?: string[];
         ExpandedRowGroupValues?: any[];
         AggregationColumns?: Record<string, string | true>;

package/src/View/SmartEdit/SmartEditPopup.js

@@ -47,7 +47,7 @@ class SmartEditPopupComponent extends React.Component {
             operationMenuItems.push(...customOperations.map((operation) => {
                 return {
                     onClick: () => this.props.onSmartEditOperationChange(operation),
-                    label: operation.Name,
+                    label: operation.name,
                 };
             }));
         }
@@ -60,7 +60,7 @@ class SmartEditPopupComponent extends React.Component {
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
                 React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
-                    ? this.props.SmartEditOperation.Name
+                    ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
                 React.createElement(Input_1.default, { value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
                 React.createElement(SimpleButton_1.default, { tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -55,7 +55,7 @@ class SmartEditViewPanelComponent extends React.Component {
             operationMenuItems.push(...customOperations.map((operation) => {
                 return {
                     onClick: () => this.props.onSmartEditOperationChange(operation),
-                    label: operation.Name,
+                    label: operation.name,
                 };
             }));
         }
@@ -70,7 +70,7 @@ class SmartEditViewPanelComponent extends React.Component {
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
                 React.createElement(DropdownButton_1.default, { className: `ab-${elementType}__SmartEdit__select`, marginRight: 2, items: operationMenuItems, style: { fontSize: 'small' }, columns: ['label'], disabled: shouldDisable, variant: "outlined" }, typeof this.props.SmartEditOperation === 'object'
-                    ? this.props.SmartEditOperation.Name
+                    ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
                 React.createElement(Input_1.default, { style: {
                         width: '5rem',

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -12,7 +12,7 @@ const AdaptableContext_1 = require("./AdaptableContext");
 exports.SpecialColumnSettingsWizardStep = (props) => {
     var _a, _b;
     const adaptable = AdaptableContext_1.useAdaptable();
-    const possibleColumnTypes = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions.columnTypes;
+    const possibleColumnTypes = adaptable.api.internalApi.getAdaptableOptions().columnOptions.columnTypes;
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_a = props.settings) !== null && _a !== void 0 ? _a : {};
     const handleColumnTypeChange = (columnType, checked) => {
         var _a, _b, _c;

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -39,6 +39,6 @@ exports.AdaptableStatusBar = (props) => {
                 dispatch(menuItem.reduxAction);
             }
         });
-        return (React.createElement(StatusBarPanel_1.StatusBarPanel, Object.assign({ "data-name": subPanel }, statusBarPanelProps, { onAction: onAction, icon: (_f = statusBarPanelProps.icon) !== null && _f !== void 0 ? _f : moduleInfo.Glyph, key: subPanel })));
+        return (React.createElement(StatusBarPanel_1.StatusBarPanel, Object.assign({ "data-name": subPanel }, statusBarPanelProps, { tooltip: moduleInfo.FriendlyName, onAction: onAction, icon: (_f = statusBarPanelProps.icon) !== null && _f !== void 0 ? _f : moduleInfo.Glyph, key: subPanel })));
     })));
 };

package/src/View/StatusBar/StatusBarPanel.d.ts

@@ -32,6 +32,7 @@ export interface StatusBarPanelProps extends Omit<FlexProps, 'content'> {
     view?: React.FunctionComponent;
     onAction?: () => void;
     extraActions?: React.FunctionComponent[];
+    tooltip?: string;
 }
 /**
  * Statusbar sub panel are similar to vs code:

package/src/View/StatusBar/StatusBarPanel.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 /**
  * Statusbar sub panel are similar to vs code:
@@ -14,7 +15,7 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
  */
 exports.StatusBarPanel = (props) => {
     var _a;
-    const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true } = props, flexProps = tslib_1.__rest(props, ["icon", "content", "popover", "popoverMinWidth", "view", "onAction", "extraActions", "triggerActionOnWrapperClick"]);
+    const { icon, content, popover, popoverMinWidth, view, onAction, extraActions, triggerActionOnWrapperClick = true, tooltip } = props, flexProps = tslib_1.__rest(props, ["icon", "content", "popover", "popoverMinWidth", "view", "onAction", "extraActions", "triggerActionOnWrapperClick", "tooltip"]);
     const handleAction = () => onAction();
     if (view) {
         const View = view;
@@ -39,7 +40,7 @@ exports.StatusBarPanel = (props) => {
         ? React.createElement(content)
         : content;
     return (React.createElement(rebass_1.Flex, Object.assign({}, flexProps, { alignItems: "center", justifyContent: "center", as: shouldTriggerActionOnWrapperClick ? 'button' : 'div', className: baseClassName, onClick: handleWrapperClick }),
-        props.icon && (React.createElement(SimpleButton_1.default, { color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
-        popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent), (_a = extraActions === null || extraActions === void 0 ? void 0 : extraActions.map) === null || _a === void 0 ? void 0 :
-        _a.call(extraActions, (action, index) => React.createElement(action, { key: index }))));
+        props.icon && (React.createElement(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
+        popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
+        ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(rebass_1.Box, { ml: 1 }, (_a = extraActions === null || extraActions === void 0 ? void 0 : extraActions.map) === null || _a === void 0 ? void 0 : _a.call(extraActions, (action, index) => React.createElement(action, { key: index }))))));
 };

package/src/View/Theme/ThemeStatusPanelPopover.js

@@ -3,34 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeStatusPanelPopover = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const PanelWithRow_1 = require("../Components/Panels/PanelWithRow");
-const colItems = [
-    { Content: 'Current', Size: 2 },
-    { Content: 'Theme Name', Size: 4 },
-];
 exports.ThemeStatusPanelPopover = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const themes = adaptable.api.themeApi.getAllTheme();
-    const currentTheme = adaptable.api.themeApi.getCurrentTheme();
-    const handleThemeChange = React.useCallback((theme) => {
-        adaptable.api.themeApi.loadTheme(theme.Name);
+    const handleThemeChange = React.useCallback((option) => {
+        adaptable.api.themeApi.loadTheme(option.label);
     }, []);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-        React.createElement(PanelWithRow_1.PanelWithRow, { colItems: colItems }),
-        themes.map((theme) => {
-            return (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: theme.Name, colItems: [
-                    {
-                        Content: (React.createElement(Radio_1.default, { onClick: () => handleThemeChange(theme), id: theme.Name, checked: currentTheme === theme.Name })),
-                        Size: 1,
-                    },
-                    {
-                        Content: (React.createElement("label", { style: { cursor: 'pointer' }, htmlFor: theme.Name }, theme.Name)),
-                        Size: 4,
-                    },
-                ] }));
-        })));
+    const options = themes.map((theme) => ({ label: theme.Name, value: theme.Uuid }));
+    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleThemeChange });
 };

package/src/View/UIHelper.d.ts

@@ -3,7 +3,7 @@ import { EditableConfigEntityState } from './Components/SharedProps/EditableConf
 import { StatusColour } from '../PredefinedConfig/Common/Enums';
 import { AdaptableStyle } from '../PredefinedConfig/Common/AdaptableStyle';
 import { Schedule, Weekday } from '../PredefinedConfig/Common/Schedule';
-import { AdaptableOptions } from '../types';
+import { AdaptableColumnDataType, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../PredefinedConfig/Common/AdaptableMessageType';
 export declare const BLACK: string;
@@ -29,8 +29,8 @@ export declare const ORANGE: string;
 export declare function getHexForName(name: string): string;
 export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
-export declare function getDescriptionForDataType(dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown'): "string" | "number" | "date";
-export declare function getPlaceHolderforDataType(dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown'): "Enter Value" | "Enter Number" | "Enter Date";
+export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "string" | "number" | "date";
+export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
 export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
@@ -58,7 +58,7 @@ export declare const UIHelper: {
     getDefaultColors: typeof getDefaultColors;
     getEmptyConfigState: typeof getEmptyConfigState;
     getDescriptionForDataType: typeof getDescriptionForDataType;
-    getPlaceHolderforDataType: typeof getPlaceHolderforDataType;
+    getPlaceHolderforDataType: typeof getPlaceholderForDataType;
     getModalContainer: typeof getModalContainer;
     IsEmptyStyle: typeof IsEmptyStyle;
     IsNotEmptyStyle: typeof IsNotEmptyStyle;

package/src/View/UIHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceHolderforDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
+exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceholderForDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
 const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -118,7 +118,7 @@ function getDescriptionForDataType(dataType) {
     }
 }
 exports.getDescriptionForDataType = getDescriptionForDataType;
-function getPlaceHolderforDataType(dataType) {
+function getPlaceholderForDataType(dataType) {
     switch (dataType) {
         case Enums_1.DataType.String:
             return 'Enter Value';
@@ -128,7 +128,7 @@ function getPlaceHolderforDataType(dataType) {
             return 'Enter Date';
     }
 }
-exports.getPlaceHolderforDataType = getPlaceHolderforDataType;
+exports.getPlaceholderForDataType = getPlaceholderForDataType;
 function getModalContainer(adaptableOptions, document) {
     let modalContainer;
     if (adaptableOptions.containerOptions.modalContainer) {
@@ -466,7 +466,7 @@ exports.UIHelper = {
     getDefaultColors,
     getEmptyConfigState,
     getDescriptionForDataType,
-    getPlaceHolderforDataType,
+    getPlaceHolderforDataType: getPlaceholderForDataType,
     getModalContainer,
     IsEmptyStyle,
     IsNotEmptyStyle,

package/src/agGrid/ActionColumnRenderer.js

@@ -51,7 +51,8 @@ class ActionColumnRenderer {
                             width: 15,
                         },
                     };
-                    const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context);
+                    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                     const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
@@ -66,7 +67,7 @@ class ActionColumnRenderer {
                     };
                     const disabled = button.disabled && button.disabled(button, context);
                     return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
-                        button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                         buttonLabel));
                 })));
             };

package/src/agGrid/Adaptable.d.ts

@@ -18,6 +18,7 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
+import { AdaptableColumnType } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -61,6 +62,7 @@ export declare class Adaptable implements IAdaptable {
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
+    hasAdaptableToolPanel: boolean;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;
@@ -119,6 +121,7 @@ export declare class Adaptable implements IAdaptable {
     private initializeAgGrid;
     private isAgGridReady;
     private initAgGridContainerFromInitializedAgGrid;
+    private createAdaptableSideBarDef;
     private createStatusBars;
     getAgGridStatusPanels(): import("@ag-grid-community/all-modules").StatusPanelDef[];
     debouncedSetColumnIntoStore: import("lodash").DebouncedFunc<() => void>;
@@ -238,7 +241,7 @@ export declare class Adaptable implements IAdaptable {
         suppressMovable: boolean;
         headerTooltip: string;
         cellEditor: string | typeof AdaptableNumberEditor | typeof AdaptableDateEditor;
-        type: string[];
+        type: AdaptableColumnType[];
         valueSetter: (params: ValueSetterParams) => any;
         cellRenderer: import("@ag-grid-community/all-modules").ICellRendererFunc;
         valueGetter: (params: ValueGetterParams) => any;
@@ -281,7 +284,6 @@ export declare class Adaptable implements IAdaptable {
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnTooltipValueGetter({ col, colId }: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
-    getUserDefinedHeaderName(columnId: string): string;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnFloatingFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnValueFormatter({ col, abColumn }: ColumnSetupInfo): void;

package/src/agGrid/Adaptable.js

@@ -375,7 +375,7 @@ class Adaptable {
         // Build the default group sort comparator - will get custom sort values (but not functions) in real time
         // TODO: if  a custom 'aggFunc' property is defined (see setupColumnAggFunc()), it won't be evaluated
         if (!this.getInitialGroupOrderComparator(this.gridOptions) &&
-            this.adaptableOptions.generalOptions.autoOrderGroupedColumns) {
+            this.adaptableOptions.columnOptions.autoOrderGroupedColumns) {
             this.gridOptions.initialGroupOrderComparator =
                 this.agGridHelper.runAdaptableGroupComparerFunction();
         }
@@ -455,6 +455,13 @@ class Adaptable {
             }).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();
@@ -519,16 +526,18 @@ class Adaptable {
             this.performAudit(data.action, data.state, data.newState);
             this.forPlugins((plugin) => plugin.onStoreEvent(eventName, data, this.adaptableStore));
             if (eventName == AdaptableStore_1.INIT_STATE) {
-                this._adaptableReady = true;
                 LoggingHelper_1.LogAdaptableInfo(`Updating obsolete configuration/state`);
                 this.adaptableModules.forEach((m) => m.updateOldConfig());
                 // call stuff here
                 // and reset state also?
                 this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
+                this._adaptableReady = true;
+                // setTimeout(() => {
                 this.api.eventApi.emit('AdaptableReady', {
                     adaptableApi: this.api,
                     gridOptions: this.adaptableOptions.gridOptions,
                 });
+                // }, 0);
             }
         });
     }
@@ -569,39 +578,19 @@ class Adaptable {
             //   this.gridOptions.components.__adaptableGroupCellRenderer = AdaptableGroupCellRenderer;
             // }
         }
-        // Create Adaptable adaptable Tool Panel
-        if (this.adaptableOptions.toolPanelOptions.showAdaptableToolPanel) {
-            if (this.gridOptions.sideBar) {
-                this.gridOptions.sideBar = this.gridOptions.sideBar || {};
-                this.gridOptions.components = this.gridOptions.components || {};
-                // https://www.ag-grid.com/javascript-grid/side-bar/
-                const sidebar = this.gridOptions.sideBar;
-                if (sidebar === true) {
-                    // Possibility 1: Sidebar is true - meaning that they want the default filter and columns, so create both:
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, true);
-                }
-                else if (sidebar === 'columns') {
-                    // Possibility 2: Sidebar is 'columns' (string) - meaning column only so create just that
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(false, true);
-                }
-                else if (sidebar === 'filters') {
-                    // Possibility 3: Sidebar is 'filters' (string) - meaning filters only so create just that
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, false);
-                }
-                else {
-                    // Possibilty 4: either no sidebar or they created their own; in either case, should add adaptable Tool panel
-                    const sidebarDef = this.gridOptions.sideBar;
-                    if (sidebarDef) {
-                        sidebarDef.toolPanels = sidebarDef.toolPanels || [];
-                        sidebarDef.toolPanels.push(this.agGridHelper.createAdaptableToolPanel());
-                        this.agGridHelper.orderToolPanels(sidebarDef.toolPanels);
-                    }
-                }
-                this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
-                if (this.gridOptions.api) {
-                    this.gridOptions.api.setSideBar(this.gridOptions.sideBar);
-                }
+        const adaptableSideBarDef = this.createAdaptableSideBarDef();
+        if (!!adaptableSideBarDef) {
+            this.gridOptions.components = this.gridOptions.components || {};
+            this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
+        }
+        if (this.agGridHelper.isSideBarDefObject(adaptableSideBarDef)) {
+            if (this.gridOptions.api) {
+                this.gridOptions.api.setSideBar(adaptableSideBarDef);
+            }
+            else {
+                this.gridOptions.sideBar = adaptableSideBarDef;
             }
+            this.hasAdaptableToolPanel = true;
         }
         this.createStatusBars();
         const checkAgGridContainer = () => {
@@ -683,6 +672,50 @@ class Adaptable {
         }
         return (this.adaptableOptions.containerOptions.agGridContainer = agGridContainer);
     }
+    createAdaptableSideBarDef() {
+        var _a;
+        if (
+        // no need to create the sidebar if it is not enabled
+        !this.gridOptions.sideBar) {
+            return;
+        }
+        if (this.gridOptions.sideBar === true) {
+            // create all tool panels with default settings
+            return {
+                toolPanels: [
+                    GeneralConstants.AGGRID_TOOLPANEL_FILTERS,
+                    GeneralConstants.AGGRID_TOOLPANEL_COLUMNS,
+                    this.agGridHelper.buildAdaptableToolPanelDef(),
+                ],
+            };
+        }
+        else if (typeof this.gridOptions.sideBar === 'string') {
+            // there is only one tool panel, and it's the adaptable one => we have to handle it
+            if (this.gridOptions.sideBar === GeneralConstants.ADAPTABLE_TOOLPANEL_ID) {
+                return {
+                    toolPanels: [this.agGridHelper.buildAdaptableToolPanelDef()],
+                };
+            }
+        }
+        else if (Array.isArray(this.gridOptions.sideBar)) {
+            if (!this.gridOptions.sideBar.includes(GeneralConstants.ADAPTABLE_TOOLPANEL_ID)) {
+                return;
+            }
+            // if it's an array, process the tool panel definitions
+            const sidebarDef = {};
+            sidebarDef.toolPanels = this.agGridHelper.mapToolPanelDefs(this.gridOptions.sideBar);
+            return sidebarDef;
+        }
+        else if (this.agGridHelper.isSideBarDefObject(this.gridOptions.sideBar)) {
+            if ((_a = this.gridOptions.sideBar.toolPanels) === null || _a === void 0 ? void 0 : _a.some((toolpanelDef) => typeof toolpanelDef !== 'string' &&
+                toolpanelDef.id === GeneralConstants.ADAPTABLE_TOOLPANEL_ID)) {
+                // return the boolean flag so that we know that we need the custom AdaptableToolPanel component
+                return true;
+            }
+            // if it's fully-fledged SideBarDef, process its tool panel definitions
+            return Object.assign(Object.assign({}, this.gridOptions.sideBar), { toolPanels: this.agGridHelper.mapToolPanelDefs(this.gridOptions.sideBar.toolPanels) });
+        }
+    }
     createStatusBars() {
         var _a, _b;
         const statusBarOptions = Object.assign({}, this.gridOptions.statusBar);
@@ -2151,11 +2184,11 @@ class Adaptable {
         }
     }
     getColDefsForRowEditColumns() {
-        var _a;
-        if (!((_a = this.adaptableOptions.userInterfaceOptions.rowActionButtons) === null || _a === void 0 ? void 0 : _a.length)) {
+        const actionRowButtons = this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtons;
+        if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
-        const editButtons = this.adaptableOptions.userInterfaceOptions.rowActionButtons
+        const editButtons = actionRowButtons
             .map((buttonName) => {
             if (buttonName === 'edit') {
                 // we need this dirty hack until ActionColumn support for custom icons is improved
@@ -2219,7 +2252,8 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                pinned: this.adaptableOptions.userInterfaceOptions.rowActionButtonsPosition === 'pinnedRight'
+                pinned: this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtonsPosition ===
+                    'pinnedRight'
                     ? 'right'
                     : 'left',
                 cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
@@ -2709,6 +2743,7 @@ class Adaptable {
             all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
             all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
         ];
+        // ADD filter event
         this.gridOptions.api.addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
             if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
                 this.debouncedSaveGridLayout();
@@ -2722,7 +2757,7 @@ class Adaptable {
             if (this.api.internalApi.isGridInPivotMode()) {
                 return;
             }
-            if (this.adaptableOptions.generalOptions.hideColumnWhenGrouped === true &&
+            if (this.adaptableOptions.columnOptions.hideColumnWhenGrouped === true &&
                 params.source !== 'api') {
                 params.columns.forEach((col) => {
                     if (col.isVisible()) {
@@ -2822,7 +2857,7 @@ class Adaptable {
             if (this.isDestroyed) {
                 return true;
             }
-            const columnFilters = this.api.filterApi.getAllColumnFilter();
+            const columnFilters = this.api.layoutApi.getAllColumnFilter();
             const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
             const isQueryActive = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.api.queryApi.getCurrentQuery());
             return (isFilterActive ||
@@ -2853,10 +2888,10 @@ class Adaptable {
             try {
                 // we then assess filters (if running locally)
                 if (evaluateFilterOnClient) {
-                    const columnFilters = this.api.filterApi.getAllColumnFilter();
+                    const columnFilters = this.api.layoutApi.getAllColumnFilter();
                     if (columnFilters.length > 0) {
                         for (const columnFilter of columnFilters) {
-                            if (!this.api.filterApi.evaluateColumnFilter(columnFilter, node)) {
+                            if (!this.api.layoutApi.evaluateColumnFilter(columnFilter, node)) {
                                 return false;
                             }
                         }
@@ -2883,7 +2918,7 @@ class Adaptable {
         this.prepareGrid();
     }
     updateColumnFilterActiveState() {
-        const columnFilters = this.api.filterApi.getAllColumnFilter();
+        const columnFilters = this.api.layoutApi.getAllColumnFilter();
         const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
         const columnsWithActiveFilters = {};
         if (isFilterActive) {
@@ -3216,14 +3251,6 @@ class Adaptable {
         const newColumnHeader = (_b = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _b === void 0 ? void 0 : _b.headerName;
         return previousColumnHeader !== newColumnHeader;
     }
-    getUserDefinedHeaderName(columnId) {
-        const column = this.gridOptions.columnApi.getColumn(columnId);
-        if (!column) {
-            return columnId;
-        }
-        const userHeaderName = this.getUserColDefProperty(column.getColId(), 'headerName');
-        return userHeaderName !== null && userHeaderName !== void 0 ? userHeaderName : StringExtensions_1.StringExtensions.CamelCaseToHumanText(column.getColDef().field);
-    }
     setupColumnFilter({ col, colDef }) {
         this.setColDefProperty(col, 'filter', () => {
             if (!colDef.filter) {
@@ -3703,7 +3730,7 @@ class Adaptable {
     }
     getRowCount() {
         return this.gridOptions.rowData
-            ? this.gridOptions.rowData.length
+            ? this.getGridData().length
             : this.gridOptions.api.getDisplayedRowCount();
     }
     getColumnCount() {

package/src/agGrid/FilterWrapper.js

@@ -15,7 +15,7 @@ exports.FilterWrapperFactory = (adaptable) => {
         }
         isFilterActive() {
             //make the small filter icon to appear when there is a filter
-            return (adaptable.api.filterApi
+            return (adaptable.api.layoutApi
                 .getAllColumnFilter()
                 .findIndex((x) => x.ColumnId == this.params.column.getColId()) > -1);
         }

package/src/agGrid/agGridHelper.d.ts

@@ -3,7 +3,7 @@ import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableColumn, AdaptableColumnGroup } from '../PredefinedConfig/Common/AdaptableColumn';
 import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/AdaptableComparerFunction';
 import { DataType } from '../PredefinedConfig/Common/Enums';
-import { AdaptableModule } from '../PredefinedConfig/Common/Types';
+import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
@@ -26,9 +26,9 @@ export declare class agGridHelper {
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;
-    createAdaptableSideBarDefs(showFilterPanel: boolean, showColumnsPanel: boolean): SideBarDef;
-    createAdaptableToolPanel(): ToolPanelDef;
-    orderToolPanels(toolPanelDefs: (ToolPanelDef | string)[]): void;
+    buildAdaptableToolPanelDef(): ToolPanelDef;
+    isSideBarDefObject(sidebarDef: unknown): sidebarDef is SideBarDef;
+    mapToolPanelDefs(toolPanelDefs?: (ToolPanelDef | string)[]): (ToolPanelDef | string)[];
     reselectSelectedCells(): void;
     fireSelectionChangedEvent(): void;
     private isColumnReadonly;
@@ -46,8 +46,8 @@ export declare class agGridHelper {
     private isColumnGrouped;
     private isColumnSparkline;
     private getColumnDataType;
-    private getabColDefValue;
-    getAgGridDataType(dataType: DataType): string;
+    private getAbColDefValue;
+    getAgGridDataType(dataType: DataType): AdaptableColumnType;
     checkShouldClearExistingFiltersOrSearches(): void;
     runAdaptableGroupComparerFunction(): AdaptableNodeComparerFunction;
     getCurrentIPPStyle(): IPPStyle;