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

package/src/agGrid/CheckboxRenderer.js

@@ -30,7 +30,7 @@ const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     CheckboxRenderer.prototype.checkedHandler = function (e) {
         let checked = e.target.checked;
         this.params.node.setDataValue(columnId, checked);
-        api.formatColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
+        api.styledColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
     };
     CheckboxRenderer.prototype.suppressEditEvent = function (event) {
         if (event.target === this.eGui) {

package/src/agGrid/FilterWrapper.js

@@ -2,27 +2,71 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
 let FilterWrapperFactory = (adaptable) => {
+    function isFilterActive(colId) {
+        // we need this here
+        if (adaptable.isDestroyed) {
+            return false;
+        }
+        //make the small filter icon to appear when there is a filter
+        return adaptable.api.filterApi.getColumnFilters().findIndex((x) => x.ColumnId == colId) > -1;
+    }
+    function getFilterContext(colId, hidePopup) {
+        let column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+        let filterContext = {
+            Column: column,
+            Adaptable: adaptable,
+            ShowCloseButton: hidePopup,
+        };
+        return filterContext;
+    }
+    function getContainerId(colId) {
+        return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return (0, react_1.forwardRef)(function ReactFilterWrapper(props, ref) {
+            const [filterContext, setFilterContext] = (0, react_1.useState)(null);
+            const colId = props.column.getId();
+            const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+            (0, react_1.useImperativeHandle)(ref, () => {
+                return {
+                    isFilterActive: () => isFilterActive(colId),
+                    afterGuiAttached: (params) => {
+                        var _a;
+                        const hidePopup = (_a = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _a !== void 0 ? _a : null;
+                        const filterContext = getFilterContext(colId, !!hidePopup);
+                        adaptable.hideFilterFormPopup = hidePopup;
+                        setFilterContext(filterContext);
+                    },
+                    getModel: () => { },
+                    setModel: () => { },
+                    //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
+                    doesFilterPass: () => true,
+                };
+            });
+            if (!column || !filterContext) {
+                return null;
+            }
+            return React.createElement("div", { id: getContainerId(colId) }, (0, FilterForm_1.FilterFormReact)(filterContext));
+        });
+    }
     return class FilterWrapper {
         init(params) {
             this.params = params;
             this.column = params.column;
             this.filterContainer = document.createElement('div');
-            this.filterContainer.id =
-                'filter_' + this.params.column.getColId() + '_' + adaptable.adaptableOptions.adaptableId;
-        }
-        isFilterActive() {
-            //make the small filter icon to appear when there is a filter
-            return (adaptable.api.filterApi
-                .getColumnFilters()
-                .findIndex((x) => x.ColumnId == this.params.column.getColId()) > -1);
+            this.filterContainer.id = getContainerId(this.params.column.getColId());
         }
         doesFilterPass(params) {
             //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
             return true;
         }
+        isFilterActive() {
+            return isFilterActive(this.params.column.getColId());
+        }
         getModel() {
             //
         }
@@ -33,21 +77,20 @@ let FilterWrapperFactory = (adaptable) => {
             return this.filterContainer;
         }
         afterGuiAttached(params) {
+            var _a, _b;
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
-            ReactDOM.unmountComponentAtNode(this.filterContainer);
-            let column = adaptable.api.columnApi.getColumnFromId(this.column.getColId());
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            let column = adaptable.api.columnApi.getColumnWithColumnId(this.column.getColId());
             if (column) {
-                let filterContext = {
-                    Column: column,
-                    Adaptable: adaptable,
-                    ShowCloseButton: params != null && params.hidePopup != null,
-                };
-                adaptable.hideFilterFormPopup = params ? params.hidePopup : null;
-                ReactDOM.render((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
+                const hidePopup = (_b = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _b !== void 0 ? _b : null;
+                const filterContext = getFilterContext(this.column.getColId(), !!hidePopup);
+                adaptable.hideFilterFormPopup = hidePopup;
+                this.unmountReactRoot = adaptable.renderReactRoot((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
             }
         }
         destroy() {
-            ReactDOM.unmountComponentAtNode(this.filterContainer);
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             this.filterContainer = null;
         }
     };

package/src/agGrid/FloatingFilterWrapper.d.ts

@@ -1,2 +1,2 @@
-import { Adaptable } from './Adaptable';
-export declare const FloatingFilterWrapperFactory: (adaptable: Adaptable) => any;
+import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+export declare const FloatingFilterWrapperFactory: (adaptable: IAdaptable) => any;

package/src/agGrid/FloatingFilterWrapper.js

@@ -2,43 +2,81 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
-const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
-    onParentModelChanged(parentModel, filterChangedEvent) {
-        // todo?
+const filterContainerStyle = {
+    overflow: 'hidden',
+    minWidth: '0',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'stretch',
+    position: 'relative',
+};
+const FloatingFilterWrapperFactory = (adaptable) => {
+    function getContainerId(colId) {
+        return `floatingFilter_${colId}_${adaptable.adaptableOptions.adaptableId}`;
     }
-    afterGuiAttached(params) {
-        // todo: consider theme
-        this.filterContainer.parentElement.style.overflow = 'visible';
-        this.filterContainer.parentElement.parentElement.style.padding = 'var(--ab-space-1)';
+    function getFilterContext(colId) {
+        const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+        const filterContext = {
+            Column: column,
+            Adaptable: adaptable,
+            ShowCloseButton: false,
+        };
+        return filterContext;
     }
-    init(params) {
-        const colId = params.column.getColId();
-        this.filterContainer = document.createElement('div');
-        this.filterContainer.id = `floatingFilter_${colId}_${adaptable.adaptableOptions.adaptableId}`;
-        this.filterContainer.style.overflow = 'hidden';
-        this.filterContainer.style.minWidth = '0';
-        this.filterContainer.style.height = '100%';
-        this.filterContainer.style.display = 'flex';
-        this.filterContainer.style.alignItems = 'stretch';
-        this.filterContainer.style.position = 'relative';
-        const column = adaptable.api.columnApi.getColumnFromId(colId);
-        if (column) {
-            const filterContext = {
-                Column: column,
-                Adaptable: adaptable,
-                ShowCloseButton: false,
-            };
-            ReactDOM.render((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
+    function patchParentElement(filterContainer) {
+        if (filterContainer) {
+            // todo: consider theme
+            filterContainer.parentElement.style.overflow = 'visible';
+            filterContainer.parentElement.parentElement.style.padding = 'var(--ab-space-1)';
         }
     }
-    getGui() {
-        return this.filterContainer;
-    }
-    destroy() {
-        ReactDOM.unmountComponentAtNode(this.filterContainer);
-        this.filterContainer = null;
+    if (adaptable.variant === 'react') {
+        return (0, react_1.forwardRef)(function ReactFloatingFilterWrapper(props, ref) {
+            const colId = props.column.getId();
+            const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+            (0, react_1.useImperativeHandle)(ref, () => {
+                return {
+                    onParentModelChanged() { },
+                };
+            });
+            if (!column) {
+                return null;
+            }
+            return (React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle }, (0, QuickFilterForm_1.QuickFilterFormReact)(getFilterContext(colId))));
+        });
     }
+    return class FloatingFilterWrapper {
+        onParentModelChanged(parentModel, filterChangedEvent) {
+            // todo?
+        }
+        afterGuiAttached() {
+            patchParentElement(this.filterContainer);
+        }
+        init(params) {
+            const colId = params.column.getColId();
+            this.filterContainer = document.createElement('div');
+            this.filterContainer.id = getContainerId(colId);
+            Object.keys(filterContainerStyle).forEach((key) => {
+                //@ts-ignore
+                this.filterContainer.style[key] = filterContainerStyle[key];
+            });
+            const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+            if (column) {
+                const filterContext = getFilterContext(colId);
+                this.unmountReactRoot = adaptable.renderReactRoot((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
+            }
+        }
+        getGui() {
+            return this.filterContainer;
+        }
+        destroy() {
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.filterContainer = null;
+        }
+    };
 };
 exports.FloatingFilterWrapperFactory = FloatingFilterWrapperFactory;

package/src/agGrid/PercentBarRenderer.d.ts

@@ -1,4 +1,4 @@
-import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-export declare const getPercentBarRendererForColumn: (formatColumn: FormatColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+export declare const getPercentBarRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/PercentBarRenderer.js

@@ -4,19 +4,18 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
-const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
-const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
-    var _a;
-    if (!((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle)) {
+const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
+const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
+    if (!styledColumn.PercentBarStyle) {
         return;
     }
     return class PercentBarRenderer {
         init(params) {
-            if (!formatColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
+            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
                 return;
             }
-            const min = api.formatColumnApi.getNumericStyleMinValue(formatColumn.ColumnStyle, abColumn, params.node, params.value);
-            const max = api.formatColumnApi.getNumericStyleMaxValue(formatColumn.ColumnStyle, abColumn, params.node, params.value);
+            const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
+            const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
             let value = params.value;
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
@@ -24,12 +23,12 @@ const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
             const clampedValue = (0, clamp_1.default)(value, min, max);
             const percentageValue = ((clampedValue - min) / (max - min)) * 100;
             let cellBackColor;
-            const percentBarStyle = formatColumn.ColumnStyle.PercentBarStyle;
+            const percentBarStyle = styledColumn.PercentBarStyle;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = percentBarStyle.CellRanges.find((r) => r.Min <= clampedValue && r.Max >= clampedValue);
+                const matchingRange = api.styledColumnApi.internalApi.findRangeForColumn(percentBarStyle.CellRanges, abColumn, percentBarStyle.RangeValueType, params.value);
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
                 }
@@ -57,12 +56,14 @@ const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
-                        if (formatColumn.DisplayFormat) {
-                            const options = formatColumn.DisplayFormat
-                                .Options;
-                            if (options) {
-                                value = FormatHelper_1.default.NumberFormatter(params.value, options);
-                            }
+                        const activeFormatColumnsWithDisplayFormat = api.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+                        const [formatColumn] = api.formatColumnApi.internalApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node: params.node, value });
+                        if (formatColumn && api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                            const options = formatColumn.DisplayFormat.Options;
+                            value = api.formatColumnApi.internalApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
+                        }
+                        else {
+                            value = (0, FormatHelper_1.NumberFormatter)(value, { FractionDigits: 2 });
                         }
                         textEl.innerText = value;
                     }

package/src/agGrid/agGridHelper.d.ts

@@ -5,7 +5,7 @@ import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/Adapta
 import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
-import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
  * So lets put some of the more obvious 'Helper' functions here
@@ -22,7 +22,7 @@ export declare class agGridHelper {
     setUpModules(): Map<AdaptableModule, IModule>;
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
-    createPercentBarRendererComp(formatColumn: FormatColumn, abColumn: AdaptableColumn): ICellRendererFunc;
+    createPercentBarRendererComp(styledColumn: StyledColumn, abColumn: AdaptableColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;

package/src/agGrid/agGridHelper.js

@@ -7,7 +7,6 @@ const AlertModule_1 = require("../Strategy/AlertModule");
 const BulkUpdateModule_1 = require("../Strategy/BulkUpdateModule");
 const CalculatedColumnModule_1 = require("../Strategy/CalculatedColumnModule");
 const CellSummaryModule_1 = require("../Strategy/CellSummaryModule");
-const ConditionalStyleModule_1 = require("../Strategy/ConditionalStyleModule");
 const CustomSortModule_1 = require("../Strategy/CustomSortModule");
 const DashboardModule_1 = require("../Strategy/DashboardModule");
 const DataSetModule_1 = require("../Strategy/DataSetModule");
@@ -43,6 +42,7 @@ const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const GeneralConstants = tslib_1.__importStar(require("../Utilities/Constants/GeneralConstants"));
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
+const StyledColumnModule_1 = require("../Strategy/StyledColumnModule");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -80,7 +80,6 @@ class agGridHelper {
         modules.set(ModuleConstants.BulkUpdateModuleId, new BulkUpdateModule_1.BulkUpdateModule(api));
         modules.set(ModuleConstants.CalculatedColumnModuleId, new CalculatedColumnModule_1.CalculatedColumnModule(api));
         modules.set(ModuleConstants.CellSummaryModuleId, new CellSummaryModule_1.CellSummaryModule(api));
-        modules.set(ModuleConstants.ConditionalStyleModuleId, new ConditionalStyleModule_1.ConditionalStyleModule(api));
         modules.set(ModuleConstants.CustomSortModuleId, new CustomSortModule_1.CustomSortModule(api));
         modules.set(ModuleConstants.DataChangeHistoryModuleId, new DataChangeHistoryModule_1.DataChangeHistoryModule(api));
         modules.set(ModuleConstants.DataSetModuleId, new DataSetModule_1.DataSetModule(api));
@@ -104,6 +103,7 @@ class agGridHelper {
         modules.set(ModuleConstants.SettingsPanelModuleId, new SettingsPanelModule_1.SettingsPanelModule(api));
         modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
+        modules.set(ModuleConstants.StyledColumnModuleId, new StyledColumnModule_1.StyledColumnModule(api));
         return modules;
     }
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
@@ -150,8 +150,8 @@ class agGridHelper {
     createCheckboxRendererComp(columnId, isColumnReadOnly) {
         return (0, CheckboxRenderer_1.getCheckboxRendererForColumn)(columnId, isColumnReadOnly, this.adaptable.api);
     }
-    createPercentBarRendererComp(formatColumn, abColumn) {
-        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(formatColumn, abColumn, this.adaptable.api);
+    createPercentBarRendererComp(styledColumn, abColumn) {
+        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(styledColumn, abColumn, this.adaptable.api);
     }
     getCleanValue(value) {
         if (value == null || value == 'null' || value == undefined || value == 'undefined') {
@@ -174,7 +174,7 @@ class agGridHelper {
         const customFriendlyName = typeof columnFriendlyName === 'function'
             ? columnFriendlyName({ colId: colId, agColumn: agGridColumn })
             : null;
-        const FriendlyName = customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : (isActionRowButtonColumn
+        const friendlyName = customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : (isActionRowButtonColumn
             ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
             : this.gridOptions.columnApi.getDisplayNameForColumn(agGridColumn, 'header'));
         if (!this.initialAgGridColDefs[colId]) {
@@ -183,13 +183,14 @@ class agGridHelper {
         const ColumnId = colId;
         const pkColumn = this.adaptable.adaptableOptions.primaryKey;
         let ColumnGroup = colsToGroups === null || colsToGroups === void 0 ? void 0 : colsToGroups[ColumnId];
+        const dataType = this.getColumnDataType(agGridColumn, false);
         const abColumn = {
             Uuid: (0, Uuid_1.createUuid)(),
             columnId: ColumnId,
             field: colDef.field,
-            friendlyName: FriendlyName,
+            friendlyName: friendlyName,
             isPrimaryKey: ColumnId === pkColumn,
-            dataType: this.getColumnDataType(agGridColumn, false),
+            dataType: dataType,
             visible: agGridColumn.isVisible(),
             readOnly: this.isColumnReadonly(colDef),
             columnGroup: ColumnGroup,
@@ -202,7 +203,7 @@ class agGridHelper {
             aggregationFunction: null,
             moveable: this.isColumnMoveable(colDef),
             hideable: this.isColumnHideable(colDef),
-            queryable: this.isColumnQueryable(colDef, ColumnId),
+            queryable: this.isColumnQueryable(colDef, ColumnId, friendlyName, dataType),
             isGrouped: this.isColumnGrouped(colDef),
             isFixed: this.isColumnFixed(colDef),
             pinned: this.getColumnPinnedPosition(colDef),
@@ -316,21 +317,19 @@ class agGridHelper {
         }
         return true;
     }
-    isColumnQueryable(colDef, columnId) {
+    isColumnQueryable(colDef, columnId, friendlyName, datatype) {
         if (!colDef) {
             return false;
         }
         if (colDef.colId === GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS) {
             return false;
         }
-        const queryableColumns = this.adaptable.api.queryLanguageApi.getQueryableColumnIds();
-        if (ArrayExtensions_1.ArrayExtensions.IsNull(queryableColumns)) {
-            return true;
-        }
-        if (ArrayExtensions_1.ArrayExtensions.IsEmpty(queryableColumns)) {
-            return false;
-        }
-        return queryableColumns.find((qc) => qc == columnId) != null;
+        const abColumnBase = {
+            columnId: columnId,
+            friendlyName: friendlyName,
+            dataType: datatype,
+        };
+        return this.adaptable.api.queryLanguageApi.isColumnQueryable(abColumnBase);
     }
     isColumnHideable(colDef) {
         if (!colDef) {
@@ -389,7 +388,7 @@ class agGridHelper {
         }
         let dataType = 'Unknown';
         // get the column type if already in store (and not unknown)
-        const existingColumn = this.adaptable.api.columnApi.getColumnFromId(column.getId(), logWarning);
+        const existingColumn = this.adaptable.api.columnApi.getColumnWithColumnId(column.getId(), logWarning);
         if (existingColumn && existingColumn.dataType != 'Unknown') {
             return existingColumn.dataType;
         }
@@ -475,6 +474,12 @@ class agGridHelper {
                     return 'Date';
                 case 'abColDefObject':
                     return 'Object';
+                case 'abColDefNumberArray':
+                    return 'NumberArray';
+                case 'abColDefTupleNumberArray':
+                    return 'TupleNumberArray';
+                case 'abColDefObjectNumberArray':
+                    return 'ObjectNumberArray';
                 default:
                     return 'Unknown';
             }
@@ -496,6 +501,12 @@ class agGridHelper {
                 return 'abColDefObject';
             case 'String':
                 return 'abColDefString';
+            case 'NumberArray':
+                return 'abColDefNumberArray';
+            case 'TupleNumberArray':
+                return 'abColDefTupleNumberArray';
+            case 'ObjectNumberArray':
+                return 'abColDefObjectNumberArray';
             default:
                 return 'abColDefCustom';
         }
@@ -512,7 +523,7 @@ class agGridHelper {
         if (this.adaptable.adaptableOptions.searchOptions.clearSearchesOnStartUp) {
             if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.adaptable.api.quickSearchApi.getQuickSearchState().QuickSearchText) ||
                 StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.adaptable.api.queryApi.getCurrentQuery()) ||
-                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.adaptable.api.dataSetApi.getAllDataSets())) {
+                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.adaptable.api.dataSetApi.getDataSets())) {
                 (0, LoggingHelper_1.LogAdaptableWarning)('Clearing existing Searches as "clearSearchesOnStartUp" is true');
                 this.adaptable.api.quickSearchApi.clearQuickSearch();
                 this.adaptable.api.queryApi.clearCurrentQuery();
@@ -526,7 +537,7 @@ class agGridHelper {
             const { nodeA, nodeB } = params;
             let firstGroupedColumn = adaptable.getFirstGroupedColumn();
             if (firstGroupedColumn) {
-                const definedColumnComparator = adaptable.getActiveColumnComparator(firstGroupedColumn.columnId, adaptable.api.customSortApi.getCustomSortByColumn(firstGroupedColumn.columnId), adaptable.api.internalApi.getCustomSortComparer(firstGroupedColumn));
+                const definedColumnComparator = adaptable.getActiveColumnComparator(firstGroupedColumn.columnId, adaptable.api.customSortApi.getCustomSortForColumn(firstGroupedColumn.columnId), adaptable.api.customSortApi.internalApi.getCustomSortComparer(firstGroupedColumn));
                 if (definedColumnComparator) {
                     return definedColumnComparator(nodeA.key, nodeB.key);
                 }

package/src/agGrid/agGridMenuHelper.js

@@ -29,7 +29,7 @@ class agGridMenuHelper {
         if (hasAdaptableColumnMenuItems) {
             agGridColumnMenuItems.push('separator');
         }
-        const adaptableColumn = this.adaptable.api.columnApi.getColumnFromId(colId);
+        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(colId);
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         // then Get Adaptable Menu Items
         if (menuContext.isRowGroupColumn) {
@@ -75,7 +75,7 @@ class agGridMenuHelper {
         const adaptableMenuItems = [];
         const agGridColumn = params.column;
         if (agGridColumn) {
-            const adaptableColumn = this.adaptable.api.columnApi.getColumnFromId(agGridColumn.getColId());
+            const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(agGridColumn.getColId());
             // if (adaptableColumn != undefined) {
             let menuContext = this.createContextMenuContextObject(params, adaptableColumn);
             // keep it simple for now - if its a grouped cell then don't add the shipped menu items
@@ -382,7 +382,7 @@ class agGridMenuHelper {
         });
     }
     buildStandaloneColumnHeader(adaptableColumn) {
-        const agGridColumn = this.adaptable.api.columnApi.getAgGridColumnForAdaptableColumn(adaptableColumn.columnId);
+        const agGridColumn = this.adaptable.api.columnApi.internalApi.getAgGridColumnForAdaptableColumn(adaptableColumn.columnId);
         let menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
         let returnMenuItems = [];
         returnMenuItems.push(...this.getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext));

package/src/agGrid/createAgStatusPanelComponent.d.ts

@@ -9,10 +9,11 @@ export interface StatusPanelProps {
         Key: string;
     };
 }
-export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => {
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => ((props: IStatusPanelParams) => JSX.Element) | {
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params: IStatusPanelParams): void;
         render(): void;
         getGui(): HTMLElement;

package/src/agGrid/createAgStatusPanelComponent.js

@@ -3,9 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAgStatusPanelComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const createAgStatusPanelComponent = (component, adaptable, context) => {
+    if (adaptable.variant === 'react') {
+        return (props) => {
+            const children = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(component, {
+                params: props,
+                adaptableApi: adaptable.api,
+                context,
+            }), adaptable);
+            return (React.createElement("div", { className: "ab-StatusBar", ref: (node) => {
+                    if (node) {
+                        // in React rendering, ag-grid renders an additional extra div
+                        // around the status panel container, with className of 'ag-react-container'
+                        // which needs to be stretched in order to fill the status panel
+                        node.parentElement.style.display = 'flex';
+                    }
+                } }, children));
+        };
+    }
     return class StatusBarRenderer {
         init(params) {
             this.params = params;
@@ -20,13 +36,14 @@ const createAgStatusPanelComponent = (component, adaptable, context) => {
                 context,
             };
             const children = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(component, props), adaptable);
-            ReactDOM.render(children, this.eGui);
+            this.unmountReactRoot = adaptable.renderReactRoot(children, this.eGui);
         }
         getGui() {
             return this.eGui;
         }
         destroy() {
-            ReactDOM.unmountComponentAtNode(this.eGui);
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         }
     };
 };

package/src/agGrid/editors/AdaptableDateEditor/index.d.ts

@@ -1,5 +1,9 @@
+import * as React from 'react';
 import { ICellEditorParams, ICellEditorComp } from '@ag-grid-community/core';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
+export declare const ReactAdaptableDateEditor: React.ForwardRefExoticComponent<ICellEditorParams<any, any> & {
+    showClearButton?: boolean;
+} & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefDate` columns.
  *
@@ -28,6 +32,7 @@ export declare class AdaptableDateEditor implements ICellEditorComp {
     private el;
     private params;
     private editor;
+    private unmountReactRoot?;
     private valueParser;
     init(params: ICellEditorParams): void;
     getGui(): HTMLDivElement;
@@ -37,5 +42,4 @@ export declare class AdaptableDateEditor implements ICellEditorComp {
     getAdaptableInstance(params: ICellEditorParams): IAdaptable;
     afterGuiAttached(): void;
     destroy(): void;
-    private shouldClearExistingValue;
 }