@adaptabletools/adaptable 12.1.3 → 12.1.6

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -13,13 +13,6 @@ const GridOptionsForm = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
-            React.createElement(FormLayout_1.FormRow, { label: "Show ToolPanel" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.sideBar == true, onChange: (addSideBar) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.sideBar = addSideBar;
-                        props.onChangeadaptableOptions(abOptions);
-                    } })),
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
                         abOptions = Object.assign({}, abOptions);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsActionColumnsForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsActionColumnsForm.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsActionColumnsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const UIOptionsActionColumnsForm = (props) => {
+    var _a, _b, _c;
+    const options = [
+        { value: 'clone', label: 'Clone' },
+        { value: 'create', label: 'Create' },
+        { value: 'edit', label: 'Edit' },
+        { value: 'delete', label: 'Delete' },
+    ];
+    const actionRowButtons = (_c = (_b = (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions) === null || _b === void 0 ? void 0 : _b.actionRowButtons) !== null && _c !== void 0 ? _c : [];
+    const handleCheckChange = (type, checked) => {
+        var _a;
+        let newActionRowButtons = actionRowButtons;
+        if (checked) {
+            newActionRowButtons = [...newActionRowButtons, type];
+        }
+        else {
+            newActionRowButtons = newActionRowButtons.filter((item) => item !== type);
+        }
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { actionOptions: Object.assign(Object.assign({}, (_a = props.abOptions) === null || _a === void 0 ? void 0 : _a.actionOptions), { actionRowButtons: newActionRowButtons }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Row Action Buttons"),
+        React.createElement(rebass_1.Flex, { width: "100%", m: 2 }, options.map((option) => (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: option.value, checked: actionRowButtons.some((buttonName) => buttonName === option.value), onChange: (check) => handleCheckChange(option.value, check) }, option.label))))));
+};
+exports.UIOptionsActionColumnsForm = UIOptionsActionColumnsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../../types';
+export declare const UIOptionsSidebarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsSidebarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
+const prepareSidebarDef = (sideBar) => {
+    sideBar = sideBar;
+    if (typeof sideBar === 'boolean') {
+        sideBar = {
+            toolPanels: ALL_SIDEBAR_OPTIONS,
+        };
+    }
+    if (typeof sideBar === 'string') {
+        sideBar = {
+            toolPanels: [sideBar],
+        };
+    }
+    if (Array.isArray(sideBar)) {
+        sideBar = {
+            toolPanels: sideBar,
+        };
+    }
+    return sideBar !== null && sideBar !== void 0 ? sideBar : { toolPanels: [] };
+};
+const isSidebarChecked = (sideBar, panelName) => {
+    var _a;
+    return ((_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : []).some((panel) => {
+        const panelId = typeof panel === 'string' ? panel : panel.id;
+        return panelId === panelName;
+    });
+};
+const UIOptionsSidebarForm = (props) => {
+    var _a;
+    const { abOptions, onChange } = props;
+    const { gridOptions } = props.abOptions;
+    const sideBar = prepareSidebarDef(gridOptions.sideBar);
+    const renderSidebarCheckbox = (sidebarName) => {
+        return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
+    };
+    const handleToolpanelsChange = (panelName, check) => {
+        var _a, _b;
+        let newPanels = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.toolPanels) !== null && _a !== void 0 ? _a : [];
+        if (check) {
+            newPanels = [...newPanels, panelName];
+        }
+        else {
+            newPanels = newPanels.filter((panel) => {
+                const panelId = typeof panel === 'string' ? panel : panel.id;
+                return panelId !== panelName;
+            });
+        }
+        let hiddenByDefault = (_b = sideBar.hiddenByDefault) !== null && _b !== void 0 ? _b : false;
+        if (newPanels.length === 0) {
+            hiddenByDefault = true;
+        }
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) }) });
+        props.onChange(newAbOptions);
+    };
+    let sidebarPosition = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.position) !== null && _a !== void 0 ? _a : 'right';
+    const handleSidebarPositionChange = (position) => {
+        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) }) });
+        props.onChange(newAbOptions);
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Tool Panels"),
+        React.createElement(rebass_1.Box, { m: 2 },
+            React.createElement(rebass_1.Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
+            React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
+                React.createElement(FormLayout_1.FormRow, { label: "Position" },
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
+                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
+                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
+                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
+};
+exports.UIOptionsSidebarForm = UIOptionsSidebarForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+export declare const UIOptionsStatusbarForm: React.FunctionComponent<{
+    abOptions: AdaptableOptions;
+    onChange: (abOptions: AdaptableOptions) => void;
+}>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIOptionsStatusbarForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const UIOptionsStatusbarForm = (props) => {
+    var _a, _b, _c, _d;
+    const allPanels = (_c = (_b = (_a = props.abOptions.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
+        const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
+        if (previousItem) {
+            return Object.assign(Object.assign({}, previousItem), { align });
+        }
+        else {
+            const newPanel = {
+                statusPanel: panelId,
+                align,
+            };
+            return newPanel;
+        }
+    });
+    const leftPanels = allPanels.filter((panel) => !(panel === null || panel === void 0 ? void 0 : panel.align) || panel.align === 'left');
+    const centerPanels = allPanels.filter((panel) => panel.align === 'center');
+    const rightPanels = allPanels.filter((panel) => panel.align === 'right');
+    const handleTabChange = (tabs) => {
+        const leftPanels = panelIdtoPanel(tabs[0].Items, 'left');
+        const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
+        const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
+        const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    const disabled = false;
+    const panelToTabItemId = (panel) => { var _a; return (_a = panel.key) !== null && _a !== void 0 ? _a : panel.statusPanel; };
+    const tabs = [
+        {
+            Name: 'Left',
+            Items: leftPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Center',
+            Items: centerPanels.map(panelToTabItemId),
+        },
+        {
+            Name: 'Right',
+            Items: rightPanels.map(panelToTabItemId),
+        },
+    ];
+    const allOptions = [
+        { Id: 'agTotalRowCountComponent', Title: 'Row Count' },
+        { Id: 'agTotalAndFilteredRowCountComponent', Title: 'Totals and Filtered Row Count' },
+        { Id: 'agFilteredRowCountComponent', Title: 'Filtered Row Count' },
+        { Id: 'agSelectedRowCountComponent', Title: 'Selected Row Count' },
+        { Id: 'agAggregationComponent', Title: 'Aggregation' },
+    ];
+    const availableItems = allOptions;
+    const [adaptablePanelTitle, setAdaptablePanelTitle] = React.useState('');
+    const [adaptablePanelAlign, setAdaptablePanelAlign] = React.useState('left');
+    const isAdaptablePanelTitleAvailable = !allPanels.some((panel) => panel.key === adaptablePanelTitle);
+    const alignOptions = [
+        { onClick: () => setAdaptablePanelAlign('left'), value: 'left', label: 'Left' },
+        { onClick: () => setAdaptablePanelAlign('center'), value: 'center', label: 'Center' },
+        { onClick: () => setAdaptablePanelAlign('right'), value: 'right', label: 'Right' },
+    ];
+    const handleNewAdaptablePanel = () => {
+        const newAdaptablePanel = {
+            statusPanel: 'AdaptableStatusPanel',
+            align: adaptablePanelAlign,
+            key: adaptablePanelTitle,
+        };
+        const newStatusbarPanels = [...allPanels, newAdaptablePanel];
+        setAdaptablePanelTitle('');
+        setAdaptablePanelAlign('left');
+        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+    };
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(HelpBlock_1.default, null, "Status Bar"),
+        React.createElement(rebass_1.Box, { p: 2 },
+            React.createElement(rebass_1.Box, { style: {
+                    border: '1px solid var(--ab-color-primarydark)',
+                    borderRadius: 'var(--ab__border-radius)',
+                    marginBottom: 'var(--ab-space-2)',
+                    paddingBottom: 'var(--ab-space-1)',
+                    backgroundColor: 'var(--ab-color-defaultbackground)',
+                    padding: 'var(--ab-space-2)',
+                } },
+                React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
+                React.createElement(FormLayout_1.default, { mt: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
+                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placehoder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Align" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, (_d = alignOptions.find((option) => option.value === adaptablePanelAlign)) === null || _d === void 0 ? void 0 : _d.label)),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
+                        !isAdaptablePanelTitleAvailable && (React.createElement(rebass_1.Box, { mt: 2, color: "var(--ab-color-error)" }, "Adaptable panel name must be unique."))))),
+            React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+                    createTab: false,
+                    dragAndDropTab: false,
+                    deleteTab: false,
+                    editTabName: false,
+                }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
+};
+exports.UIOptionsStatusbarForm = UIOptionsStatusbarForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../../types';
+interface UIElementsOptionsProps {
+    adaptableOptions: AdaptableOptions;
+    onChangeadaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+}
+export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
+export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIElementsForm = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
+const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
+const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
+const UIElementsForm = (props) => {
+    let abOptions = props.adaptableOptions;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
+        React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions }),
+        React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadaptableOptions })));
+};
+exports.UIElementsForm = UIElementsForm;

