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

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

@@ -119,53 +119,90 @@ export 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 = uniq(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 = [
             PIVOT_ANY_TOTAL_COLUMN_TYPE,
             PIVOT_GRAND_TOTAL_COLUMN_TYPE,
             PIVOT_COLUMN_TOTAL_COLUMN_TYPE,
             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;
@@ -453,5 +490,5 @@ export const FormatColumnFormatWizardSection = (props) => {
     return (React.createElement(HelpBlock, { 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"));
 };

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

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
+import HelpBlock from '../../../components/HelpBlock';
 export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
+    if (data.Target && data.Target === 'columnHeader') {
+        return (React.createElement(HelpBlock, { margin: 3 }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
+    }
     return (React.createElement(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

@@ -2,11 +2,7 @@ import * as React from 'react';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
-import { Tabs } from '../../../components/Tabs';
-import { Box, Flex } from 'rebass';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { CheckBox } from '../../../components/CheckBox';
-import HelpBlock from '../../../components/HelpBlock';
+import { Box } from 'rebass';
 export const renderFormatColumnScopeSummary = (data) => {
     return renderScopeSummary(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -16,42 +12,7 @@ export const renderFormatColumnScopeSummary = (data) => {
 };
 export const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = 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, { mb: 3 },
-            React.createElement(Tabs.Tab, null, "Target"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { width: "100%" },
-                        React.createElement(FormRow, { label: "Target Column Elements: ", tooltip: "The visual elements where formatting will be applied" },
-                            React.createElement(CheckBox, { "data-name": "target-cell", checked: currentTargets.includes('cell'), onChange: (target) => {
-                                    handleTargetChange('cell', target);
-                                }, ml: 2 }, "Data Cells"),
-                            React.createElement(CheckBox, { "data-name": "target-column-header", checked: currentTargets.includes('columnHeader'), onChange: (target) => {
-                                    handleTargetChange('columnHeader', target);
-                                }, ml: 4 }, "Column Headers"))),
-                    React.createElement(HelpBlock, { 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(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

@@ -94,18 +94,19 @@ export const FormatColumnSettingsWizardSection = (props) => {
                             React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
                                     ? onCellAlignmentSelectChanged('Right')
                                     : onCellAlignmentSelectChanged(null) }))),
-                    React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
-                    React.createElement(FormRow, { label: "Exclude Group Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
-                    React.createElement(FormRow, { label: "Exclude Row Summaries:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
-                    React.createElement(FormRow, { label: "Exclude Total Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(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(FormRow, { label: "Exclude Data Rows:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                        React.createElement(FormRow, { label: "Exclude Group Rows:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                        React.createElement(FormRow, { label: "Exclude Row Summaries:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                        React.createElement(FormRow, { label: "Exclude Total Rows:" },
+                            React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                                React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))),
                     React.createElement(FormRow, { label: "Apply on Column Group:" },
                         React.createElement(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,31 @@
+import * as React from 'react';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Tabs } from '../../../components/Tabs';
+import { Flex } from 'rebass';
+import { TypeRadio } from '../../Wizard/TypeRadio';
+export const renderFormatColumnTargetSummary = (data) => {
+    if (!data.Target || data.Target === 'cell') {
+        return 'Column Cells';
+    }
+    if (data.Target === 'columnHeader') {
+        return 'Column Header';
+    }
+};
+export const FormatColumnTargetWizardSection = (props) => {
+    const { data, api } = 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, { mb: 3 },
+            React.createElement(Tabs.Tab, null, "Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(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, { "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') }))))));
+};

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

@@ -17,9 +17,14 @@ import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utiliti
 import { FormatColumnRuleWizardSection } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
-const adjustDisplayFormat = (formatColumn, api) => {
-    formatColumn = { ...formatColumn };
-    const formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+import { FormatColumnTargetWizardSection, renderFormatColumnTargetSummary, } from './FormatColumnTargetWizardSection';
+const adjustDisplayFormat = (fc, api) => {
+    const formatColumn = { ...fc };
+    let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+    if (formatColumn.Target === 'columnHeader') {
+        // Column Headers are always text
+        formatDataType = 'text';
+    }
     if (!formatDataType && formatColumn.DisplayFormat) {
         formatColumn.DisplayFormat = undefined;
     }
@@ -88,7 +93,7 @@ export function FormatColumnWizard(props) {
     };
     return (React.createElement(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: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
@@ -97,6 +102,15 @@ export function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                title: 'Target',
+                details: 'Select which Columns Elements will be formatted',
+                renderSummary: renderFormatColumnTargetSummary,
+                render: () => {
+                    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                        React.createElement(FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
+                },
+            },
             {
                 isValid: (abObject, api, context) => {
                     if (!abObject.Rule) {

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

@@ -13,7 +13,7 @@ export const AdaptableObjectsSummary = () => {
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
     return (React.createElement(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

@@ -10,7 +10,7 @@ import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
-import { AG_GRID_VERSION } from '../../../agGrid/agGridModules';
+import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {

package/src/View/Layout/TransposedPopup.js

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

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

@@ -45,7 +45,7 @@ export 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;
@@ -156,7 +156,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 = (!isPivotLayout(props.layout) &&
         props.layout.TableColumns.includes(column.columnId) &&
         props.layout.ColumnVisibility?.[column.columnId] !== false) ||
@@ -186,11 +190,29 @@ const ColumnRow = (props) => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormRow, { label: "Width" },
-                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: !props.column.resizable, onChange: (event) => {
+                        React.createElement(Input, { "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(FormRow, { label: "Flex" },
+                        React.createElement(Input, { "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(FormRow, { label: "Min Width" },
+                        React.createElement(Input, { "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(FormRow, { label: "Max Width" },
+                        React.createElement(Input, { "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(FormRow, { label: "Pinning" },
                         React.createElement(DropdownButton, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
@@ -345,12 +367,45 @@ export 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) => {
@@ -382,7 +437,7 @@ export const ColumnsSection = (props) => {
             React.createElement(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 }),
             renderSelectionSection({
                 options: visibleIds,

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

@@ -327,30 +327,30 @@ export const PivotAggregationsSection = (props) => {
                                     label: StringExtensions.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(FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                        React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                                 return {
                                     label: StringExtensions.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(FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                    React.createElement(FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                             return {
                                 label: StringExtensions.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

@@ -18,10 +18,7 @@ export const AdaptableStatusBar = (props) => {
     const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
     return (React.createElement(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

@@ -27,7 +27,7 @@ export const StatusBarPopup = (props) => {
     }, [statusPanels]);
     const availableItems = 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

@@ -23,7 +23,7 @@ export const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(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, { "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;