@adaptabletools/adaptable 20.2.11 → 20.3.0-canary.1

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

@@ -20,6 +20,7 @@ import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../
 import Textarea from '../../../components/Textarea';
 import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
 import { FormatColumnPlaceholderDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
+import { PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../../../AdaptableState/Common/AdaptableColumn';
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -143,6 +144,18 @@ export 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 = [
+            PIVOT_ANY_TOTAL_COLUMN_TYPE,
+            PIVOT_GRAND_TOTAL_COLUMN_TYPE,
+            PIVOT_COLUMN_TOTAL_COLUMN_TYPE,
+            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);
@@ -295,7 +308,9 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                         React.createElement(FormRow, { label: "Floor" },
                             React.createElement(CheckBox, { "data-name": "floor-checkbox", checked: data.DisplayFormat.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
                         React.createElement(FormRow, { label: "Round" },
-                            React.createElement(CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })))))),
+                            React.createElement(CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
+                        React.createElement(FormRow, { label: "Empty" },
+                            React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs.Content, null,

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

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
+import { Tabs } from '../../../components/Tabs';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import HelpBlock from '../../../components/HelpBlock';
 export const renderFormatColumnScopeSummary = (data) => {
     return renderScopeSummary(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -11,28 +16,67 @@ export const renderFormatColumnScopeSummary = (data) => {
 };
 export const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(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, { mb: 3 },
+            React.createElement(Tabs.Tab, null, "Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout, { width: "100%" },
+                        React.createElement(FormRow, { label: "Target Column Elements: ", tooltip: "The visual elements where formatting will be applied" },
+                            React.createElement(CheckBox, { "data-name": "target-cell", checked: currentTargets.includes('cell'), onChange: (target) => {
+                                    handleTargetChange('cell', target);
+                                }, ml: 2 }, "Data Cells"),
+                            React.createElement(CheckBox, { "data-name": "target-column-header", checked: currentTargets.includes('columnHeader'), onChange: (target) => {
+                                    handleTargetChange('columnHeader', target);
+                                }, ml: 4 }, "Column Headers"))),
+                    React.createElement(HelpBlock, { 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(Box, { "data-name": 'scope-heading', style: {
+                borderRadius: `var(--ab__border-radius)`,
+            }, padding: 2, backgroundColor: `var(--ab-color-primarylight)` }, "Scope"),
+        React.createElement(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: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                            },
+                        ];
+                    }
                 }
-                else {
-                    // if scope is not whole row, if you have a predicate, reset it
-                    newData.Rule.Predicates = [
-                        {
-                            PredicateId: DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
-                        },
-                    ];
-                }
-            }
-            props.onChange(newData);
-        } }));
+                props.onChange(newData);
+            } })));
 };

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

@@ -7,6 +7,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Tag } from '../../../components/Tag';
 import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
 import { Toggle } from '../../../components/Toggle/Toggle';
+import Radio, { RadioGroup } from '../../../components/Radio';
 export const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Box, { padding: 2 },
         React.createElement(Text, null,
@@ -21,7 +22,16 @@ export const renderFormatColumnSettingsSummary = (data) => {
             React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
         React.createElement(Text, { mt: 3 },
             "Summary Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes'))));
+            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(Text, { mt: 3 },
+            "Total Rows ",
+            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
+        React.createElement(Text, { mt: 3 },
+            "Apply on Column Groups:",
+            ' ',
+            React.createElement(Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
+                ? 'Always'
+                : data.ColumnGroupScope))));
 };
 export const FormatColumnSettingsWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
@@ -59,6 +69,15 @@ export const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
+    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                ExcludeTotalRows,
+            },
+        });
+    };
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Settings"),
         React.createElement(Tabs.Content, null,
@@ -83,5 +102,18 @@ export const FormatColumnSettingsWizardSection = (props) => {
                             React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
                     React.createElement(FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                    React.createElement(FormRow, { label: "Exclude Total Rows:" },
+                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))),
+                    React.createElement(FormRow, { label: "Apply on Column Group:" },
+                        React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
+                                props.onChange({
+                                    ...data,
+                                    ColumnGroupScope: columnGroupScope,
+                                });
+                            } },
+                            React.createElement(Radio, { marginLeft: 1, value: "Both" }, "Always"),
+                            React.createElement(Radio, { marginLeft: 4, value: "Expanded" }, "Expanded"),
+                            React.createElement(Radio, { marginLeft: 4, value: "Collapsed" }, "Collapsed"))))))));
 };

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

