@adaptabletools/adaptable-cjs 20.2.11 → 20.3.0-canary.1

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -35,11 +35,7 @@ const WindowPopups = () => {
         let componentNode = null;
         if (!Component &&
             (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
-            componentNode = (React.createElement(ExternalRenderer_1.ExternalRenderer
-            // TODO AFL: add configurable width&height for custom popups
-            , { 
-                // TODO AFL: add configurable width&height for custom popups
-                style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
+            componentNode = (React.createElement(ExternalRenderer_1.ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
         }
         else {
             Component = Component ?? NoopComponent;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -102,6 +102,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGr
                     rowScope: {
                         ExcludeGroupRows: true,
                         ExcludeSummaryRows: true,
+                        ExcludeTotalRows: true,
                     },
                     actionColumnSettings: { suppressMenu: true, suppressMovable: true },
                     actionColumnButton,

package/src/View/Export/Wizard/ReportColumnsWizardSection.js

@@ -34,7 +34,7 @@ const renderReportColumnsSummary = (report) => {
 exports.renderReportColumnsSummary = renderReportColumnsSummary;
 const ReportColumnsWizardSection = (props) => {
     const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs, { m: 2, value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
                 const report = {
                     ...data,

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -24,6 +24,7 @@ const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstant
 const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
 const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
+const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -149,6 +150,18 @@ const getFormatDisplayTypeForScope = (scope, api) => {
         return 'text';
     }
     if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // if a Pivot Total Column Type is specified, we can safely assume that the data type is number
+        const pivotTotalTypes = [
+            AdaptableColumn_1.PIVOT_ANY_TOTAL_COLUMN_TYPE,
+            AdaptableColumn_1.PIVOT_GRAND_TOTAL_COLUMN_TYPE,
+            AdaptableColumn_1.PIVOT_COLUMN_TOTAL_COLUMN_TYPE,
+            AdaptableColumn_1.PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE,
+        ];
+        // if all column types are pivot total types, we can safely assume that the data type is number
+        if (scope.ColumnTypes.length > 0 &&
+            scope.ColumnTypes.every((type) => pivotTotalTypes.includes(type))) {
+            return 'number';
+        }
         // need to check if all column with this column type has the same data type and return that particular one
         const columns = scope.ColumnTypes.flatMap((columnType) => {
             return api.columnApi.getColumnsByColumnType(columnType);
@@ -302,7 +315,9 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                         React.createElement(FormLayout_1.FormRow, { label: "Floor" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "floor-checkbox", checked: data.DisplayFormat.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Round" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })))))),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Empty" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -6,6 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const constants_1 = require("./constants");
+const Tabs_1 = require("../../../components/Tabs");
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -16,29 +21,68 @@ const renderFormatColumnScopeSummary = (data) => {
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-            rowScope: 'Format all columns in the row',
-            columnScope: 'Select columns to format',
-        }, scope: data.Scope, updateScope: (Scope) => {
-            const newData = { ...data, Scope };
-            const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
-            if (newData.Rule?.Predicates?.length) {
-                if (wholeRow) {
-                    // if scope is whole row, a predicate cannot be present, so we set the rule
-                    // to be a boolean expression
-                    delete newData.Rule.Predicates;
-                    newData.Rule.BooleanExpression = '';
+    const currentTargets = data.Target?.length ? data.Target : ['cell'];
+    const handleTargetChange = (target, checked) => {
+        let newTargets;
+        if (checked) {
+            // Add the target if it's not already included
+            newTargets = [...new Set([...currentTargets, target])];
+        }
+        else {
+            // Remove the target
+            newTargets = currentTargets.filter((t) => t !== target);
+        }
+        // If all checkboxes are unchecked, default to ['cell']
+        if (newTargets.length === 0) {
+            newTargets = ['cell'];
+        }
+        // Update the formatColumn object
+        props.onChange({
+            ...data,
+            Target: newTargets,
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout_1.default, { width: "100%" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Target Column Elements: ", tooltip: "The visual elements where formatting will be applied" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "target-cell", checked: currentTargets.includes('cell'), onChange: (target) => {
+                                    handleTargetChange('cell', target);
+                                }, ml: 2 }, "Data Cells"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "target-column-header", checked: currentTargets.includes('columnHeader'), onChange: (target) => {
+                                    handleTargetChange('columnHeader', target);
+                                }, ml: 4 }, "Column Headers"))),
+                    React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'At least one target element must be selected (defaults to Data Cells).' +
+                        ' Conditional formatting rules only apply to Data Cells, not to Headers.')))),
+        React.createElement(rebass_1.Box, { "data-name": 'scope-heading', style: {
+                borderRadius: `var(--ab__border-radius)`,
+            }, padding: 2, backgroundColor: `var(--ab-color-primarylight)` }, "Scope"),
+        React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
+                rowScope: 'Format all columns in the row',
+                columnScope: 'Select columns to format',
+            }, scope: data.Scope, updateScope: (Scope) => {
+                const newData = { ...data, Scope };
+                const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
+                if (newData.Rule?.Predicates?.length) {
+                    if (wholeRow) {
+                        // if scope is whole row, a predicate cannot be present, so we set the rule
+                        // to be a boolean expression
+                        delete newData.Rule.Predicates;
+                        newData.Rule.BooleanExpression = '';
+                    }
+                    else {
+                        // if scope is not whole row, if you have a predicate, reset it
+                        newData.Rule.Predicates = [
+                            {
+                                PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                            },
+                        ];
+                    }
                 }
-                else {
-                    // if scope is not whole row, if you have a predicate, reset it
-                    newData.Rule.Predicates = [
-                        {
-                            PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
-                        },
-                    ];
-                }
-            }
-            props.onChange(newData);
-        } }));
+                props.onChange(newData);
+            } })));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -11,6 +11,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
 const Toggle_1 = require("../../../components/Toggle/Toggle");
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(rebass_1.Box, { padding: 2 },
         React.createElement(rebass_1.Text, null,
@@ -25,7 +26,16 @@ const renderFormatColumnSettingsSummary = (data) => {
             React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
         React.createElement(rebass_1.Text, { mt: 3 },
             "Summary Rows ",
-            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes'))));
+            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Total Rows ",
+            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Apply on Column Groups:",
+            ' ',
+            React.createElement(Tag_1.Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+                ? 'Always'
+                : data.ColumnGroupScope))));
 };
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
@@ -64,6 +74,15 @@ const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
+    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                ExcludeTotalRows,
+            },
+        });
+    };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
         React.createElement(Tabs_1.Tabs.Content, null,
@@ -88,6 +107,19 @@ const FormatColumnSettingsWizardSection = (props) => {
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
+                        React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                props.onChange({
+                                    ...data,
+                                    ColumnGroupScope: columnGroupScope,
+                                });
+                            } },
+                            React.createElement(Radio_1.default, { marginLeft: 1, value: "Both" }, "Always"),
+                            React.createElement(Radio_1.default, { marginLeft: 4, value: "Expanded" }, "Expanded"),
+                            React.createElement(Radio_1.default, { marginLeft: 4, value: "Collapsed" }, "Collapsed"))))))));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -92,7 +92,7 @@ function FormatColumnWizard(props) {
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Scope',
+                title: 'Scope & Target',
                 details: 'Select which Columns will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,

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

@@ -360,7 +360,8 @@ const ColumnsSection = (props) => {
     };
     const visibleIds = layout.TableColumns.filter((colId) => {
         return (layout.ColumnVisibility?.[colId] !== false &&
-            adaptable.api.columnApi.isSelectionColumn(colId) === false);
+            adaptable.api.columnApi.isSelectionColumn(colId) === false &&
+            !adaptable.api.columnApi.internalApi.isAlwaysHiddenColumn(colId));
     });
     const toLabel = (colId) => adaptable.api.columnApi.getFriendlyNameForColumnId(colId, layout);
     const toIdentifier = (colId) => colId;

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -20,6 +20,7 @@ const Badge_1 = require("../../Components/Badge");
 const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Accordion_1 = require("../../../components/Accordion");
