@adaptabletools/adaptable-cjs 20.0.7-canary.1 → 20.0.7-canary.2

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -70,31 +70,32 @@ const AlertNotificationWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Notification Options"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(CheckBox_1.CheckBox, { checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
-                        const newAlertDefinition = {
-                            ...data,
-                            AlertProperties: {
-                                ...data.AlertProperties,
-                                DisplayNotification,
-                            },
-                        };
-                        if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
-                            delete newAlertDefinition.AlertForm.Buttons;
-                        }
-                        if (DisplayNotification && newAlertDefinition.AlertForm == undefined) {
-                            newAlertDefinition.AlertForm =
-                                api.alertApi.internalApi.getDefaultAlertNotificationForm();
-                        }
-                        // make sure we have at least one button
-                        if (typeof newAlertDefinition.AlertForm === 'object' &&
-                            (!newAlertDefinition.AlertForm?.Buttons ||
-                                newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
-                            newAlertDefinition.AlertForm.Buttons = [
-                                api.alertApi.internalApi.getDefaultButton(),
-                            ];
-                        }
-                        props.onChange(newAlertDefinition);
-                    } }, "Display a Notification when Alert is triggered (with action buttons)"),
+                React.createElement("div", null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
+                            const newAlertDefinition = {
+                                ...data,
+                                AlertProperties: {
+                                    ...data.AlertProperties,
+                                    DisplayNotification,
+                                },
+                            };
+                            if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
+                                delete newAlertDefinition.AlertForm.Buttons;
+                            }
+                            if (DisplayNotification && newAlertDefinition.AlertForm == undefined) {
+                                newAlertDefinition.AlertForm =
+                                    api.alertApi.internalApi.getDefaultAlertNotificationForm();
+                            }
+                            // make sure we have at least one button
+                            if (typeof newAlertDefinition.AlertForm === 'object' &&
+                                (!newAlertDefinition.AlertForm?.Buttons ||
+                                    newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
+                                newAlertDefinition.AlertForm.Buttons = [
+                                    api.alertApi.internalApi.getDefaultButton(),
+                                ];
+                            }
+                            props.onChange(newAlertDefinition);
+                        } }, "Display a Notification when Alert is triggered (with action buttons)")),
                 data.AlertProperties?.DisplayNotification ? (typeof data.AlertForm === 'string' ? (React.createElement(rebass_1.Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor_1.AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange({
                             ...data,

package/src/View/Components/ColumnFilter/ColumnFilter.js

@@ -22,7 +22,7 @@ const ColumnFilterPredicateDropdown = (props) => {
     });
     const operator = props.predicate?.operator;
     const isAndOr = operator === 'AND' || operator === 'OR';
-    return (React.createElement(rebass_1.Box, { display: 'flex', alignItems: "center", style: {
+    return (React.createElement(rebass_1.Box, { display: 'flex', alignItems: "center", className: "ab-ColumnFilterPredicateDropdown", style: {
             //@ts-ignore ignore
             '--ab-cmp-input__background': 'var(--ab-color-primary)',
         } },

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

@@ -28,9 +28,12 @@ const ColumnValuesSelect = (props) => {
         }
         return true;
     });
-    const component = (React.createElement(Select_1.Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, menuStyle: {
-            minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 260px))`,
-        }, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
+    const menuStyle = React.useMemo(() => {
+        return {
+            minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
+        };
+    }, [column.columnId]);
+    const component = (React.createElement(Select_1.Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
     return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {

package/src/View/Components/NewScopeComponent.js

@@ -13,6 +13,7 @@ const ColumnSelector_1 = require("./ColumnSelector");
 const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ValueSelector_1 = require("./ValueSelector");
+const AdaptableColumn_1 = require("../../AdaptableState/Common/AdaptableColumn");
 const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
@@ -181,6 +182,6 @@ const NewScopeComponent = (props) => {
                             ColumnTypes: columnTypes,
                         };
                         props.updateScope(newScope);
-                    } }, columnType)))))))));
+                    } }, (0, AdaptableColumn_1.getColumnTypeFriendlyName)(columnType))))))))));
 };
 exports.NewScopeComponent = NewScopeComponent;

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

@@ -117,7 +117,7 @@ const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
                 renderSummary: () => React.createElement(PivotAggregationsSection_1.PivotAggregationsSectionSummary, null),
-                isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
+                isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
                 render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
                     React.createElement(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
                             let newLayout = (0, Helper_1.cloneObject)(layout);

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

@@ -196,7 +196,7 @@ const AggregationsSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, null,
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function Text in Column Header"))),
+                    React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Omit Aggregation Function from Header"))),
             React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
                     return `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Layout, PivotLayout } from '../../../../../types';
-export declare const isAggregationsSectionValid: (data: Layout) => true | string;
+import { PivotLayout } from '../../../../../types';
+export declare const isPivotAggregationsSectionValid: (data: PivotLayout) => true | string;
 export declare const PivotAggregationsSectionSummary: React.FunctionComponent;
 interface PivotAggregationsSectionProps {
     onChange: (data: PivotLayout) => void;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PivotAggregationsSection = exports.PivotAggregationsSectionSummary = exports.isAggregationsSectionValid = void 0;
+exports.PivotAggregationsSection = exports.PivotAggregationsSectionSummary = exports.isPivotAggregationsSectionValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
@@ -9,47 +9,50 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Tabs_1 = require("../../../../components/Tabs");
 const Tag_1 = require("../../../../components/Tag");
+const AggregationColumns_1 = require("../../../../AdaptableState/Common/AggregationColumns");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const Select_1 = require("../../../../components/Select");
 const PivotColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
     const adaptableAggFunctions = [];
     if (props.column.dataType === 'number') {
-        adaptableAggFunctions.push(WEIGHTED_AVERAGE_AGG_FN_NAME);
+        adaptableAggFunctions.push(AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME);
     }
     const aggOptions = [...props.column.availableAggregationFunctions, ...adaptableAggFunctions].map((fnName) => {
         return {
             label: fnName,
             onClick: () => {
-                let aggCols = props.layout.PivotAggregationColumns;
+                let aggCols = props.layout.PivotAggregationColumns || [];
                 if (!aggCols) {
                     return;
                 }
-                if (fnName === WEIGHTED_AVERAGE_AGG_FN_NAME) {
-                    aggCols = aggCols.map((x) => {
-                        if (x.ColumnId === props.column.columnId) {
-                            return {
-                                ...x,
-                                type: 'weightedAverage',
-                                weightedColumnId: null,
-                            };
-                        }
-                        return x;
-                    });
-                }
-                else {
-                    aggCols = aggCols.map((x) => {
-                        if (x.ColumnId === props.column.columnId) {
-                            return {
-                                ...x,
-                                AggFunc: fnName,
-                            };
-                        }
-                        return x;
+                const AggFuncValue = fnName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME
+                    ? {
+                        type: 'weightedAverage',
+                        weightedColumnId: null,
+                    }
+                    : fnName;
+                let found = false;
+                aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
+                    if (ColumnId === props.column.columnId) {
+                        found = true;
+                        return {
+                            ColumnId,
+                            AggFunc: AggFuncValue,
+                        };
+                    }
+                    return { ColumnId, AggFunc };
+                });
+                if (!found) {
+                    aggCols.push({
+                        ColumnId: props.column.columnId,
+                        AggFunc: AggFuncValue,
                     });
                 }
                 props.onChangeAggFunction(aggCols);
@@ -66,16 +69,27 @@ const PivotColumnRow = (props) => {
                 if (!aggCols) {
                     return;
                 }
-                aggCols = aggCols.map((x) => {
-                    if (x.ColumnId === props.column.columnId) {
+                const AggFuncValue = {
+                    type: 'weightedAverage',
+                    weightedColumnId: col.columnId,
+                };
+                let found = false;
+                aggCols = aggCols.map(({ ColumnId, AggFunc }) => {
+                    if (ColumnId === props.column.columnId) {
+                        found = true;
                         return {
-                            ...x,
-                            type: 'weightedAverage',
-                            weightedColumnId: col.columnId,
+                            ColumnId,
+                            AggFunc: AggFuncValue,
                         };
                     }
-                    return x;
+                    return { ColumnId, AggFunc };
                 });
+                if (!found) {
+                    aggCols.push({
+                        ColumnId: props.column.columnId,
+                        AggFunc: AggFuncValue,
+                    });
+                }
                 props.onChangeAggFunction(aggCols);
             },
         };
@@ -87,18 +101,122 @@ const PivotColumnRow = (props) => {
             ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
             : 'Select Weight';
     }
-    return (React.createElement(rebass_1.Flex, { alignItems: "center" },
-        props.column.friendlyName,
-        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(rebass_1.Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-            React.createElement(rebass_1.Text, null, "Weight"),
-            ' ',
-            React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
+    const totalOptions = ['Off', 'Before', 'After', 'Pivot Specific'].map((totalVariant) => {
+        return {
+            label: totalVariant,
+            onClick: () => {
+                let aggCols = props.layout.PivotAggregationColumns;
+                if (!aggCols) {
+                    return;
+                }
+                aggCols = aggCols.map((aggCol) => {
+                    if (aggCol.ColumnId === props.column.columnId) {
+                        let updatedTotalColumn = false;
+                        if (totalVariant === 'Before') {
+                            updatedTotalColumn = 'before';
+                        }
+                        if (totalVariant === 'After') {
+                            updatedTotalColumn = 'after';
+                        }
+                        if (totalVariant === 'Pivot Specific') {
+                            updatedTotalColumn = props.layout.PivotColumns.map((pivotColId) => {
+                                return {
+                                    PivotColumnId: pivotColId,
+                                    ShowTotal: true,
+                                };
+                            });
+                        }
+                        return {
+                            ...aggCol,
+                            TotalColumn: updatedTotalColumn,
+                        };
+                    }
+                    return aggCol;
+                });
+                props.onChangeAggFunction(aggCols);
+            },
+        };
+    });
+    const currentAggCol = props.layout.PivotAggregationColumns?.find((aggCol) => aggCol.ColumnId === props.column.columnId);
+    const currentTotal = currentAggCol?.TotalColumn
+        ? currentAggCol.TotalColumn === true || currentAggCol.TotalColumn === 'before'
+            ? 'Before'
+            : currentAggCol.TotalColumn === 'after'
+                ? 'After'
+                : Array.isArray(currentAggCol.TotalColumn)
+                    ? 'Pivot Specific'
+                    : 'Off'
+        : 'Off';
+    const hasPivotSpecificTotals = Array.isArray(currentAggCol?.TotalColumn);
+    const pivotSpecificTotals = Array.isArray(currentAggCol?.TotalColumn)
+        ? currentAggCol.TotalColumn
+        : props.layout.PivotColumns?.map((pivotColId) => ({
+            PivotColumnId: pivotColId,
+            ShowTotal: false,
+        }));
+    const handleTotalChange = (pivotColId, value) => {
+        const updatedAggCols = (props.layout.PivotAggregationColumns || []).map((aggCol) => {
+            if (aggCol.ColumnId === props.column.columnId) {
+                const updatedTotals = pivotSpecificTotals.map((total) => {
+                    if (total.PivotColumnId === pivotColId) {
+                        return { ...total, ShowTotal: value };
+                    }
+                    return total;
+                });
+                return { ...aggCol, TotalColumn: updatedTotals };
+            }
+            return aggCol;
+        });
+        props.onChangeAggFunction(updatedAggCols);
+    };
+    const pivotTotalOptions = ['Off', 'Before', 'After'].map((option) => ({
+        label: option,
+        value: option === 'Off' ? false : option.toLowerCase(),
+    }));
+    return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
+        React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
+            React.createElement(rebass_1.Flex, { flex: "0 0 auto", alignItems: "center" },
+                React.createElement(rebass_1.Flex, { minWidth: 80 }, props.column.friendlyName),
+                aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
+                currentAggFnName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(rebass_1.Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
+                    React.createElement(rebass_1.Text, null, "Weight"),
+                    ' ',
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName))),
+                aggValue && (React.createElement(rebass_1.Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
+                    React.createElement(rebass_1.Text, null, "Total Column"),
+                    ' ',
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: totalOptions, ml: 2 }, currentTotal)))),
+            hasPivotSpecificTotals && (React.createElement(rebass_1.Flex, { ml: 2, pl: 2, flexWrap: "wrap", flex: "1 1 auto", alignItems: "center", style: {
+                    minWidth: '200px',
+                    borderLeft: '1px solid var(--ab-color-text-on-primary)',
+                    rowGap: '8px',
+                    columnGap: '12px',
+                } }, props.layout.PivotColumns.map((pivotColId) => {
+                const pivotTotalSetting = pivotSpecificTotals.find((t) => t.PivotColumnId === pivotColId);
+                const currentValue = pivotTotalSetting == undefined
+                    ? 'Off'
+                    : pivotTotalSetting.ShowTotal === false
+                        ? 'Off'
+                        : pivotTotalSetting.ShowTotal === 'before' ||
+                            pivotTotalSetting.ShowTotal === true ||
+                            pivotTotalSetting.ShowTotal == undefined
+                            ? 'Before'
+                            : pivotTotalSetting.ShowTotal === 'after'
+                                ? 'After'
+                                : 'Off';
+                return (React.createElement(rebass_1.Flex, { key: pivotColId, alignItems: "center" },
+                    React.createElement(rebass_1.Text, { mr: 1 },
+                        adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId),
+                        ":"),
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
+                            label: opt.label,
+                            onClick: () => handleTotalChange(pivotColId, opt.value),
+                        })) }, currentValue)));
+            }))))));
 };
-const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
-const isAggregationsSectionValid = (data) => {
-    const weightedAvg = data.TableAggregationColumns
-        ? (data.TableAggregationColumns || [])
+const isPivotAggregationsSectionValid = (data) => {
+    const weightedAvg = data.PivotAggregationColumns
+        ? (data.PivotAggregationColumns || [])
             .map((agg) => agg.AggFunc)
             .find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
         : null;
@@ -107,7 +225,7 @@ const isAggregationsSectionValid = (data) => {
     }
     return true;
 };
-exports.isAggregationsSectionValid = isAggregationsSectionValid;
+exports.isPivotAggregationsSectionValid = isPivotAggregationsSectionValid;
 const PivotAggregationsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -132,7 +250,6 @@ const PivotAggregationsSection = (props) => {
     const sortedAggregableColumns = React.useMemo(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(allAggregableColumns.map((col) => col.columnId), (layout.PivotAggregationColumns ?? []).map((col) => col.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
-    globalThis.layout = layout;
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         const currentAggColumns = layout.PivotAggregationColumns ?? [];
         const PivotAggregationColumns = columnIds.map((colId) => {
@@ -140,6 +257,7 @@ const PivotAggregationsSection = (props) => {
                 ColumnId: colId,
                 AggFunc: currentAggColumns.find((x) => x.ColumnId === colId)?.AggFunc ??
                     adaptable.api.columnApi.getDefaultAggFunc(colId),
+                TotalColumn: currentAggColumns.find((x) => x.ColumnId === colId)?.TotalColumn,
             };
         });
         props.onChange({
@@ -147,10 +265,14 @@ const PivotAggregationsSection = (props) => {
             PivotAggregationColumns,
         });
     }, [layout]);
-    const handleAggregationChange = React.useCallback((PivotAggregationColumns) => {
+    const handleAggregationChange = React.useCallback((pivotAggregationColumns) => {
+        if (pivotAggregationColumns.some((aggCol) => aggCol.TotalColumn !== false || aggCol.TotalColumn !== null)) {
+            // if any Aggregation Column has a Total Column, we need to disable the Pivot Group Total Column
+            delete layout['PivotGroupTotalColumn'];
+        }
         props.onChange({
             ...layout,
-            PivotAggregationColumns,
+            PivotAggregationColumns: pivotAggregationColumns,
         });
     }, [layout]);
     const aggregationColumnsMap = React.useMemo(() => {
@@ -165,7 +287,7 @@ const PivotAggregationsSection = (props) => {
                 fnName = allColumnsMap[colId].aggregationFunction;
             }
             if (typeof fn === 'object' && fn.type === 'weightedAverage') {
-                fnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
+                fnName = AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME;
             }
             else if (typeof fn === 'string') {
                 fnName = fn;
@@ -180,12 +302,66 @@ const PivotAggregationsSection = (props) => {
             SuppressAggFuncInHeader: checked,
         });
     };
+    const checkIfPivotGroupTotalColumnEnabled = () => {
+        // check that all AggregationColumns have identical AggFuncs
+        const aggregationColumns = layout.PivotAggregationColumns;
+        if (!aggregationColumns || aggregationColumns.length === 0) {
+            return true;
+        }
+        const firstAggFuncName = (0, AggregationColumns_1.getAggFuncName)(aggregationColumns[0].AggFunc);
+        if (layout.PivotAggregationColumns?.some((aggCol) => (0, AggregationColumns_1.getAggFuncName)(aggCol.AggFunc) !== firstAggFuncName)) {
+            return 'Requires identical aggregation on all columns';
+        }
+        // check that no Aggregation Total Column is enabled
+        const hasAggregationTotalColumn = aggregationColumns.some((aggCol) => aggCol.TotalColumn !== false && aggCol.TotalColumn != null);
+        if (hasAggregationTotalColumn) {
+            return 'Can only be enabled when no Aggregation Total Column is present';
+        }
+        return true;
+    };
+    const isPivotGroupTotalColumnEnabled = checkIfPivotGroupTotalColumnEnabled();
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, null,
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function Text in Column Header"))),
+                    React.createElement(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header' },
+                        React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
+                    React.createElement(FormLayout_1.FormRow, { label: 'Grand Total Row' },
+                        React.createElement(Select_1.Select, { style: { width: 120 }, options: ['top', 'bottom'].map((position) => {
+                                return {
+                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
+                                    value: position,
+                                };
+                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
+                                props.onChange({
+                                    ...layout,
+                                    GrandTotalRow: value,
+                                });
+                            }, isClearable: true })),
+                    React.createElement(FormLayout_1.FormRow, { label: 'Grand Total Column' },
+                        React.createElement(Select_1.Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                                return {
+                                    label: StringExtensions_1.default.CapitaliseFirstLetter(position),
+                                    value: position,
+                                };
+                            }), placeholder: "Off", value: layout.GrandTotalColumn, onChange: (value) => {
+                                props.onChange({
+                                    ...layout,
+                                    GrandTotalColumn: value,
+                                });
+                            }, isClearable: true })),
+                    React.createElement(FormLayout_1.FormRow, { label: 'Pivot Group Total Column' }, isPivotGroupTotalColumnEnabled === true ? (React.createElement(Select_1.Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                            return {
+                                label: StringExtensions_1.default.CapitaliseFirstLetter(position),
+                                value: position,
+                            };
+                        }), placeholder: "Off", value: layout.PivotGroupTotalColumn, onChange: (value) => {
+                            props.onChange({
+                                ...layout,
+                                PivotGroupTotalColumn: value,
+                            });
+                        }, isClearable: true })) : (React.createElement(rebass_1.Text, { marginLeft: 1, style: { fontStyle: 'italic' } }, isPivotGroupTotalColumnEnabled))))),
             React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(PivotColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.PivotAggregationColumns || []).map((col) => col.ColumnId), allowReorder: true, xSelectedLabel: () => {
                     return `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));

package/src/components/Select/Select.js

@@ -32,8 +32,10 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         },
         resizable: false,
         defaultSortable: false,
-        renderSelectionCheckBox: ({ renderBag }) => {
-            return renderBag.selectionCheckBox;
+        renderSelectionCheckBox: true,
+        className: 'ab-Select-CheckboxColumn',
+        renderValue: ({ renderBag }) => {
+            return React.createElement("div", { className: "InfiniteCell_content_value" }, renderBag.value);
         },
         renderHeader: (headerParams) => {
             return (React.createElement(React.Fragment, null,
@@ -78,8 +80,15 @@ const doesOptionMatchValue = function (value) {
     };
 };
 const Select = function (props) {
+    let maxLabelLength = 0;
     const ref = React.useRef(null);
-    const valueToOptionMap = new Map((props.options || []).map((opt) => [opt.value, opt]));
+    const valueToOptionMap = new Map((props.options || []).map((opt) => {
+        let label = opt.label;
+        if (typeof label === 'string' || typeof label === 'number' || typeof label === 'boolean') {
+            maxLabelLength = Math.max(maxLabelLength, `${label}`.length);
+        }
+        return [opt.value, opt];
+    }));
     const findOptionByValue = (value) => {
         const option = valueToOptionMap.get(value);
         if (option) {
@@ -420,7 +429,10 @@ const Select = function (props) {
                     zIndex: 999999,
                     boxShadow: 'var(--ab-cmp-select-menu__box-shadow)',
                     minWidth: `var(--ab-cmp-select-menu__min-width)`,
+                    width: `${Math.max(maxLabelLength, 10)}ch`,
                     '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)} * var(--ab-grid-row-height), 20rem)`,
+                    maxHeight: 'var(--ab-cmp-select-menu__max-height)',
+                    maxWidth: 'var(--ab-cmp-select-menu__max-width)',
                     ...commonStyles(state),
                     ...props.menuStyle,
                 };

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1745430388589 || Date.now(),
-    VERSION: "20.0.7-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1745834831422 || Date.now(),
+    VERSION: "20.0.7-canary.2" || '--current-version--',
 };

package/src/layout-manager/src/index.d.ts

@@ -72,8 +72,8 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     applyPivotTotals(layout: PivotLayoutModel): void;
     applyPivotExpandLevel(layout: PivotLayoutModel): void;
     private withSuppressColumnAnimation;
+    private patchColDefType;
     private setupPivotTotals;
-    private isPivotRowTotalColDef;
     private patchPivotTotalColumn;
     private getPivotTotalColumnConfig;
 }

package/src/layout-manager/src/index.js

@@ -9,7 +9,9 @@ const isLayoutEqual_1 = require("./isLayoutEqual");
 const simplifyLayoutModel_1 = require("./simplifyLayoutModel");
 const sortColumnIdsByOrder_1 = require("./sortColumnIdsByOrder");
 const destructurePivotColumnId_1 = require("./destructurePivotColumnId");
-const isPivotTotalColumn_1 = require("./isPivotTotalColumn");
+const isPivotAggTotalColumn_1 = require("./isPivotAggTotalColumn");
+const isPivotGrandTotalColumn_1 = require("./isPivotGrandTotalColumn");
+const isPivotGroupTotalColumn_1 = require("./isPivotGroupTotalColumn");
 function flattenColDefs(colDefs) {
     const res = [];
     const iteration = (c) => {
@@ -1111,8 +1113,28 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         }
         return res;
     }
+    patchColDefType(colDef, colTypes) {
+        const originalTypes = colDef.type == undefined ? [] : Array.isArray(colDef.type) ? colDef.type : [colDef.type];
+        const columnTypes = new Set(originalTypes);
+        colTypes.forEach((colType) => {
+            columnTypes.add(colType);
+        });
+        colDef.type = Array.from(columnTypes);
+    }
     setupPivotTotals() {
         const _original_processPivotResultColDef = this.gridApi.getGridOption('processPivotResultColDef');
+        this.gridApi.setGridOption('processPivotResultColDef', (colDef) => {
+            _original_processPivotResultColDef?.(colDef);
+            if (!(0, isPivotLayoutModel_1.isPivotLayoutModel)(this.currentLayout)) {
+                return;
+            }
+            if ((0, isPivotGrandTotalColumn_1.isPivotGrandTotalColumn)(colDef)) {
+                this.patchColDefType(colDef, ['pivotTotalColumn', 'pivotGrandTotalColumn']);
+            }
+            if ((0, isPivotGroupTotalColumn_1.isPivotGroupTotalColumn)(colDef.colId)) {
+                this.patchColDefType(colDef, ['pivotTotalColumn', 'pivotGroupTotalColumn']);
+            }
+        });
         const _original_processPivotResultColGroupDef = this.gridApi.getGridOption('processPivotResultColGroupDef');
         this.gridApi.setGridOption('processPivotResultColGroupDef', (colGroupDef) => {
             _original_processPivotResultColGroupDef?.(colGroupDef);
@@ -1122,9 +1144,6 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             this.patchPivotTotalColumn(colGroupDef);
         });
     }
-    isPivotRowTotalColDef(colDef) {
-        return colDef.colId?.startsWith('PivotRowTotal_');
-    }
     patchPivotTotalColumn(colGroupDef) {
         const hasPivotTotalCols = (pivotLayout) => {
             return pivotLayout.PivotAggregationColumns?.some((aggCol) => !!aggCol.TotalColumn);
@@ -1138,7 +1157,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         const pivotTotalColDefsAfter = [];
         const normalColDefs = [];
         colGroupDef.children.forEach((colDef) => {
-            if (this.isPivotRowTotalColDef(colDef)) {
+            if ((0, isPivotGrandTotalColumn_1.isPivotGrandTotalColumn)(colDef)) {
                 if (this.gridApi.getGridOption('pivotRowTotals') === 'after') {
                     pivotRowTotalColDefsAfter.push(colDef);
                 }
@@ -1147,11 +1166,12 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
                 }
                 return;
             }
-            if ((0, isPivotTotalColumn_1.isPivotTotalColumn)(colDef)) {
+            if ((0, isPivotAggTotalColumn_1.isPivotAggTotalColumn)(colDef)) {
                 if (!colDef.colId.startsWith('pivot_')) {
                     this.warn(`Pivot total column ${colDef.colId} is not prefixed with 'pivot_', skipping...`);
                     return;
                 }
+                this.patchColDefType(colDef, ['pivotTotalColumn', 'pivotAggregationTotalColumn']);
                 // we do this for all total cols, but we will hide the ones that are not visible
                 colDef.columnGroupShow = undefined;
                 const totalColConfig = this.getPivotTotalColumnConfig(colDef, this.currentLayout);