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

package/src/Api/Internal/ColumnInternalApi.js

@@ -5,7 +5,7 @@ import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { isPivotGrandTotalColumn, isPivotResultColumn } from '../Implementation/ColumnApiImpl';
 import { destructurePivotColumnId } from '../../layout-manager/src/destructurePivotColumnId';
 import { isPivotGroupTotalColumn } from '../../layout-manager/src/isPivotGroupTotalColumn';
-import { isPivotTotalColumn } from '../../layout-manager/src/isPivotTotalColumn';
+import { isPivotAggTotalColumn } from '../../layout-manager/src/isPivotAggTotalColumn';
 export function getAutoRowGroupColumnIdFor(columnId) {
     return `${AG_GRID_GROUPED_COLUMN}-${columnId}`;
 }
@@ -221,7 +221,7 @@ export class ColumnInternalApi extends ApiBase {
                         aggregation: pivotValueCol.getAggFunc(),
                     };
                 }
-                if (isPivotGroupTotalColumn(params.colDef)) {
+                if (isPivotGroupTotalColumn(params.colDef?.colId)) {
                     const columnType = 'pivotGroupTotal';
                     const pivotColInfo = destructurePivotColumnId(params.colDef, {
                         pivotColIds: currentPivotLayout.PivotColumns,
@@ -239,7 +239,7 @@ export class ColumnInternalApi extends ApiBase {
                         aggregation: params.colDef?.pivotValueColumn?.getAggFunc(),
                     };
                 }
-                if (isPivotTotalColumn(params.colDef)) {
+                if (isPivotAggTotalColumn(params.colDef)) {
                     const columnType = 'pivotAggregationTotal';
                     const pivotValueCol = params.colDef.pivotValueColumn;
                     const pivotColInfo = destructurePivotColumnId(params.colDef, {

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

@@ -179,16 +179,15 @@ export const AlertButtonsEditor = (props) => {
                                         return btn;
                                     }));
                                 } }),
-                            React.createElement(Box, { mr: 2 },
-                                React.createElement(Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
-                                        return {
-                                            label: StringExtensions.CapitaliseFirstLetter(variant),
-                                            value: variant,
-                                        };
-                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
-                                        setVariant(value);
-                                    } })),
-                            React.createElement(Select, { options: TONE_OPTIONS, onChange: (value) => {
+                            React.createElement(Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
+                                    return {
+                                        label: StringExtensions.CapitaliseFirstLetter(variant),
+                                        value: variant,
+                                    };
+                                }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle?.variant, onChange: (value) => {
+                                    setVariant(value);
+                                } }),
+                            React.createElement(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

@@ -64,31 +64,32 @@ export const AlertNotificationWizardSection = (props) => {
         React.createElement(Tabs, { "data-name": "display-options", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs.Tab, null, "Notification Options"),
             React.createElement(Tabs.Content, null,
-                React.createElement(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, { 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(Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: data.AlertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange({
                             ...data,

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

@@ -18,7 +18,7 @@ const ColumnFilterPredicateDropdown = (props) => {
     });
     const operator = props.predicate?.operator;
     const isAndOr = operator === 'AND' || operator === 'OR';
-    return (React.createElement(Box, { display: 'flex', alignItems: "center", style: {
+    return (React.createElement(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

@@ -24,9 +24,12 @@ export const ColumnValuesSelect = (props) => {
         }
         return true;
     });
-    const component = (React.createElement(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, { 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: join(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {

package/src/View/Components/NewScopeComponent.js

@@ -9,6 +9,7 @@ import { NewColumnSelector } from './ColumnSelector';
 import { AdaptableFormControlTextClear } from './Forms/AdaptableFormControlTextClear';
 import { useAdaptable } from '../AdaptableContext';
 import { ValueOptionsTags } from './ValueSelector';
+import { getColumnTypeFriendlyName } from '../../AdaptableState/Common/AdaptableColumn';
 export const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
@@ -175,5 +176,5 @@ export const NewScopeComponent = (props) => {
                             ColumnTypes: columnTypes,
                         };
                         props.updateScope(newScope);
-                    } }, columnType)))))))));
+                    } }, getColumnTypeFriendlyName(columnType))))))))));
 };

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