+const CheckBox_1 = require("../../../components/CheckBox");
 const BadgeEditor = (props) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const { badge, columnId, onChange } = props;
@@ -29,9 +30,7 @@ const BadgeEditor = (props) => {
     const previewValue = dataType === 'number' || dataType == 'numberArray'
         ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
         : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-    return (React.createElement(
-        rebass_1.Flex,
-        { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
+    return (React.createElement(rebass_1.Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
         React.createElement(rebass_1.Box, { flex: 1 },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Preview" },
@@ -46,22 +45,17 @@ const BadgeEditor = (props) => {
                                     Style,
                                 });
                             } }))),
-                !api.columnApi.hasArrayDataType(columnId) && ( // dont show predicates for arrays
-                (React.createElement(
-                    FormLayout_1.FormRow,
-                    { label: 'Predicate' },
-                    columnId ? (React.createElement(React.Fragment, null,
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
-                        React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
-                                onChange({
-                                    ...badge,
-                                    Predicate: predicate,
-                                });
-                            }, onClear: () => onChange({
+                React.createElement(FormLayout_1.FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
+                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
+                    React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
+                            onChange({
                                 ...badge,
-                                Predicate: undefined,
-                            }) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))
-                ))),
+                                Predicate: predicate,
+                            });
+                        }, onClear: () => onChange({
+                            ...badge,
+                            Predicate: undefined,
+                        }) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))),
                 React.createElement(FormLayout_1.FormRow, { label: "Icon" },
                     React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                     ' ',
@@ -92,10 +86,13 @@ const BadgeEditor = (props) => {
                                 label: 'End',
                                 onClick: () => onChange({ ...badge, IconPosition: 'End' }),
                             },
-                        ] }, badge.IconPosition ?? 'Start'))))),
+                        ] }, badge.IconPosition ?? 'Start'))),
+                badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Show Icon Only" },
+                    React.createElement(CheckBox_1.CheckBox, { checked: badge.IconOnly, 
+                        // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
+                        onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
         React.createElement(rebass_1.Box, { justifyContent: "end" },
-            React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))
-    ));
+            React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))));
 };
 const renderBadgeSummary = (styledColumn) => {
     return React.createElement(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -104,7 +104,7 @@ const StyledColumnWizard = (props) => {
                 if (styledColumn.BadgeStyle.Badges?.length === 0) {
                     return 'Define at least one Badge';
                 }
-                const badgesWithNoRules = styledColumn.BadgeStyle.Badges.filter((b) => b.Expression == undefined || b.Predicate == undefined);
+                const badgesWithNoRules = styledColumn.BadgeStyle.Badges.filter((b) => b.Expression == undefined && b.Predicate == undefined);
                 if (badgesWithNoRules.length > 1) {
                     return 'Only one Badge can have no Rule';
                 }

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.js

@@ -21,7 +21,10 @@ const renderStyledColumnWizardSettingsSummary = (data) => {
             React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
         React.createElement(rebass_1.Text, { mt: 3 },
             "Summary Rows ",
-            React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes'))));
+            React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Total Rows ",
+            React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
 };
 exports.renderStyledColumnWizardSettingsSummary = renderStyledColumnWizardSettingsSummary;
 const StyledColumnWizardSettingsSection = (props) => {
@@ -62,6 +65,18 @@ const StyledColumnWizardSettingsSection = (props) => {
             },
         });
     };
+    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...data.BadgeStyle,
+                RowScope: {
+                    ...data.BadgeStyle.RowScope,
+                    ExcludeTotalRows,
+                },
+            },
+        });
+    };
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
         React.createElement(Tabs_1.Tabs.Content, null,
@@ -82,6 +97,11 @@ const StyledColumnWizardSettingsSection = (props) => {
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: 
                                 // @ts-ignore
                                 data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
-                    ' ')))));
+                    ' ',
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: 
+                                // @ts-ignore
+                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))))));
 };
 exports.StyledColumnWizardSettingsSection = StyledColumnWizardSettingsSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -4,7 +4,6 @@ exports.StyledColumnBadgePreview = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const Tag_1 = require("../../../../../components/Tag");
 const GeneralConstants_1 = require("../../../../../Utilities/Constants/GeneralConstants");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const Badge_1 = require("../../../../Components/Badge");