package/src/View/AdaptableWizardView/Wizard.js

@@ -41,6 +41,7 @@ const Wizard = (props) => {
     const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
     const [isDataLoading, setIsDataLoading] = react_1.useState(false);
     const handleDataSource = (array, file) => {
+        var _a;
         const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
         try {
             Utils_1.validDataSource(dataSourceInfo);
@@ -51,7 +52,7 @@ const Wizard = (props) => {
                 payload: `Invalid adaptable configuration - ${err}`,
             });
         }
-        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo, (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
         adaptableOptions.gridOptions = gridOptions;

package/src/View/AdaptableWizardView/helper.d.ts

@@ -16,4 +16,4 @@ export interface WizardDataSourceInfo {
  */
 export declare const prepareDataSource: (json: any, _file?: File) => WizardDataSourceInfo;
 export declare const getColTypeFromValue: (value: any) => string;
-export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo) => GridOptions;
+export declare const prepareGridOptions: (dataSourceInfo: WizardDataSourceInfo, defaultGridOptions: Partial<GridOptions>) => GridOptions;

package/src/View/AdaptableWizardView/helper.js

@@ -65,7 +65,7 @@ const getColTypeFromValue = (value) => {
     return columnType;
 };
 exports.getColTypeFromValue = getColTypeFromValue;
-const prepareGridOptions = (dataSourceInfo) => {
+const prepareGridOptions = (dataSourceInfo, defaultGridOptions) => {
     const firstItem = dataSourceInfo.data[0];
     const columnDefs = dataSourceInfo.columns.map((columnName) => {
         const firstItemValue = firstItem[columnName];
@@ -81,16 +81,9 @@ const prepareGridOptions = (dataSourceInfo) => {
             editable: true,
         };
     });
-    const gridOptions = {
-        defaultColDef: {
+    const gridOptions = Object.assign(Object.assign({}, defaultGridOptions), { defaultColDef: {
             floatingFilter: true,
-        },
-        rowData: dataSourceInfo.data,
-        columnDefs,
-        enableRangeSelection: true,
-        rowSelection: 'multiple',
-        rowHeight: 30,
-    };
+        }, rowData: dataSourceInfo.data, columnDefs, enableRangeSelection: true, rowSelection: 'multiple', rowHeight: 30 });
     return gridOptions;
 };
 exports.prepareGridOptions = prepareGridOptions;

package/src/View/Components/FilterForm/FilterForm.js

@@ -110,7 +110,8 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+            .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (!this._isMounted) {
             return;
         }
@@ -210,7 +211,8 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.onClearColumnFilter(editedColumnFilter);
+            this.props.api.filterApi.clearColumnFilterByColumn(editedColumnFilter.ColumnId);
+            this.onCloseForm();
         }
         else {
             if (this.props.api.internalApi.getAdaptableOptions().filterOptions.autoApplyFilter) {

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -32,7 +32,8 @@ class QuickFilterFormComponent extends React.Component {
             }
         };
         this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+                .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
             if (!this._isMounted) {
                 return;
             }

package/src/View/Components/RangesComponent.js

@@ -147,7 +147,7 @@ class RangesComponent extends React.Component {
     addRange() {
         const lastRange = this.state.ranges[this.state.ranges.length - 1];
         this.state.ranges.push({
-            Min: lastRange.Max,
+            Min: lastRange.Max == 'Col-Max' ? 0 : lastRange.Max,
             Max: lastRange.Max,
             Color: UIHelper_1.getHexForName(UIHelper_1.GRAY),
         }),

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

@@ -58,7 +58,7 @@ const AggregationsSection = (props) => {
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         var _a, _b;
-        return sortWithOrder_1.sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allAggregableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: columnIds.reduce((acc, colId) => {

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

@@ -18,19 +18,23 @@ const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const ColumnLabels_1 = require("../LayoutEditor/ColumnLabels");
 const Utilities_1 = require("./Utilities");
-const lodash_1 = require("lodash");
 const icons_1 = require("../../../../components/icons");
 const CheckBox_1 = require("../../../../components/CheckBox");
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
 const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const ColumnsSectionSummary = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + lodash_1.clamp(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + Helper_1.clamp(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            if (adaptable.api.columnApi.isAutoPivotColumn(columnId) ||
+                adaptable.api.columnApi.isAutoRowGroupColumn(columnId)) {
+                return null;
+            }
             const friendlyName = adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId);
             const header = (_b = (_a = layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : '';
             const columnWidth = (_c = layout.ColumnWidthMap) === null || _c === void 0 ? void 0 : _c[columnId];
@@ -57,7 +61,7 @@ const ColumnsSectionSummary = () => {
                 grouping,
                 filter,
             };
-        });
+        }).filter(Boolean);
     }, [layout]);
     const columns = React.useMemo(() => {
         return {
@@ -187,7 +191,7 @@ const ColumnsSection = (props) => {
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedColumns = React.useMemo(() => {
-        return sortWithOrder_1.sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allColumns]);
     const handlePinChange = (columnId, pinning) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PinnedColumnsMap: Object.assign(Object.assign({}, layout.PinnedColumnsMap), { [columnId]: pinning }) }));

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

@@ -12,9 +12,10 @@ const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
 const PivotColumnsSectionSummary = () => {
+    var _a;
     const adaptable = AdaptableContext_1.useAdaptable();
     const { data: layout } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
-    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, layout.PivotColumns.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
+    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
 };
 exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
 const PivotColumnsSection = (props) => {
@@ -24,7 +25,7 @@ const PivotColumnsSection = (props) => {
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrder_1.sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allPivotColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PivotColumns: columnIds }));

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

@@ -26,7 +26,7 @@ const RowGroupingSection = (props) => {
     const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
     const sortedGroupableColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrder_1.sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allGroupableColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));

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

@@ -17,8 +17,8 @@ const SettingsSectionSummary = () => {
             "Layout Name: ",
             layout.Name),
         React.createElement(Tag_1.Tag, { mr: 2 },
-            "Pivot Layout: ",
-            layout.EnablePivot ? 'Yes' : 'No'),
+            "Layout Grid Type: ",
+            layout.EnablePivot ? 'Pivot' : 'Table'),
         React.createElement(Tag_1.Tag, { mr: 2 },
             "Suppress Aggregation Function in Header: ",
             layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));

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

@@ -38,7 +38,7 @@ const SortSection = (props) => {
     });
     const sortedSortColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrder_1.sortWithOrderArray(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: true }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
+        return sortWithOrder_1.sortWithOrderArray(allSortableColumns.map((col) => col.columnId), ((_a = layout.ColumnSorts) !== null && _a !== void 0 ? _a : []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnFromId(colId));
     }, [layout, allSortableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnSorts: (columnIds || []).map((columnId) => {

package/src/agGrid/Adaptable.d.ts

@@ -76,6 +76,7 @@ export declare class Adaptable implements IAdaptable {
     private currentColumnDefs?;
     private rowListeners;
     private isCheckedColumnDataType;
+    get isLive(): boolean;
     _on: (eventName: string, callback: EmitterCallback) => (() => void);
     _onIncludeFired: (eventName: string, callback: EmitterCallback) => (() => void);
     _emit: (eventName: string, data?: any) => Promise<any>;
@@ -259,7 +260,7 @@ export declare class Adaptable implements IAdaptable {
     getExcelClassNameForCell(colId: string, primaryKeyValue: any): string;
     setupColumnCellEditor({ colId, col }: ColumnSetupInfo): void;
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
-    setupColumnTooltipValueGetter({ col, colId }: ColumnSetupInfo): void;
+    setupColumnTooltipValueGetter({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnQuickFilerText({ col, abColumn }: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;