@adaptabletools/adaptable 18.0.0-canary.1 → 18.0.0-canary.11

package/src/View/CalculatedColumn/utils.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableApi, CalculatedColumn } from '../../types';
-export declare const getExpressionType: (calculatedColumn: CalculatedColumn, api: AdaptableApi) => "ScalarExpression" | "AggregatedScalarExpression" | "CumulativeAggregatedExpression" | "QuantileAggregatedExpression";
+export declare const getExpressionType: (calculatedColumn: CalculatedColumn, api: AdaptableApi) => "AggregatedScalarExpression" | "ScalarExpression" | "CumulativeAggregatedExpression" | "QuantileAggregatedExpression";

package/src/View/CellSummary/CellSummaryPopup.js

@@ -11,7 +11,7 @@ class CellSummaryPopupComponent extends React.Component {
             // afterwards, we will go on with the cell summary logic, as that will evaluate the current(column) cell selection
             this.props.api.columnApi.selectColumn((_c = this.props.popupParams) === null || _c === void 0 ? void 0 : _c.column.columnId);
             // we also need to update the internal state of the selected cells
-            this.props.api.internalApi.getAdaptableInstance().setSelectedCells();
+            this.props.api.internalApi.getAdaptableInstance().refreshSelectedCellsState();
         }
         this.props.onCreateCellSummary();
     }

package/src/View/Comments/CommentsPopup.js

@@ -29,8 +29,8 @@ const CellComments = (props) => {
                     return formatDate(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
                 },
             },
-            message: {
-                header: 'Message',
+            text: {
+                header: 'Text',
                 field: 'Value',
                 defaultFlex: 3,
             },
@@ -38,15 +38,19 @@ const CellComments = (props) => {
         return columns;
     }, []);
     const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