@@ -14,20 +13,14 @@ const StyledColumnBadgePreview = ({ data }) => {
     if (!badgeStyle || badgeStyle.Badges.length === 0) {
         return React.createElement("div", null, "No Badges Defined");
     }
-    const value = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
-        ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
-        : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
     return (React.createElement(rebass_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
-        let ruleString = 'No Rule';
-        if (badge.Predicate) {
-            ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
-        }
-        if (badge.Expression) {
-            ruleString = badge.Expression.BooleanExpression;
-        }
+        const badgeValue = badge.IconOnly
+            ? ''
+            : adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
+                ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
+                : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
         return (React.createElement(rebass_1.Box, { mb: 1, key: index },
-            React.createElement(Badge_1.Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, value),
-            React.createElement(Tag_1.Tag, { ml: 2 }, ruleString)));
+            React.createElement(Badge_1.Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
     })));
 };
 exports.StyledColumnBadgePreview = StyledColumnBadgePreview;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgeSettings.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../../types';
+export declare const StyledColumnBadgeSettings: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgeSettings.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnBadgeSettings = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tag_1 = require("../../../../../components/Tag");
+const AdaptableContext_1 = require("../../../../AdaptableContext");
+const StyledColumnBadgeSettings = ({ data }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const badgeStyle = data.BadgeStyle;
+    if (!badgeStyle || badgeStyle.Badges.length === 0) {
+        return React.createElement("div", null, "No Badges Defined");
+    }
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
+        let ruleString = 'No Rule';
+        if (badge.Predicate) {
+            ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
+        }
+        if (badge.Expression) {
+            ruleString = badge.Expression.BooleanExpression;
+        }
+        const iconOnly = badge.Icon && badge.IconOnly;
+        const hasIconPosition = badge.Icon && badge.IconPosition;
+        const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
+        return (React.createElement(rebass_1.Box, { mt: 2, mb: 2, key: index },
+            React.createElement(Tag_1.Tag, null, ruleString),
+            iconOnly && React.createElement(Tag_1.Tag, { ml: 2 }, 'Icon Only'),
+            ' ',
+            hasIconPosition && React.createElement(Tag_1.Tag, { ml: 2 }, iconPosition),
+            ' '));
+    })));
+};
+exports.StyledColumnBadgeSettings = StyledColumnBadgeSettings;

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -223,6 +223,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getFirstRowNode(): IRowNode | undefined;
     updateRowGroupsAndColumnGroupsExpandedState(layout?: Layout): void;
     isGroupRowNode(rowNode: IRowNode): boolean;