@@ -88,7 +88,7 @@ export function FormatColumnWizard(props) {
     };
     return (React.createElement(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: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,

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

@@ -355,7 +355,8 @@ export 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

@@ -16,6 +16,7 @@ import { Badge } from '../../Components/Badge';
 import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
 import { Accordion } from '../../../components/Accordion';
+import { CheckBox } from '../../../components/CheckBox';
 const BadgeEditor = (props) => {
     const { api } = useOnePageAdaptableWizardContext();
     const { badge, columnId, onChange } = props;
@@ -25,9 +26,7 @@ const BadgeEditor = (props) => {
     const previewValue = dataType === 'number' || dataType == 'numberArray'
         ? DEFAULT_INTEGER_DISPLAY_VALUE
         : DEFAULT_STRING_DISPLAY_VALUE;
-    return (React.createElement(
-        Flex,
-        { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
+    return (React.createElement(Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
         React.createElement(Box, { flex: 1 },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Preview" },
@@ -42,22 +41,17 @@ const BadgeEditor = (props) => {
                                     Style,
                                 });
                             } }))),
-                !api.columnApi.hasArrayDataType(columnId) && ( // dont show predicates for arrays
-                (React.createElement(
-                    FormRow,
-                    { label: 'Predicate' },
-                    columnId ? (React.createElement(React.Fragment, null,
-                        React.createElement(HelpBlock, { 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, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
-                                onChange({
-                                    ...badge,
-                                    Predicate: predicate,
-                                });
-                            }, onClear: () => onChange({
+                React.createElement(FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
+                    React.createElement(HelpBlock, { 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, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
+                            onChange({
                                 ...badge,
-                                Predicate: undefined,
-                            }) }))) : (React.createElement(ErrorBox, null, "Select a column first"))
-                ))),
+                                Predicate: predicate,
+                            });
+                        }, onClear: () => onChange({
+                            ...badge,
+                            Predicate: undefined,
+                        }) }))) : (React.createElement(ErrorBox, null, "Select a column first"))),
                 React.createElement(FormRow, { label: "Icon" },
                     React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                     ' ',
@@ -88,10 +82,13 @@ const BadgeEditor = (props) => {
                                 label: 'End',
                                 onClick: () => onChange({ ...badge, IconPosition: 'End' }),
                             },
-                        ] }, badge.IconPosition ?? 'Start'))))),
+                        ] }, badge.IconPosition ?? 'Start'))),
+                badge.Icon && (React.createElement(FormRow, { label: "Show Icon Only" },
+                    React.createElement(CheckBox, { checked: badge.IconOnly, 
+                        // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
+                        onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
         React.createElement(Box, { justifyContent: "end" },
-            React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))
-    ));
+            React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))));
 };
 export const renderBadgeSummary = (styledColumn) => {
     return React.createElement(StyledColumnBadgePreview, { data: styledColumn });

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

@@ -100,7 +100,7 @@ export 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

@@ -17,7 +17,10 @@ export const renderStyledColumnWizardSettingsSummary = (data) => {
             React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
         React.createElement(Text, { mt: 3 },
             "Summary Rows ",
-            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes'))));
+            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(Text, { mt: 3 },
+            "Total Rows ",
+            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
 };
 export const StyledColumnWizardSettingsSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
@@ -57,6 +60,18 @@ export const StyledColumnWizardSettingsSection = (props) => {
             },
         });
     };