+    const primaryKeyHeader = React.useMemo(() => {
+        const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+        return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
+    }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
     return (React.createElement(Panel, { mb: 2, header: React.createElement(Flex, { width: "100%", alignItems: "center" },
             React.createElement(Box, { mr: 2 },
                 "Cell Value: ",
                 cellValue),
             React.createElement(Box, { mr: 2 },
-                "Primary Key: [",
-                props.commentThread.PrimaryKeyValue,
-                "]"),
+                primaryKeyHeader,
+                ": ",
+                props.commentThread.PrimaryKeyValue),
             React.createElement(Box, null,
                 "Column: ",
                 columnFriendlyName),
@@ -72,11 +76,11 @@ const CellComments = (props) => {
                 }, rowHeight: 30, columnHeaderHeight: 30, domProps: tableDOMProps, columns: columnsMap }))));
 };
 export const CommentsPopup = (props) => {
-    const cellComments = useSelector((state) => {
+    const commentThreads = useSelector((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (cellComments !== null && cellComments !== void 0 ? cellComments : []).map((cellComments, index) => {
+    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads !== null && commentThreads !== void 0 ? commentThreads : []).map((commentThread, index) => {
         var _a;
-        return React.createElement(CellComments, { key: (_a = cellComments === null || cellComments === void 0 ? void 0 : cellComments.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: cellComments });
+        return React.createElement(CellComments, { key: (_a = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: commentThread });
     })));
 };

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/NewScopeComponent.js

@@ -56,6 +56,7 @@ export const renderScopeSummary = (scope, labels) => {
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 export const NewScopeComponent = (props) => {
+    var _a, _b;
     const { api } = useAdaptable();
     const { scopeApi, columnApi } = api;
     const [columnsSearchText, setColumnsSearchText] = useState('');
@@ -79,6 +80,9 @@ export const NewScopeComponent = (props) => {
         if (scopeApi.scopeHasDataType(props.scope)) {
             return 'DataType';
         }
+        if (scopeApi.scopeHasColumnType(props.scope)) {
+            return 'ColumnType';
+        }
         return undefined;
     };
     const onScopeSelectChanged = (value) => {
@@ -93,6 +97,11 @@ export const NewScopeComponent = (props) => {
                 DataTypes: [],
             };
         }
+        else if (value == 'ColumnType') {
+            newScope = {
+                ColumnTypes: [],
+            };
+        }
         else {
             newScope = {
                 All: true,
@@ -128,6 +137,10 @@ export const NewScopeComponent = (props) => {
     if (Array.isArray(props.availableDataTypes)) {
         dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
     }
+    const hasColumnTypes = React.useMemo(() => {
+        var _a;
+        return ((_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, []);
     return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
             React.createElement(Radio, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
@@ -135,6 +148,8 @@ export const NewScopeComponent = (props) => {
             React.createElement(Radio, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
         !props.disableDataTypes && (React.createElement(Tabs.Tab, { value: "DataType" },
             React.createElement(Radio, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+        hasColumnTypes && (React.createElement(Tabs.Tab, { value: "ColumnType" },
+            React.createElement(Radio, { margin: 0, value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
         !props.disableColumns && (React.createElement(Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
@@ -147,5 +162,23 @@ export const NewScopeComponent = (props) => {
         !props.disableDataTypes && (React.createElement(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
             React.createElement(Box, null,
                 props.descriptions.dataTypeScope && (React.createElement(Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label)))))))));
+                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
+        hasColumnTypes && (React.createElement(Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
+            React.createElement(Box, null,
+                React.createElement(Flex, { flexDirection: "column" }, (_b = (_a = api.optionsApi.getColumnTypes()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (columnType) => {
+                    var _a;
+                    return (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
+                            let columnTypes = [].concat(props.scope.ColumnTypes);
+                            if (checked) {
+                                columnTypes.push(columnType);
+                            }
+                            else {
+                                columnTypes = columnTypes.filter((ct) => ct !== columnType);
+                            }
+                            let newScope = {
+                                ColumnTypes: columnTypes,
+                            };
+                            props.updateScope(newScope);
+                        } }, columnType));
+                })))))));
 };

package/src/View/Components/Popups/AdaptableLoadingScreen.d.ts

@@ -1,8 +1,9 @@
-import * as React from 'react';
-export interface IAdaptableLoadingScreenProps extends React.ClassAttributes<AdaptableLoadingScreen> {
+/// <reference types="react" />
+export interface IAdaptableLoadingScreenProps {
     showLoadingScreen: boolean;
+    loadingScreenDelay?: number;
+    loadingScreenTitle?: string;
+    loadingScreenText?: string;
     onClose?: () => {};
 }
-export declare class AdaptableLoadingScreen extends React.Component<IAdaptableLoadingScreenProps, {}> {
-    render(): JSX.Element;
-}
+export declare function AdaptableLoadingScreen(props: IAdaptableLoadingScreenProps): JSX.Element;

package/src/View/Components/Popups/AdaptableLoadingScreen.js

@@ -1,13 +1,23 @@
 import * as React from 'react';
 import Dialog from '../../../components/Dialog';
 import { Box } from 'rebass';
-export class AdaptableLoadingScreen extends React.Component {
-    render() {
-        return (React.createElement(Dialog, { modal: true, isOpen: this.props.showLoadingScreen, onDismiss: this.props.onClose, showCloseButton: false, style: {
-                minHeight: 'auto',
-            } },
-            React.createElement(Box, { padding: 3 },
-                React.createElement("h4", null, "Initialising Grid"),
-                React.createElement("p", null, "Retrieving your settings and setting up the grid..."))));
-    }
+export function AdaptableLoadingScreen(props) {
+    const { showLoadingScreen, loadingScreenDelay, loadingScreenTitle, loadingScreenText } = props;
+    const [delayElapsed, setDelayElapsed] = React.useState(typeof loadingScreenDelay === 'number' ? false : showLoadingScreen);
+    React.useEffect(() => {
+        if (typeof loadingScreenDelay === 'number') {
+            const timeoutId = setTimeout(() => {
+                setDelayElapsed(true);
+            }, loadingScreenDelay);
+            return () => {
+                clearTimeout(timeoutId);
+            };
+        }
+    }, [loadingScreenDelay]);
+    return (React.createElement(Dialog, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen", style: {
+            minHeight: 'auto',
+        } },
+        React.createElement(Box, { padding: 3 },
+            React.createElement("h4", null, loadingScreenTitle !== null && loadingScreenTitle !== void 0 ? loadingScreenTitle : 'Initialising Grid'),
+            React.createElement("p", null, loadingScreenText !== null && loadingScreenText !== void 0 ? loadingScreenText : 'Retrieving your settings and setting up the grid...'))));
 }

package/src/View/Components/Popups/AdaptableToaster.js

@@ -12,7 +12,7 @@ export const showToast = (props) => {
     });
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
     const toastProps = ObjectFactory.CreateToastOptions(adaptableOptions.notificationsOptions, {
-        containerId: adaptableOptions.adaptableId,
+        containerId: `Toastify-${adaptableOptions.adaptableId}`,
         onClose: () => {
             off();
         },

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -23,7 +23,7 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
         api.notesApi.updateNoteText(value, note);
     }, [note]);
     return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
-        React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Value, onNoteChange: (value) => handleNoteChange(value) })));
+        React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Text, onNoteChange: (value) => handleNoteChange(value) })));
 };
 export const GridCellPopup = (props) => {
     const { api } = useAdaptable();

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -4,4 +4,5 @@ export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
 export declare const SHOW_EXPORT_TABLE = "SHOW_EXPORT_TABLE";
 export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
+export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -2,13 +2,16 @@ import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup
 import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
 import { ExportTablePopup } from '../../../Export/ExportTablePopup';
 import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
+import { TransposedPopup } from '../../../Layout/TransposedPopup';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
 export const SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
 export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
+export const WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 export const windowFactory = {
     [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
     [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
     [SHOW_EXPORT_TABLE]: ExportTablePopup,
     [SHOW_THEME_EDITOR]: ThemeEditorWindow,
+    [WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup,
 };

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -9,7 +9,7 @@ export const PermittedValuesSelector = function (props) {
     const [filter, setFilter] = React.useState('');
     const columnType = React.useMemo(() => {
         return adaptable.api.columnApi.getColumnDataTypeForColumnId(props.columnId);
-    }, []);
+    }, [props.columnId]);
     React.useEffect(() => {
         if (!props.columnId) {
             setIsLoading(false);

package/src/View/CustomSort/CustomSortSummary.js

@@ -33,7 +33,7 @@ export class CustomSortSummaryComponent extends React.Component {
     }
     render() {
         const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
-        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn);
+        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn.columnId);
         let noCustomSort = customSort == null && columnSortComparer == null;
         let customSortRow;
         if (!this.props.summarisedColumn.sortable) {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { useAdaptable } from '../AdaptableContext';
 import { useEffect, useRef, useState } from 'react';
+import { useAdaptable } from '../AdaptableContext';
 import usePrevious from '../../components/utils/usePrevious';
 import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
 import { buildActionColumnButton } from './buildActionColumnButton';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 export const DataChangeHistoryGrid = (props) => {
     const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange, onClearRow } = props;
     const mainAdaptableInstance = useAdaptable();
@@ -20,13 +21,12 @@ export const DataChangeHistoryGrid = (props) => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
             const modules = mainAdaptableInstance.getAgGridRegisteredModules();
-            const agGridConfig = {
+            const dataChangeHistoryAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
                 gridOptions,
-                modules: modules,
-            };
-            // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
-            const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
-            const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+                modules,
+            });
             setAdaptableApi(dataChangeHistoryAdaptableApi);
         };
         initializeAdaptableGrid();
@@ -65,7 +65,7 @@ export const DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.gridApi.getAgGridInstance().api.applyTransactionAsync({
+        adaptableApi.agGridApi.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -23,6 +23,7 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
     const handleEnter = (e) => {
         if (e.key === 'Enter') {
+            e.preventDefault();
             runQuery();
         }
     };
@@ -44,8 +45,9 @@ const QueryViewPanelComponent = (props) => {
                         fontFamily: 'monospace',
                         fontSize: 12,
                         maxHeight: 52,
-                        height: 21,
-                        paddingTop: 7,
+                        height: '100%',
+                        paddingTop: 6,
+                        overflow: 'hidden',
                         zIndex: 100,
                     }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
             isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
@@ -71,11 +73,13 @@ const QueryViewPanelComponent = (props) => {
                         maxHeight: 60,
                         paddingTop: 7,
                         zIndex: 100,
+                        height: '100%',
+                        overflow: 'hidden',
                     }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
     const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
     const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
     const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
         React.createElement(Icon, { name: 'list' })));

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -9,8 +9,8 @@ import { AdaptableObjectCollection } from '../../Components/AdaptableObjectColle
 import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
-import env from '../../../env';
-const version = env.VERSION;
+import { ADAPTABLE_VERSION } from '../../../EnvVars';
+const version = ADAPTABLE_VERSION;
 export const GridInfoPopup = (props) => {
     const CreateGridSummaries = (colItems) => {
         var _a;
@@ -39,7 +39,6 @@ export const GridInfoPopup = (props) => {
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));

package/src/View/Layout/TransposedPopup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const TransposedPopup: (props: WindowPopupChildProps) => JSX.Element;

package/src/View/Layout/TransposedPopup.js

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import Panel from '../../components/Panel';
+import { useAdaptable } from '../AdaptableContext';
+import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
+export const TransposedPopup = (props) => {
+    const adaptable = useAdaptable();
+    const rowNodes = React.useMemo(() => {
+        return adaptable.api.gridApi.getAllRowNodes();
+    }, [
+    // can be later triggered by ticking data
+    ]);
+    const { transposedColumnId, hideTransposedColumn = true } = props.popupProps;
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    // Thist must be qunique
+    const transposeByColumnId = primaryKey;
+    // Only used to show nice values a the top of the grid, istead on the value
+    // of the primarykey
+    const [synteticTransposedByColumnId, setSynteticTransposedByColumnId] = React.useState(transposedColumnId !== null && transposedColumnId !== void 0 ? transposedColumnId : primaryKey);
+    const columns = React.useMemo(() => {
+        // customisable
+        return adaptable.api.columnApi.getColumns();
+    }, []);
+    const adaptableContainerId = 'transposed-adaptable-container';
+    const agGridContainerId = 'transposed-adaptable-ag-grid-container';
+    /**
+     * This is used as first field
+     */
+    const transposedFirstColumnField = '_transposed_column_value';
+    const transposedFirstColumnHeader = '_transposed_column_header';
+    const transposedRowsAndColumns = React.useMemo(() => {
+        /**
+         * transposed column values become primaryKey of the new tarnsposed rows
+         * we build row by row, might be easer
+         */
+        const transposedColumns = [];
+        const transposedRows = [];
+        for (const row of rowNodes) {
+            // we force the col-ids to be strings, easer to work with
+            //row[transposeByColumnId] + '';
+            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId) + '';
+            //row[synteticTransposedByColumnId] + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, synteticTransposedByColumnId) + '';
+            transposedColumns.push({
+                colId,
+                header,
+            });
+        }
+        for (const column of columns) {
+            /**
+             * We can hide the transposed column, if we want
+             */
+            if (hideTransposedColumn && column.columnId === synteticTransposedByColumnId) {
+                continue;
+            }
+            const transposedRow = {
+                // [transposed-by-column-id]: [other column id],
+                // the value can be set to friendlyname
+                [transposedFirstColumnField]: column.columnId,
+                [transposedFirstColumnHeader]: column.friendlyName,
+            };
+            for (let row of rowNodes) {
+                // [transposed-by-column-value[n]]: [other column value[n]]
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId);
+                // row[column.field]
+                let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
+                if (value instanceof Date) {
+                    value = value.toLocaleString();
+                }
+                transposedRow[key] = value;
+            }
+            transposedRows.push(transposedRow);
+        }
+        return {
+            transposedColumns,
+            transposedRows,
+        };
+    }, [rowNodes, primaryKey, synteticTransposedByColumnId]);
+    React.useEffect(() => {
+        // Mounting in an effect, so the nodes are rendered/available
+        const hostAdaptableOptions = adaptable.adaptableOptions;
+        const adaptableOptions = {
+            primaryKey: transposedFirstColumnField,
+            licenseKey: hostAdaptableOptions.licenseKey,
+            userName: `${hostAdaptableOptions.userName}`,
+            adaptableId: `${hostAdaptableOptions.adaptableId}::TransposedView`,
+            containerOptions: {
+                adaptableContainer: adaptableContainerId,
+                agGridContainer: agGridContainerId,
+            },
+            entitlementOptions: {
+                defaultAccessLevel: 'Hidden',
+            },
+            layoutOptions: {
+                createDefaultLayout: false,
+                autoSizeColumnsInLayout: true,
+            },
+            predefinedConfig: {
+                Layout: {
+                    Revision: Date.now(),
+                    CurrentLayout: 'TransposedView',
+                    Layouts: [
+                        {
+                            Name: 'TransposedView',
+                            Columns: [
+                                transposedFirstColumnHeader,
+                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                            ],
+                            PinnedColumnsMap: {
+                                [transposedFirstColumnHeader]: 'left',
+                            },
+                        },
+                    ],
+                },
+                Theme: {
+                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
+                },
+            },
+        };
+        const firstColumn = {
+            field: transposedFirstColumnHeader,
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(synteticTransposedByColumnId),
+        };
+        const agGridOptions = {
+            suppressLoadingOverlay: true,
+            defaultColDef: {
+                floatingFilter: false,
+                filter: false,
+                sortable: true,
+                resizable: true,
+                enableRowGroup: false,
+                editable: false,
+                enablePivot: false,
+                enableValue: false,
+                lockPinned: true,
+                menuTabs: [],
+                width: 120,
+            },
+            columnDefs: [
+                {
+                    field: transposedFirstColumnField,
+                    hide: true,
+                },
+                firstColumn,
+                ...transposedRowsAndColumns.transposedColumns.map((col) => {
+                    return {
+                        field: col.colId,
+                        type: null,
+                        headerName: col.header,
+                    };
+                }),
+            ],
+            rowData: transposedRowsAndColumns.transposedRows,
+            sideBar: false,
+        };
+        const modules = adaptable.getAgGridRegisteredModules();
+        let transposedAdaptableApi;
+        (async () => {
+            transposedAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
+                gridOptions: agGridOptions,
+                modules,
+            });
+            adaptable.api.eventApi.on('ThemeChanged', (event) => {
+                transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            });
+        })();
+        return () => {
+            if (transposedAdaptableApi) {
+                transposedAdaptableApi.destroy();
+            }
+        };
+    }, [synteticTransposedByColumnId]);
+    /**
+     * Need to get all data, manualy pivot the grid using the primary key.
+     *
+     * 1. get the data, and pivot using the primary key
+     * 2. create the col definitios, a col definition for each row
+     * 3. create the grid
+     */
+    return (React.createElement(Flex, { flexDirection: "column", width: "100%", height: "100%" },
+        React.createElement(Panel, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Elevated Column" },
+                    React.createElement(ColumnSelector, { value: synteticTransposedByColumnId, onChange: (colId) => {
+                            setSynteticTransposedByColumnId(colId);
+                        } })))),
+        React.createElement(Flex, { height: "100%" },
+            React.createElement(Box, { id: "transposed-adaptable-container" }),
+            React.createElement(Box, { height: "100%", width: "100%", id: "transposed-adaptable-ag-grid-container" }))));
+};

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -34,7 +34,7 @@ export const LayoutWizard = (props) => {
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.api.gridApi.getAgGridInstance().suppressAggFuncInHeader;
+                !!adaptable.agGridAdapter.initialGridOptions.suppressAggFuncInHeader;
         }
         return preparedLayout;
     });