+    isGrandTotalRowNode(rowNode: IRowNode): boolean;
     getFilteredData(): any[];
     /**
      * This method internally differentiates between server-side and client-side row model

package/src/agGrid/AdaptableAgGrid.js

@@ -1094,6 +1094,7 @@ You need to define at least one Layout!`);
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'columnTypes', (original_columnTypes) => {
             const providedColumnTypes = original_columnTypes || {};
             const adaptableSpecialColumnTypes = {
+                [AdaptableColumn_1.HIDDEN_COLUMN_TYPE]: AdaptableColumn_1.hiddenColDefConfig,
                 [AdaptableColumn_1.CALCULATED_COLUMN_TYPE]: {},
                 [AdaptableColumn_1.FREE_TEXT_COLUMN_TYPE]: {},
                 [AdaptableColumn_1.ACTION_COLUMN_TYPE]: {},
@@ -2031,6 +2032,12 @@ You need to define at least one Layout!`);
         }
         return false;
     }
+    isGrandTotalRowNode(rowNode) {
+        if (!rowNode) {
+            return false;
+        }
+        return rowNode.id === GeneralConstants_1.AG_GRID_GRAND_TOTAL_ROW_ID;
+    }
     getFilteredData() {
         const data = [];
         this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter((rowNode) => {
@@ -2412,6 +2419,7 @@ You need to define at least one Layout!`);
         }
     }
     getUniqueGridCells(column, gridCells) {
+        let gridCellsToUse = gridCells;
         const cache = new Map();
         const lowercase = this.api.predicateApi.useCaseSensitivity();
         const getter = (dataItem) => {
@@ -2425,13 +2433,32 @@ You need to define at least one Layout!`);
             return value;
         };
         const self = this;
+        // handle the special case where GridCells have arrays as values
+        // in this case we want to treat each value in the array as a separate value
+        if (this.api.columnApi.internalApi.hasArrayDataType(column)) {
+            gridCellsToUse = gridCellsToUse.flatMap((gridCell) => {
+                const rawValueArray = gridCell.rawValue;
+                if (Array.isArray(rawValueArray)) {
+                    return rawValueArray.map((rawValue) => ({
+                        ...gridCell,
+                        // for now just map the rawValue
+                        // extracting displayValue and normalisedValue is possible
+                        // but it could have a significant performance impact
+                        rawValue: rawValue,
+                        displayValue: rawValue,
+                        normalisedValue: rawValue,
+                    }));
+                }
+                return [gridCell];
+            });
+        }
         // those are grid cells unique per primary key - so cells corresponding to this column
         // by for every row in the grid
         // but here we want to collapse them down to values/cells unique by the
         // value of this column: eg - if this is country column and we have multiple rownodes
         // in the grid with country: UK, and multiple with country: France, then the end result
         // of the current function should be 2 cells: one for UK and one for France
-        gridCells.forEach((dataItem) => {
+        gridCellsToUse.forEach((dataItem) => {
             const value = getter(dataItem);
             if (!cache.has(value)) {
                 cache.set(value, {

package/src/agGrid/AgGridAdapter.js

@@ -463,12 +463,8 @@ class AgGridAdapter {
             ? 'number'
             : this.deriveAdaptableColumnDataType(agGridColumn, false);
         const isTreeColumn = this.isTreeColumn(isGeneratedRowGroupColumn);
-        const visible = agGridColumn.isVisible();
-        const alwaysHidden = !visible &&
-            !isTreeColumn &&
-            colDef.lockVisible === true &&
-            colDef.suppressColumnsToolPanel === true &&
-            colDef.suppressFiltersToolPanel === true;
+        const alwaysHidden = this.adaptableApi.columnApi.internalApi.isAlwaysHiddenColumn(colDef);
+        const visible = !alwaysHidden || agGridColumn.isVisible();
         const isGenerated = isGeneratedRowGroupColumn || isGeneratedPivotResultColumn || isGeneratedSelectionColumn;
         const abColumn = {
             Uuid: (0, Uuid_1.createUuid)(),

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -19,7 +19,9 @@ export declare class AgGridColumnAdapter {
     setupColumns(): void;
     private setupColumnValueGetter;
     private setupColumnCellClass;
+    private setupColumnHeaderClass;
     private setupColumnCellStyle;
+    private setupColumnHeaderStyle;
     private setupColumnCellEditor;
     private setupColumnCellRenderer;
     private setupColumnTooltipValueGetter;
@@ -55,9 +57,10 @@ export declare class AgGridColumnAdapter {
     private getEditedCellStyle;
     /**
      * The combination of styled column and format cells
-     * This functiond decides when the two can be merged.
+     * This function decides when the two can be merged.
      */
     private getFormatColumnAndStyledColumnCellStyle;
+    private getFormatColumnHeaderStyle;
     private getStyledColumnStyle;
     private getFormatColumnCellStyle;
     private getFormatColumnAdaptableStyle;