@@ -18,7 +18,7 @@ import { areSummaryRowsValid, RowSummarySection, RowSummarySectionSummary, } fro
 import { WEIGHTED_AVERAGE_AGGREGATED_FUNCTION } from '../../../AdaptableState/Common/RowSummary';
 import { isPivotLayout } from '../../../Utilities/isPivotLayout';
 import { PivotRowGroupingSection, PivotRowGroupingSectionSummary, } from './sections/PivotRowGroupingSection';
-import { PivotAggregationsSection, PivotAggregationsSectionSummary, } from './sections/PivotAggregationsSection';
+import { isPivotAggregationsSectionValid, PivotAggregationsSection, PivotAggregationsSectionSummary, } from './sections/PivotAggregationsSection';
 export const LayoutWizard = (props) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
@@ -113,7 +113,7 @@ export const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
                 details: 'Select Pivot Column Aggregations',
                 renderSummary: () => React.createElement(PivotAggregationsSectionSummary, null),
-                isValid: (data) => isAggregationsSectionValid(data),
+                isValid: (data) => isPivotAggregationsSectionValid(data),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
                     React.createElement(PivotAggregationsSection, { onChange: (layout) => {
                             let newLayout = cloneObject(layout);

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

@@ -10,6 +10,8 @@ import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { Select } from '../../../../components/Select';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
 export const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.TableAggregationColumns
@@ -190,7 +192,20 @@ export const AggregationsSection = (props) => {
         React.createElement(Tabs.Content, null,
             React.createElement(Flex, null,
                 React.createElement(FormLayout, null,
-                    React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function Text in Column Header"))),
+                    React.createElement(FormRow, { label: 'Omit Aggregation from Header' },
+                        React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
+                    React.createElement(FormRow, { label: 'Grand Total Row' },
+                        React.createElement(Select, { style: { width: 120 }, options: ['top', 'bottom'].map((position) => {
+                                return {
+                                    label: StringExtensions.CapitaliseFirstLetter(position),
+                                    value: position,
+                                };
+                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
+                                props.onChange({
+                                    ...layout,
+                                    GrandTotalRow: value,
+                                });
+                            }, isClearable: true })))),
             React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: 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

@@ -5,11 +5,14 @@ import DropdownButton from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
+import { getAggFuncName, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../../../../AdaptableState/Common/AggregationColumns';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ValueSelector } from '../../../Components/ValueSelector';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { Select } from '../../../../components/Select';
 const PivotColumnRow = (props) => {
     const adaptable = useAdaptable();
     const aggValue = (props.layout.PivotAggregationColumns || []).find((x) => x.ColumnId === props.column.columnId)?.AggFunc;
@@ -21,31 +24,31 @@ const PivotColumnRow = (props) => {
         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 === 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);
@@ -62,16 +65,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);
             },
         };
@@ -83,18 +97,122 @@ const PivotColumnRow = (props) => {
             ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
             : 'Select Weight';
     }
-    return (React.createElement(Flex, { alignItems: "center" },
-        props.column.friendlyName,
-        aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-            React.createElement(Text, null, "Weight"),
-            ' ',
-            React.createElement(DropdownButton, { 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(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
+        React.createElement(Flex, { alignItems: "flex-start" },
+            React.createElement(Flex, { flex: "0 0 auto", alignItems: "center" },
+                React.createElement(Flex, { minWidth: 80 }, props.column.friendlyName),
+                aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
+                currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
+                    React.createElement(Text, null, "Weight"),
+                    ' ',
+                    React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName))),
+                aggValue && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
+                    React.createElement(Text, null, "Total Column"),
+                    ' ',
+                    React.createElement(DropdownButton, { columns: ['label'], items: totalOptions, ml: 2 }, currentTotal)))),
+            hasPivotSpecificTotals && (React.createElement(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(Flex, { key: pivotColId, alignItems: "center" },
+                    React.createElement(Text, { mr: 1 },
+                        adaptable.api.columnApi.getFriendlyNameForColumnId(pivotColId),
+                        ":"),
+                    React.createElement(DropdownButton, { columns: ['label'], items: pivotTotalOptions.map((opt) => ({
+                            label: opt.label,
+                            onClick: () => handleTotalChange(pivotColId, opt.value),
+                        })) }, currentValue)));
+            }))))));
 };
