@adaptabletools/adaptable-cjs 20.3.0-canary.2 → 21.0.0-canary.0

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -125,53 +125,90 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     if ('All' in scope) {
         return undefined;
     }
-    // need to see if all columns are numeric or date
+    // Date-related data types that should all be treated as 'date'
+    const dateTypes = api.columnApi.internalApi.getColumnDateTypes();
+    // Check for ColumnIds in scope
     if ('ColumnIds' in scope) {
         const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnWithColumnId(c)).filter(Boolean);
         const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
-        if (columnDataTypes.length == 1 && columnDataTypes[0] == 'number') {
+        // If there's only one data type
+        if (columnDataTypes.length === 1) {
+            const dataType = columnDataTypes[0];
+            if (dataType === 'number') {
+                return 'number';
+            }
+            if (dateTypes.includes(dataType)) {
+                return 'date';
+            }
+            if (dataType === 'text') {
+                return 'text';
+            }
+        }
+        // If there are multiple data types but they're all date types
+        else if (columnDataTypes.length > 0 &&
+            columnDataTypes.every((type) => dateTypes.includes(type))) {
+            return 'date';
+        }
+        return undefined;
+    }
+    // Check for DataTypes in scope
+    if ('DataTypes' in scope && scope.DataTypes.length === 1) {
+        const dataType = scope.DataTypes[0];
+        if (dataType === 'number') {
             return 'number';
         }
-        if (columnDataTypes.length == 1 && columnDataTypes[0] == 'date') {
+        if (dateTypes.includes(dataType)) {
             return 'date';
         }
-        if (columnDataTypes.length == 1 && columnDataTypes[0] == 'text') {
+        if (dataType === 'text') {
             return 'text';
         }
-        return undefined;
-    }
-    if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'number') {
-        return 'number';
     }
-    if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'date') {
+    // If there are multiple data types but they're all date types
+    else if ('DataTypes' in scope &&
+        scope.DataTypes.length > 0 &&
+        scope.DataTypes.every((type) => dateTypes.includes(type))) {
         return 'date';
     }
-    if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'text') {
-        return 'text';
-    }
+    // Check for ColumnTypes in scope
     if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
-        // if a Pivot Total Column Type is specified, we can safely assume that the data type is number
+        // If a Pivot Total Column Type is specified, we can safely assume that the data type is number
         const pivotTotalTypes = [
             AdaptableColumn_1.PIVOT_ANY_TOTAL_COLUMN_TYPE,
             AdaptableColumn_1.PIVOT_GRAND_TOTAL_COLUMN_TYPE,
             AdaptableColumn_1.PIVOT_COLUMN_TOTAL_COLUMN_TYPE,
             AdaptableColumn_1.PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE,
         ];
-        // if all column types are pivot total types, we can safely assume that the data type is number
+        // If all column types are pivot total types, we can safely assume that the data type is number
         if (scope.ColumnTypes.length > 0 &&
             scope.ColumnTypes.every((type) => pivotTotalTypes.includes(type))) {
             return 'number';
         }
-        // need to check if all column with this column type has the same data type and return that particular one
+        // Check if all columns with this column type have the same data type
         const columns = scope.ColumnTypes.flatMap((columnType) => {
             return api.columnApi.getColumnsByColumnType(columnType);
         });
-        // check if all have the same type
-        if (columns.length &&
-            columns.every((column) => column.dataType === columns[0].dataType) &&
-            // supported data types
-            ['number', 'date', 'text'].includes(columns[0].dataType)) {
-            return columns[0].dataType;
+        if (columns.length) {
+            // Check if all columns have the same type
+            const allSameType = columns.every((column) => column.dataType === columns[0].dataType);
+            // Handle specific data types
+            if (allSameType) {
+                const dataType = columns[0].dataType;
+                if (dataType === 'number') {
+                    return 'number';
+                }
+                if (dateTypes.includes(dataType)) {
+                    return 'date';
+                }
+                if (dataType === 'text') {
+                    return 'text';
+                }
+            }
+            // Check if all columns are date types (even if they're different date types)
+            const allDateTypes = columns.every((column) => dateTypes.includes(column.dataType));
+            if (allDateTypes) {
+                return 'date';
+            }
         }
     }
     return undefined;