+    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...data.BadgeStyle,
+                RowScope: {
+                    ...data.BadgeStyle.RowScope,
+                    ExcludeTotalRows,
+                },
+            },
+        });
+    };
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Settings"),
         React.createElement(Tabs.Content, null,
@@ -77,5 +92,10 @@ export const StyledColumnWizardSettingsSection = (props) => {
                             React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: 
                                 // @ts-ignore
                                 data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
-                    ' ')))));
+                    ' ',
+                    React.createElement(FormRow, { label: "Exclude Total Rows:" },
+                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: 
+                                // @ts-ignore
+                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))))));
 };

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Box, Flex } from 'rebass';
-import { Tag } from '../../../../../components/Tag';
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
@@ -10,19 +9,13 @@ export 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'
-        ? DEFAULT_INTEGER_DISPLAY_VALUE
-        : DEFAULT_STRING_DISPLAY_VALUE;
     return (React.createElement(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'
+                ? DEFAULT_INTEGER_DISPLAY_VALUE
+                : DEFAULT_STRING_DISPLAY_VALUE;
         return (React.createElement(Box, { mb: 1, key: index },
-            React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, value),
-            React.createElement(Tag, { ml: 2 }, ruleString)));
+            React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
     })));
 };

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,29 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { Tag } from '../../../../../components/Tag';
+import { useAdaptable } from '../../../../AdaptableContext';
+export const StyledColumnBadgeSettings = ({ data }) => {
+    const adaptable = useAdaptable();
+    const badgeStyle = data.BadgeStyle;
+    if (!badgeStyle || badgeStyle.Badges.length === 0) {
+        return React.createElement("div", null, "No Badges Defined");
+    }
+    return (React.createElement(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(Box, { mt: 2, mb: 2, key: index },
+            React.createElement(Tag, null, ruleString),
+            iconOnly && React.createElement(Tag, { ml: 2 }, 'Icon Only'),
+            ' ',
+            hasIconPosition && React.createElement(Tag, { ml: 2 }, iconPosition),
+            ' '));
+    })));
+};

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

@@ -8,7 +8,7 @@ import Emitter from '../Utilities/Emitter';
 import { applyDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
 import { AgGridAdapter } from './AgGridAdapter';
 import * as GeneralConstants from '../Utilities/Constants/GeneralConstants';
-import { AUTOGENERATED_PK_COLUMN, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
+import { AG_GRID_GRAND_TOTAL_ROW_ID, AUTOGENERATED_PK_COLUMN, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
@@ -93,7 +93,7 @@ import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { checkForDuplicateColumns, getLayoutRowGroupValuesExceptionGroupKeys, isPivotLayout, layoutModelToLayoutState, layoutStateToLayoutModel, normalizeLayout, } from '../Api/Implementation/LayoutHelpers';
 import { LayoutManager } from '../layout-manager/src';
 import { isPivotLayoutModel } from '../layout-manager/src/isPivotLayoutModel';
-import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
+import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, HIDDEN_COLUMN_TYPE, hiddenColDefConfig, PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import { agGridDataTypeDefinitions } from './agGridDataTypeDefinitions';
 import { AgGridThemeAdapter } from './AgGridThemeAdapter';
 import { mapOldTypeToDataType } from '../migration/VersionUpgrade20';
@@ -1090,6 +1090,7 @@ You need to define at least one Layout!`);
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'columnTypes', (original_columnTypes) => {
             const providedColumnTypes = original_columnTypes || {};
             const adaptableSpecialColumnTypes = {
+                [HIDDEN_COLUMN_TYPE]: hiddenColDefConfig,
                 [CALCULATED_COLUMN_TYPE]: {},
                 [FREE_TEXT_COLUMN_TYPE]: {},
                 [ACTION_COLUMN_TYPE]: {},
@@ -2027,6 +2028,12 @@ You need to define at least one Layout!`);
         }
         return false;
     }
+    isGrandTotalRowNode(rowNode) {
+        if (!rowNode) {
+            return false;
+        }
+        return rowNode.id === AG_GRID_GRAND_TOTAL_ROW_ID;
+    }
     getFilteredData() {
         const data = [];
         this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter((rowNode) => {
@@ -2408,6 +2415,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) => {
@@ -2421,13 +2429,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

@@ -459,12 +459,8 @@ export 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: 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;