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

package/src/Api/Implementation/LayoutHelpers.js

@@ -183,6 +183,7 @@ const tableLayoutToTableLayoutModel = (tableLayout) => {
                 }
             : undefined,
         TableAggregationColumns: TableAggregationColumns,
+        GrandTotalRow: tableLayout.GrandTotalRow,
     });
     if (tableLayout.RowGroupDisplayType) {
         result.RowGroupDisplayType = tableLayout.RowGroupDisplayType;
@@ -294,6 +295,12 @@ const tableLayoutModelToTableLayout = (layoutModel, defaults) => {
     else {
         delete tableLayout.TableAggregationColumns;
     }
+    if (layoutModel.GrandTotalRow) {
+        tableLayout.GrandTotalRow = layoutModel.GrandTotalRow;
+    }
+    else {
+        delete tableLayout.GrandTotalRow;
+    }
     if (layoutModel.ColumnFilters) {
         tableLayout.ColumnFilters = layoutModel.ColumnFilters;
     }

package/src/Api/Internal/ColumnInternalApi.js

@@ -9,7 +9,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 const ColumnApiImpl_1 = require("../Implementation/ColumnApiImpl");
 const destructurePivotColumnId_1 = require("../../layout-manager/src/destructurePivotColumnId");
 const isPivotGroupTotalColumn_1 = require("../../layout-manager/src/isPivotGroupTotalColumn");
-const isPivotTotalColumn_1 = require("../../layout-manager/src/isPivotTotalColumn");
+const isPivotAggTotalColumn_1 = require("../../layout-manager/src/isPivotAggTotalColumn");
 function getAutoRowGroupColumnIdFor(columnId) {
     return `${GeneralConstants_1.AG_GRID_GROUPED_COLUMN}-${columnId}`;
 }
@@ -226,7 +226,7 @@ class ColumnInternalApi extends ApiBase_1.ApiBase {
                         aggregation: pivotValueCol.getAggFunc(),
                     };
                 }
-                if ((0, isPivotGroupTotalColumn_1.isPivotGroupTotalColumn)(params.colDef)) {
+                if ((0, isPivotGroupTotalColumn_1.isPivotGroupTotalColumn)(params.colDef?.colId)) {
                     const columnType = 'pivotGroupTotal';
                     const pivotColInfo = (0, destructurePivotColumnId_1.destructurePivotColumnId)(params.colDef, {
                         pivotColIds: currentPivotLayout.PivotColumns,
@@ -244,7 +244,7 @@ class ColumnInternalApi extends ApiBase_1.ApiBase {
                         aggregation: params.colDef?.pivotValueColumn?.getAggFunc(),
                     };
                 }
-                if ((0, isPivotTotalColumn_1.isPivotTotalColumn)(params.colDef)) {
+                if ((0, isPivotAggTotalColumn_1.isPivotAggTotalColumn)(params.colDef)) {
                     const columnType = 'pivotAggregationTotal';
                     const pivotValueCol = params.colDef.pivotValueColumn;
                     const pivotColInfo = (0, destructurePivotColumnId_1.destructurePivotColumnId)(params.colDef, {

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

@@ -183,16 +183,15 @@ const AlertButtonsEditor = (props) => {
                                         return btn;
                                     }));
                                 } }),
-                            React.createElement(rebass_1.Box, { mr: 2 },
-                                React.createElement(Select_1.Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
-                                        return {
-                                            label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
-                                            value: variant,
-                                        };
-                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
-                                        setVariant(value);
-                                    } })),
-                            React.createElement(Select_1.Select, { options: TONE_OPTIONS, onChange: (value) => {
+                            React.createElement(Select_1.Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
+                                    return {
+                                        label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
+                                        value: variant,
+                                    };
+                                }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
+                                    setVariant(value);
+                                } }),
+                            React.createElement(Select_1.Select, { style: { marginLeft: 'var(--ab-space-2)' }, options: TONE_OPTIONS, onChange: (value) => {
                                     if (value === 'text') {
                                         setTone(null);
                                         return;

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

@@ -14,6 +14,8 @@ 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 Select_1 = require("../../../../components/Select");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
 const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.TableAggregationColumns
@@ -196,7 +198,20 @@ 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(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(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/agGrid/AdaptableAgGrid.d.ts

@@ -332,6 +332,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private filterOnDataChange;
     refreshLayout(): void;
     private isRowGroupDifferentInLayout;
+    private hasPivotTotalsInLayout;
     private onLayoutChange;
     private validateColumnDefTypes;
 }