@@ -460,6 +497,6 @@ const FormatColumnFormatWizardSection = (props) => {
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only possible if ",
         React.createElement("b", null, "all"),
-        " the columns in Scope are Numeric, String or Date."));
+        " the columns in Scope are Numeric, String or Date"));
 };
 exports.FormatColumnFormatWizardSection = FormatColumnFormatWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -5,8 +5,12 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    if (data.Target && data.Target === 'columnHeader') {
+        return (React.createElement(HelpBlock_1.default, { margin: 3 }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
+    }
     return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
         // TODO see what is this
         predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -6,11 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const constants_1 = require("./constants");
-const Tabs_1 = require("../../../components/Tabs");
 const rebass_1 = require("rebass");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -21,42 +17,7 @@ const renderFormatColumnScopeSummary = (data) => {
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const currentTargets = data.Target?.length ? data.Target : ['cell'];
-    const handleTargetChange = (target, checked) => {
-        let newTargets;
-        if (checked) {
-            // Add the target if it's not already included
-            newTargets = [...new Set([...currentTargets, target])];
-        }
-        else {
-            // Remove the target
-            newTargets = currentTargets.filter((t) => t !== target);
-        }
-        // If all checkboxes are unchecked, default to ['cell']
-        if (newTargets.length === 0) {
-            newTargets = ['cell'];
-        }
-        // Update the formatColumn object
-        props.onChange({
-            ...data,
-            Target: newTargets,
-        });
-    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { width: "100%" },
-                        React.createElement(FormLayout_1.FormRow, { label: "Target Column Elements: ", tooltip: "The visual elements where formatting will be applied" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "target-cell", checked: currentTargets.includes('cell'), onChange: (target) => {
-                                    handleTargetChange('cell', target);
-                                }, ml: 2 }, "Data Cells"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "target-column-header", checked: currentTargets.includes('columnHeader'), onChange: (target) => {
-                                    handleTargetChange('columnHeader', target);
-                                }, ml: 4 }, "Column Headers"))),
-                    React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'At least one target element must be selected (defaults to Data Cells).' +
-                        ' Conditional formatting rules only apply to Data Cells, not to Headers.')))),
         React.createElement(rebass_1.Box, { "data-name": 'scope-heading', style: {
                 borderRadius: `var(--ab__border-radius)`,
             }, padding: 2, backgroundColor: `var(--ab-color-primarylight)` }, "Scope"),

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -99,18 +99,19 @@ const FormatColumnSettingsWizardSection = (props) => {
                             React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
                                     ? onCellAlignmentSelectChanged('Right')
                                     : onCellAlignmentSelectChanged(null) }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))),
+                    data.Target === 'cell' && (React.createElement(React.Fragment, null,
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                        React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))),
                     React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
                         React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                 props.onChange({

package/src/View/FormatColumn/Wizard/FormatColumnTargetWizardSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormatColumn } from '../../../AdaptableState/FormatColumnState';
+type FormatColumnScopeWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+};
+export declare const renderFormatColumnTargetSummary: (data: FormatColumn) => "Column Header" | "Column Cells";
+export declare const FormatColumnTargetWizardSection: (props: FormatColumnScopeWizardSectionProps) => React.JSX.Element;
+export {};