-const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
-export const isAggregationsSectionValid = (data) => {
-    const weightedAvg = data.TableAggregationColumns
-        ? (data.TableAggregationColumns || [])
+export const isPivotAggregationsSectionValid = (data) => {
+    const weightedAvg = data.PivotAggregationColumns
+        ? (data.PivotAggregationColumns || [])
             .map((agg) => agg.AggFunc)
             .find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
         : null;
@@ -126,7 +244,6 @@ export const PivotAggregationsSection = (props) => {
     const sortedAggregableColumns = React.useMemo(() => {
         return ArrayExtensions.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) => {
@@ -134,6 +251,7 @@ export 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({
@@ -141,10 +259,14 @@ export 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(() => {
@@ -174,12 +296,66 @@ export 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 = getAggFuncName(aggregationColumns[0].AggFunc);
+        if (layout.PivotAggregationColumns?.some((aggCol) => 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, { style: { height: '100%' } },
         React.createElement(Tabs.Tab, null, "Column Aggregations"),
         React.createElement(Tabs.Content, null,
             React.createElement(Flex, null,
                 React.createElement(FormLayout, null,
-                    React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function Text in Column Header"))),
+                    React.createElement(FormRow, { label: 'Omit Aggregation from Header' },
+                        React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
+                    React.createElement(FormRow, { label: 'Grand Total Row' },
+                        React.createElement(Select, { style: { width: 120 }, options: ['top', 'bottom'].map((position) => {
+                                return {
+                                    label: StringExtensions.CapitaliseFirstLetter(position),
+                                    value: position,
+                                };
+                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
+                                props.onChange({
+                                    ...layout,
+                                    GrandTotalRow: value,
+                                });
+                            }, isClearable: true })),
+                    React.createElement(FormRow, { label: 'Grand Total Column' },
+                        React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                                return {
+                                    label: StringExtensions.CapitaliseFirstLetter(position),
+                                    value: position,
+                                };
+                            }), placeholder: "Off", value: layout.GrandTotalColumn, onChange: (value) => {
+                                props.onChange({
+                                    ...layout,
+                                    GrandTotalColumn: value,
+                                });
+                            }, isClearable: true })),
+                    React.createElement(FormRow, { label: 'Pivot Group Total Column' }, isPivotGroupTotalColumnEnabled === true ? (React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                            return {
+                                label: StringExtensions.CapitaliseFirstLetter(position),
+                                value: position,
+                            };
+                        }), placeholder: "Off", value: layout.PivotGroupTotalColumn, onChange: (value) => {
+                            props.onChange({
+                                ...layout,
+                                PivotGroupTotalColumn: value,
+                            });
+                        }, isClearable: true })) : (React.createElement(Text, { marginLeft: 1, style: { fontStyle: 'italic' } }, isPivotGroupTotalColumnEnabled))))),
             React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: 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;
 }

package/src/agGrid/AdaptableAgGrid.js

@@ -3313,13 +3313,21 @@ You need to define at least one Layout!`);
         }
         return prevRowGroupedColumns.join(',') !== currentRowGroupedColumns.join(',');
     }
+    hasPivotTotalsInLayout(one, other) {
+        const prevAggregationColumns = one.PivotAggregationColumns || [];
+        const currentAggregationColumns = other.PivotAggregationColumns || [];
+        const prevHasPivotTotals = prevAggregationColumns.some((col) => !!col.TotalColumn);
+        const currentHasPivotTotals = currentAggregationColumns.some((col) => !!col.TotalColumn);
+        return prevHasPivotTotals || currentHasPivotTotals;
+    }
     onLayoutChange(layout) {
         this.logger.info('onLayoutChange()');
         const prevOnChangeLayout = this.__prevLayoutForOnChange || this.api.layoutApi.getCurrentLayout();
         // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
         const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevOnChangeLayout, layout);
+        const hasPivotTotalsInLayout = this.hasPivotTotalsInLayout(prevOnChangeLayout, layout);
         const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevOnChangeLayout.PivotColumns);
-        if (rowGroupsChanged || pivotColsChanged) {
+        if (rowGroupsChanged || pivotColsChanged || hasPivotTotalsInLayout) {
             this.updateColumnModelAndRefreshGrid();
         }
         else {

package/src/agGrid/AgGridAdapter.d.ts

@@ -63,6 +63,7 @@ export declare class AgGridAdapter {
     private isCalculatedColumn;
     private isFreeTextColumn;
     private isActionColumn;
+    private isPivotTotalColumn;
     private isColumnFilterable;
     private getColumnTypes;
     private getColumnPinnedPosition;