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

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

@@ -190,7 +190,7 @@ 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(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Omit Aggregation Function from Header"))),
             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/components/Select/Select.js

@@ -28,8 +28,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,
@@ -74,8 +76,15 @@ const doesOptionMatchValue = function (value) {
     };
 };
 export 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) {
@@ -416,7 +425,10 @@ export 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

@@ -1,5 +1,5 @@
 export 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: 1745430358199 || Date.now(),
-    VERSION: "20.0.7-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1745834803008 || 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

@@ -6,7 +6,9 @@ import { isLayoutEqual } from './isLayoutEqual';
 import { simplifyLayoutModel, simplifyPivotLayoutModel, simplifyTableLayoutModel, } from './simplifyLayoutModel';
 import { sortColumnIdsByOrder } from './sortColumnIdsByOrder';
 import { destructurePivotColumnId } from './destructurePivotColumnId';
-import { isPivotTotalColumn } from './isPivotTotalColumn';
+import { isPivotAggTotalColumn } from './isPivotAggTotalColumn';
+import { isPivotGrandTotalColumn } from './isPivotGrandTotalColumn';
+import { isPivotGroupTotalColumn } from './isPivotGroupTotalColumn';
 function flattenColDefs(colDefs) {
     const res = [];
     const iteration = (c) => {
@@ -1108,8 +1110,28 @@ export class LayoutManager extends 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 (!isPivotLayoutModel(this.currentLayout)) {
+                return;
+            }
+            if (isPivotGrandTotalColumn(colDef)) {
+                this.patchColDefType(colDef, ['pivotTotalColumn', 'pivotGrandTotalColumn']);
+            }
+            if (isPivotGroupTotalColumn(colDef.colId)) {
+                this.patchColDefType(colDef, ['pivotTotalColumn', 'pivotGroupTotalColumn']);
+            }
+        });
         const _original_processPivotResultColGroupDef = this.gridApi.getGridOption('processPivotResultColGroupDef');
         this.gridApi.setGridOption('processPivotResultColGroupDef', (colGroupDef) => {
             _original_processPivotResultColGroupDef?.(colGroupDef);
@@ -1119,9 +1141,6 @@ export class LayoutManager extends LMEmitter {
             this.patchPivotTotalColumn(colGroupDef);
         });
     }
-    isPivotRowTotalColDef(colDef) {
-        return colDef.colId?.startsWith('PivotRowTotal_');
-    }
     patchPivotTotalColumn(colGroupDef) {
         const hasPivotTotalCols = (pivotLayout) => {
             return pivotLayout.PivotAggregationColumns?.some((aggCol) => !!aggCol.TotalColumn);
@@ -1135,7 +1154,7 @@ export class LayoutManager extends LMEmitter {
         const pivotTotalColDefsAfter = [];
         const normalColDefs = [];
         colGroupDef.children.forEach((colDef) => {
-            if (this.isPivotRowTotalColDef(colDef)) {
+            if (isPivotGrandTotalColumn(colDef)) {
                 if (this.gridApi.getGridOption('pivotRowTotals') === 'after') {
                     pivotRowTotalColDefsAfter.push(colDef);
                 }
@@ -1144,11 +1163,12 @@ export class LayoutManager extends LMEmitter {
                 }
                 return;
             }
-            if (isPivotTotalColumn(colDef)) {
+            if (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);

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

@@ -0,0 +1,2 @@
+import { ColDef } from 'ag-grid-enterprise';
+export declare function isPivotAggTotalColumn(colDef: ColDef): colDef is ColDef;

package/src/layout-manager/src/{isPivotTotalColumn.js → isPivotAggTotalColumn.js}

@@ -1,3 +1,3 @@
-export function isPivotTotalColumn(colDef) {
+export function isPivotAggTotalColumn(colDef) {
     return !!colDef.pivotTotalColumnIds?.length;
 }

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

@@ -0,0 +1,2 @@
+import { ColDef, ColGroupDef } from 'ag-grid-enterprise';
+export declare function isPivotGrandTotalColumn(colDef: ColDef | ColGroupDef): boolean;

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

@@ -0,0 +1,3 @@
+export function isPivotGrandTotalColumn(colDef) {
+    return colDef?.colId?.startsWith('PivotRowTotal_pivot_');
+}