package/src/View/FormatColumn/Wizard/FormatColumnTargetWizardSection.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnTargetWizardSection = exports.renderFormatColumnTargetSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tabs_1 = require("../../../components/Tabs");
+const rebass_1 = require("rebass");
+const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const renderFormatColumnTargetSummary = (data) => {
+    if (!data.Target || data.Target === 'cell') {
+        return 'Column Cells';
+    }
+    if (data.Target === 'columnHeader') {
+        return 'Column Header';
+    }
+};
+exports.renderFormatColumnTargetSummary = renderFormatColumnTargetSummary;
+const FormatColumnTargetWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const currentTarget = data.Target ? data.Target : 'cell';
+    const handleTargetChange = (target) => {
+        // Update the formatColumn object
+        props.onChange({
+            ...data,
+            Target: target,
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
+                    React.createElement(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') }))))));
+};
+exports.FormatColumnTargetWizardSection = FormatColumnTargetWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -21,9 +21,14 @@ const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
 const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
 const constants_1 = require("./constants");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
-const adjustDisplayFormat = (formatColumn, api) => {
-    formatColumn = { ...formatColumn };
-    const formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+const FormatColumnTargetWizardSection_1 = require("./FormatColumnTargetWizardSection");
+const adjustDisplayFormat = (fc, api) => {
+    const formatColumn = { ...fc };
+    let formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
+    if (formatColumn.Target === 'columnHeader') {
+        // Column Headers are always text
+        formatDataType = 'text';
+    }
     if (!formatDataType && formatColumn.DisplayFormat) {
         formatColumn.DisplayFormat = undefined;
     }
@@ -92,7 +97,7 @@ function FormatColumnWizard(props) {
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Scope & Target',
+                title: 'Scope',
                 details: 'Select which Columns will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
@@ -101,6 +106,15 @@ function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                title: 'Target',
+                details: 'Select which Columns Elements will be formatted',
+                renderSummary: FormatColumnTargetWizardSection_1.renderFormatColumnTargetSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                        React.createElement(FormatColumnTargetWizardSection_1.FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
+                },
+            },
             {
                 isValid: (abObject, api, context) => {
                     if (!abObject.Rule) {

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

@@ -17,7 +17,7 @@ const AdaptableObjectsSummary = () => {
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
     return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
-        if (!module.isModuleAvailable()) {
+        if (!module.isModuleVisible()) {
             return null;
         }
         const items = module?.toViewAll?.();

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

@@ -14,9 +14,9 @@ const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const EnvVars_1 = require("../../../EnvVars");
-const agGridModules_1 = require("../../../agGrid/agGridModules");
+const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
-const agGridVersion = agGridModules_1.AG_GRID_VERSION;
+const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
     const api = props.api;
     const CreateGridSummaries = (colItems) => {

package/src/View/Layout/TransposedPopup.js

@@ -32,7 +32,7 @@ const TransposedPopup = (props) => {
         // customisable
         return visibleColumns
             ? adaptable.api.columnApi.getVisibleColumns()
-            : adaptable.api.columnApi.getColumns();
+            : adaptable.api.columnApi.getUIAvailableColumns();
     }, []);
     /**
      * This is used as first field
@@ -162,7 +162,7 @@ const TransposedPopup = (props) => {
             rowData: transposedRowsAndColumns.transposedRows,
             sideBar: false,
         };
-        const modules = adaptable.getAgGridRegisteredModules();
+        const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
         AdaptableAgGrid_1.AdaptableAgGrid._initInternal({
             variant: 'vanilla',
             adaptableOptions,

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -49,7 +49,7 @@ const ColumnsSectionSummary = () => {
             }
             const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
             const header = layout.ColumnHeaders?.[columnId] ?? '';
-            const columnWidth = layout.ColumnWidths?.[columnId];
+            const columnWidth = layout.ColumnSizing?.[columnId]?.Width;
             const columnPinning = layout.ColumnPinning?.[columnId];
             let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
             agg = typeof agg === 'object' ? agg.type : agg;
@@ -161,7 +161,11 @@ const ColumnRow = (props) => {
     ];
     const { column } = props;
     // width
-    const columnWidth = props.layout.ColumnWidths?.[column.columnId];
+    const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
+    const columnFlex = props.layout.ColumnSizing?.[column.columnId]?.Flex;
+    const minWidth = props.layout.ColumnSizing?.[column.columnId]?.MinWidth;
+    const maxWidth = props.layout.ColumnSizing?.[column.columnId]?.MaxWidth;
+    const resizable = column.resizable !== false;
     const visible = (!(0, isPivotLayout_1.isPivotLayout)(props.layout) &&
         props.layout.TableColumns.includes(column.columnId) &&
         props.layout.ColumnVisibility?.[column.columnId] !== false) ||
@@ -191,11 +195,29 @@ const ColumnRow = (props) => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormLayout_1.FormRow, { label: "Width" },
-                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: !props.column.resizable, onChange: (event) => {
+                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
-                            }, value: columnWidth })),
+                            }, value: columnWidth ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Flex" },
+                        React.createElement(Input_1.default, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnFlexChange(props.column.columnId, value);
+                            }, value: columnFlex ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Min Width" },
+                        React.createElement(Input_1.default, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnMinWidthChange(props.column.columnId, value);
+                            }, value: minWidth ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Max Width" },
+                        React.createElement(Input_1.default, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnMaxWidthChange(props.column.columnId, value);
+                            }, value: maxWidth ?? '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Pinning" },
                         React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
@@ -350,12 +372,45 @@ const ColumnsSection = (props) => {
         });
     };
     const handleColumnWidthChange = (columnId, width) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        delete colSizingForCol.Flex;
+        colSizingForCol.Width = width;
+        ColumnSizing[columnId] = colSizingForCol;
         onChange({
             ...layout,
-            ColumnWidths: {
-                ...layout.ColumnWidths,
-                [columnId]: width,
-            },
+            ColumnSizing,
+        });
+    };
+    const handleColumnFlexChange = (columnId, flex) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        delete colSizingForCol.Width;
+        colSizingForCol.Flex = flex;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnMinWidthChange = (columnId, minWidth) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        colSizingForCol.MinWidth = minWidth;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        colSizingForCol.MaxWidth = maxWidth;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
         });
     };
     const visibleIds = layout.TableColumns.filter((colId) => {
@@ -387,7 +442,7 @@ const ColumnsSection = (props) => {
             React.createElement(ReorderDraggable_1.ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
                     return option.moveable;
                 }, order: currentOrder, renderOption: (option) => {
-                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
                 }, onChange: handleColumnsChange }),
             (0, ValueSelector_1.renderSelectionSection)({
                 options: visibleIds,

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -333,30 +333,30 @@ const PivotAggregationsSection = (props) => {
                                     label: StringExtensions_1.default.CamelCaseToHumanText(position),
                                     value: position,
                                 };
-                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
+                            }), placeholder: "[none]", value: layout.GrandTotalRow, onChange: (value) => {
                                 props.onChange({
                                     ...layout,
                                     GrandTotalRow: value,
                                 });
                             }, isClearable: true })),
                     React.createElement(FormLayout_1.FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select_1.Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                        React.createElement(Select_1.Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                                 return {
                                     label: StringExtensions_1.default.CapitaliseFirstLetter(position),
                                     value: position,
                                 };
-                            }), placeholder: "Off", value: layout.PivotGrandTotal, onChange: (value) => {
+                            }), placeholder: "[none]", value: layout.PivotGrandTotal, onChange: (value) => {
                                 props.onChange({
                                     ...layout,
                                     PivotGrandTotal: value,
                                 });
                             }, isClearable: true })),
-                    React.createElement(FormLayout_1.FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select_1.Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                    React.createElement(FormLayout_1.FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select_1.Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                             return {
                                 label: StringExtensions_1.default.CapitaliseFirstLetter(position),
                                 value: position,
                             };
-                        }), placeholder: "Off", value: layout.PivotColumnTotal, onChange: (value) => {
+                        }), placeholder: "[none]", value: layout.PivotColumnTotal, onChange: (value) => {
                             props.onChange({
                                 ...layout,
                                 PivotColumnTotal: value,

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -22,10 +22,7 @@ const AdaptableStatusBar = (props) => {
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
     return (React.createElement(rebass_1.Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
         const module = adaptable.ModuleService.getModuleById(subPanel);
-        if (!module) {
-            return React.createElement(React.Fragment, { key: subPanel });
-        }
-        if (!module.isModuleAvailable()) {
+        if (!module?.isModuleVisible()) {
             return React.createElement(React.Fragment, { key: subPanel });
         }
         /**

package/src/View/StatusBar/StatusBarPopup.js

@@ -31,7 +31,7 @@ const StatusBarPopup = (props) => {
     }, [statusPanels]);
     const availableItems = Types_1.ALL_STATUS_SUB_PANELS.filter((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
-        return module && module.isModuleAvailable();
+        return module?.isModuleVisible();
     }).map((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };

package/src/View/Theme/ThemeSelector.js

@@ -27,7 +27,7 @@ const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select_1.Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(Select_1.Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -21,7 +21,7 @@ import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { AnnotationsService } from '../Utilities/Services/AnnotationsService';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
 import { AgGridMenuAdapter } from './AgGridMenuAdapter';
-import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
+import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, InFilterValue, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
 import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
@@ -31,6 +31,8 @@ import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { PivotLayoutModel, TableLayoutModel } from '../layout-manager/src/LayoutManagerModel';
 import { AgGridThemeAdapter } from './AgGridThemeAdapter';
+import { AgGridModulesAdapter } from './AgGridModulesAdapter';
+import { EditColumnValueInfo } from '../AdaptableOptions/EditOptions';
 export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'agGridReady' | 'available' | 'ready' | 'preDestroyed';
 type RenderAgGridFrameworkComponentResult = false | GridApi;
 interface AdaptableInitInternalConfig<TData = any> {
@@ -73,6 +75,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     agGridMenuAdapter: AgGridMenuAdapter;
     agGridExportAdapter: AgGridExportAdapter;
     agGridThemeAdapter: AgGridThemeAdapter;
+    agGridModulesAdapter: AgGridModulesAdapter;
     private DANGER_USE_GETTER_adaptableContainerElement;
     private DANGER_USE_GETTER_agGridContainerElement;
     api: AdaptableApi;
@@ -146,7 +149,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private normaliseToolPanelState;
     private getCurrentLayoutModel;
     silentUpdateCurrentLayoutModel(layoutModel?: TableLayoutModel | PivotLayoutModel): void;
-    applyFiltering(): void;
+    applyFiltering(config?: {
+        updateColumnFilterModel?: boolean;
+    }): void;
     showQuickFilter(): void;
     hideQuickFilter(): void;
     private normalizeAdaptableOptions;
@@ -156,7 +161,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
      */
     private initializeAgGrid;
     useRowNodeLookUp(): boolean;
-    getAgGridRegisteredModules(): Module[];
     getAgGridContainerElement(): HTMLElement | null;
     getAdaptableContainerElement(): HTMLElement;
     refreshSelectedCellsState(): SelectedCellInfo | undefined;
@@ -181,6 +185,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      */
     private temporaryAdaptableStateUpdates;
     private validatePrimaryKey;
+    isInPivotMode(): boolean;
     private deriveAdaptableColumnStateFromAgGrid;
     private checkShouldClearExistingFiltersOrSearches;
     getGridCellFromRowNode(rowNode: IRowNode, columnId: string): GridCell | undefined;
@@ -252,14 +257,13 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getDistinctFilterValuesForColumn(options: {
         column: AdaptableColumn;
         currentSearchValue: string;
-    }): Promise<GridCell[]>;
+    }): Promise<InFilterValue[]>;
     getDistinctEditValuesForColumn(options: {
         column: AdaptableColumn;
         currentSearchValue: string;
         gridCell?: GridCell;
-    }): Promise<GridCell[]>;
-    getDistinctGridCellsForColumn(column: AdaptableColumn): GridCellWithCount[];
-    private getGridCellsForCustomColumnValues;
+    }): Promise<EditColumnValueInfo[]>;
+    getDistinctGridCellsForColumn(column: AdaptableColumn, rowNodes?: IRowNode[]): GridCellWithCount[];
     private addDistinctColumnValue;
     private getUniqueGridCells;
     getGridCellsForColumn(columnId: string, onlyVisibleRows?: boolean): GridCell[] | undefined;