@adaptabletools/adaptable 23.0.0-canary.5 → 23.0.0-canary.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.0-canary.5",
+  "version": "23.0.0-canary.7",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableOptions/DataSetOptions.d.ts

@@ -1,5 +1,6 @@
 import { AdaptableForm, AdaptableObject } from '../../types';
 import { FormContext } from '../AdaptableState/Common/FormContext';
+import { DataSetSelectedInfo } from '../Api/Events/DataSetSelected';
 /**
  * Options to provide Data Sets
  */
@@ -9,12 +10,12 @@ export interface DataSetOptions<TData = any> {
      *
      * @defaultValue []
      */
-    dataSets?: DataSet[];
+    dataSets?: DataSet<TData>[];
 }
 /**
  * Defines a Data Set object that can provide data to AdapTable
  */
-export interface DataSet extends AdaptableObject {
+export interface DataSet<TData = any> extends AdaptableObject {
     /**
      * Name of Data Set
      */
@@ -31,6 +32,29 @@ export interface DataSet extends AdaptableObject {
      * Additional info for Data Set
      */
     info?: Record<string, string | number | boolean | Date>;
+    /**
+     * Invoked when this Data Set is selected and it does not define a `form`.
+     *
+     * Use for custom loading logic (e.g. server requests). The `DataSetSelected`
+     * event is still fired for backward compatibility.
+     *
+     * @defaultValue undefined
+     */
+    onSelect?: (info: DataSetSelectedInfo) => void | Promise<void>;
+    /**
+     * Optional shortcut that loads row data into the Grid when this Data Set is
+     * selected (only when no `form` is defined). Runs before `onSelect`.
+     *
+     * @defaultValue undefined
+     */
+    loadData?: (info: DataSetSelectedInfo) => TData[] | Promise<TData[]>;
+    /**
+     * Invoked when the user submits the Data Set form (Enter key or form button).
+     * When no form `buttons` are defined, an OK button is added automatically.
+     *
+     * @defaultValue undefined
+     */
+    onFormSubmit?: (context: DataSetFormContext) => void | Promise<void>;
 }
 /**
  * Used when a DataSet displays a Form

package/src/AdaptableOptions/DefaultAdaptableOptions.js

@@ -268,7 +268,6 @@ const DefaultAdaptableOptions = {
         popupType: 'modal',
         title: ModuleConstants.SettingsPanelFriendlyName,
         icon: 'ConfigurationIcon',
-        navigation: {},
         alwaysShowInDashboard: false,
         alwaysShowInToolPanel: false,
         showModuleIcons: true,

package/src/AdaptableOptions/SettingsPanelOptions.d.ts

@@ -1,5 +1,6 @@
 import { AdaptableFrameworkComponent, AdaptableIcon } from '../../types';
 import { AdaptableSettingsPanel } from '../AdaptableState/Common/Types';
+import { BaseContext } from '../AdaptableState/Common/BaseContext';
 import { CustomRenderContext } from '../agGrid/AdaptableFrameworkComponent';
 /**
  * Options for managing the AdapTable Settings Panel
@@ -34,13 +35,15 @@ export interface SettingsPanelOptions {
      */
     alwaysShowInToolPanel?: boolean;
     /**
-     * Ordered items to display at side of Settings Panel
+     * Configure grouped navigation for the Settings Panel.
      *
-     * @defaultValue all available AdapTable modules
+     * Receives the default grouped navigation and AdapTable context; return an amended copy.
+     * Groups with no visible modules (e.g. due to entitlements) are omitted automatically.
+     * Group headings are omitted when every module in the group is hidden.
+     *
+     * @defaultValue all available AdapTable modules in the default grouped order
      */
-    navigation?: {
-        items?: (AdaptableSettingsPanel | string | '-')[];
-    };
+    navigation?: SettingsPanelNavigationConfigurer;
     /**
      * Initial position of Settings Panel window
      *
@@ -70,18 +73,47 @@ export interface SettingsPanelOptions {
      */
     customSettingsPanels?: CustomSettingsPanel[];
     /**
-   * Which Tabs can be used to display Grid Info: 'Grid Options', 'Grid Summary' or 'Grid State'
-   *
-   * @defaultValue ['Grid Options', 'Grid Summary', 'Grid State']
-   */
+     * Which Tabs can be used to display Grid Info: 'Grid Options', 'Grid Summary' or 'Grid State'
+     *
+     * @defaultValue ['Grid Options', 'Grid Summary', 'Grid State']
+     */
     gridInfoTabs?: GridInfoTabs;
 }
+/**
+ * A labelled group of Settings Panel navigation entries.
+ */
+export interface SettingsPanelNavigationGroup {
+    /**
+     * Section heading shown above the group. Use an empty string to show items without a heading.
+     */
+    label: string;
+    /**
+     * Module names or custom panel names in display order.
+     */
+    items: (AdaptableSettingsPanel | string)[];
+}
+/**
+ * Grouped Settings Panel navigation structure.
+ */
+export interface SettingsPanelNavigation {
+    groups: SettingsPanelNavigationGroup[];
+}
+/**
+ * Context passed to `SettingsPanelOptions.navigation`.
+ */
+export interface SettingsPanelNavigationContext extends BaseContext {
+}
+/**
+ * Function used to customise Settings Panel navigation.
+ */
+export type SettingsPanelNavigationConfigurer = (context: SettingsPanelNavigationContext, defaultNavigation: SettingsPanelNavigation) => SettingsPanelNavigation;
 /**
  * Definition of a Custom Panel to add to the Adaptable Settings Panel
  */
 export interface CustomSettingsPanel {
     /**
-     * Appears in Settings Panel Navigation and must be included in settingsPanelOptions.navigation for it to be displayed (by default added to the end)
+     * Appears in Settings Panel Navigation. Include in `navigation` to choose placement
+     * (by default added to a `Custom Panels` group at the end).
      */
     name: string;
     /**

package/src/AdaptableState/Common/AdaptableFormat.d.ts

@@ -50,6 +50,13 @@ export interface NumberFormatterOptions extends BaseFormatterOptions {
      * Multiplier to use on cell value
      */
     Multiplier?: number;
+    /**
+     * When the numeric value is zero (after multiplier and rounding):
+     * - omitted / undefined, or `'0'` — use normal formatting (e.g. `0`, `0.00`)
+     * - `''` — show a blank cell (user cleared the default `0` in the wizard)
+     * - any other string — show that text (e.g. `-`, `—`)
+     */
+    ZeroDisplay?: string;
     /**
      * Shows negative numbers in parentheses
      */

package/src/AdaptableState/Common/AdaptableMessageType.d.ts

@@ -15,6 +15,6 @@ export type AdaptableMessageType =
  */
  | 'Warning'
 /**
- * Error Message - displays '-ab-color-error' variable (defaults to red)
+ * Error Message - displays '-ab-color-destructive' variable (defaults to red)
  */
  | 'Error';

package/src/AdaptableState/Common/Enums.d.ts

@@ -31,7 +31,7 @@ export declare enum FontSize {
     XLarge = "XLarge"
 }
 export declare enum StatusColour {
-    Error = "var(--ab-color-error)",
+    Error = "var(--ab-color-destructive)",
     Warn = "var(--ab-color-warn)",
     Success = "var(--ab-color-success)",
     Info = "var(--ab-color-info)"

package/src/AdaptableState/Common/Enums.js

@@ -42,7 +42,7 @@ export var FontSize;
 })(FontSize || (FontSize = {}));
 export var StatusColour;
 (function (StatusColour) {
-    StatusColour["Error"] = "var(--ab-color-error)";
+    StatusColour["Error"] = "var(--ab-color-destructive)";
     StatusColour["Warn"] = "var(--ab-color-warn)";
     StatusColour["Success"] = "var(--ab-color-success)";
     StatusColour["Info"] = "var(--ab-color-info)";

package/src/AdaptableState/StyledColumnState.d.ts

@@ -200,11 +200,11 @@ export interface CellColorRange {
  */
 export interface ColumnComparison {
     /**
-     * Start value - either numeric value or Column name
+     * Start value - either numeric value or Column ID
      */
     MinValue: number | string;
     /**
-     * End value - either numeric value or Column name
+     * End value - either numeric value or Column ID
      */
     MaxValue: number | string;
     /**

package/src/Api/Internal/AlertInternalApi.js

@@ -122,7 +122,7 @@ export class AlertInternalApi extends ApiBase {
             let backgroundColor = '';
             switch (highlightType) {
                 case 'Error':
-                    backgroundColor = 'var(--ab-color-error)';
+                    backgroundColor = 'var(--ab-color-destructive)';
                     break;
                 case 'Info':
                     backgroundColor = 'var(--ab-color-info)';

package/src/Api/Internal/DataSetInternalApi.d.ts

@@ -1,5 +1,8 @@
 import { ApiBase } from '../Implementation/ApiBase';
 import { DataSet } from '../../AdaptableOptions/DataSetOptions';
 export declare class DataSetInternalApi extends ApiBase {
+    handleDataSetSelected(dataSet: DataSet): void;
     showDataSetForm(dataSet: DataSet): void;
+    private buildDataSetForm;
+    private runDataSetHandler;
 }

package/src/Api/Internal/DataSetInternalApi.js

@@ -1,20 +1,80 @@
 import { ApiBase } from '../Implementation/ApiBase';
 export class DataSetInternalApi extends ApiBase {
+    handleDataSetSelected(dataSet) {
+        if (!dataSet.form) {
+            this.getEventApi().internalApi.fireDataSetSelectedEvent(dataSet);
+            const dataSetSelectedInfo = {
+                ...this.getAdaptableInternalApi().buildBaseContext(),
+                dataSet,
+            };
+            this.runDataSetHandler(async () => {
+                if (dataSet.loadData) {
+                    const rowData = await dataSet.loadData(dataSetSelectedInfo);
+                    if (rowData != null) {
+                        this.getGridApi().loadGridData(rowData);
+                    }
+                }
+                if (dataSet.onSelect) {
+                    await dataSet.onSelect(dataSetSelectedInfo);
+                }
+            }, 'selection', dataSet.name);
+        }
+    }
     showDataSetForm(dataSet) {
-        if (dataSet.form) {
-            this.getAdaptableInternalApi().showPopupForm({
-                Id: 'data-set-form',
-                Form: dataSet.form,
-                prepareContext: (context) => {
-                    return new Promise((resolve) => {
-                        const preparedContext = {
-                            ...context,
-                            dataSet,
-                        };
-                        resolve(preparedContext);
-                    });
+        if (!dataSet.form) {
+            return;
+        }
+        this.getAdaptableInternalApi().showPopupForm({
+            Id: 'data-set-form',
+            Form: this.buildDataSetForm(dataSet),
+            prepareContext: (context) => {
+                return new Promise((resolve) => {
+                    const preparedContext = {
+                        ...context,
+                        dataSet,
+                    };
+                    resolve(preparedContext);
+                });
+            },
+        });
+    }
+    buildDataSetForm(dataSet) {
+        const sourceForm = dataSet.form;
+        if (!dataSet.onFormSubmit) {
+            return sourceForm;
+        }
+        const invokeOnFormSubmit = (context) => {
+            this.runDataSetHandler(() => dataSet.onFormSubmit(context), 'onFormSubmit', dataSet.name);
+        };
+        const onSubmit = (formData, context) => {
+            sourceForm.onSubmit?.(formData, context);
+            invokeOnFormSubmit({ ...context, formData, dataSet });
+        };
+        const buttons = sourceForm.buttons?.length > 0
+            ? sourceForm.buttons
+            : [
+                {
+                    label: 'OK',
+                    onClick: (_, context) => invokeOnFormSubmit({ ...context, dataSet }),
                 },
-            });
+            ];
+        return {
+            ...sourceForm,
+            onSubmit,
+            buttons,
+        };
+    }
+    runDataSetHandler(handler, handlerName, dataSetName) {
+        try {
+            const result = handler();
+            if (result != null && typeof result.then === 'function') {
+                result.catch((error) => {
+                    this.logError(`DataSet '${dataSetName}' ${handlerName} handler failed`, error);
+                });
+            }
+        }
+        catch (error) {
+            this.logError(`DataSet '${dataSetName}' ${handlerName} handler failed`, error);
         }
     }
 }

package/src/Redux/Store/AdaptableStore.js

@@ -905,10 +905,12 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case InternalRedux.DATA_SET_SELECT: {
                     let returnAction = next(action);
                     const dataSet = adaptable.api.dataSetApi.getCurrentDataSet();
-                    adaptable.api.eventApi.internalApi.fireDataSetSelectedEvent(dataSet);
-                    requestAnimationFrame(() => {
-                        adaptable.api.dataSetApi.internalApi.showDataSetForm(dataSet);
-                    });
+                    if (dataSet) {
+                        adaptable.api.dataSetApi.internalApi.handleDataSetSelected(dataSet);
+                        requestAnimationFrame(() => {
+                            adaptable.api.dataSetApi.internalApi.showDataSetForm(dataSet);
+                        });
+                    }
                     return returnAction;
                 }
                 /*******************

package/src/Strategy/CalculatedColumnModule.js

@@ -115,6 +115,7 @@ export class CalculatedColumnModule extends AdaptableModuleBase {
                 name: 'Settings',
                 label: 'Column Id',
                 values: [calculateColumn.ColumnId],
+                tagVariant: 'column',
             },
             calculateColumn.FriendlyName && {
                 name: 'Settings',

package/src/Strategy/ColumnFilterModule.js

@@ -153,6 +153,7 @@ export class ColumnFilterModule extends AdaptableModuleBase {
                 {
                     name: 'Column',
                     values: [this.api.columnApi.getFriendlyNameForColumnId(filter.ColumnId)],
+                    tagVariant: 'column',
                 },
                 {
                     name: 'Filter',

package/src/Strategy/FlashingCellModule.js

@@ -7,8 +7,8 @@ import { getFlashingTargetViewItems } from './Utilities/FlashingCell/getFlashing
 import { getFlashingCellStyleViewItems } from './Utilities/FlashingCell/getFlashingCellStyleViewItems';
 import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
 import { getRuleViewItems } from '../Utilities/getRuleViewItems';
-import { getScopeViewItems } from '../Utilities/getScopeViewItems';
 import { FlashingCellWizard } from '../View/FlashingCell/Wizard/FlashingCellWizard';
+import { FlashingCellScopeSummaryView } from '../View/FlashingCell/Wizard/FlashingCellScopeWizardSection';
 import { getFlashingCellDurationViewItems } from './Utilities/FlashingCell/getFlashingCellDurationViewItems';
 import { errorOnce } from '../agGrid/AdaptableLogger';
 export class FlashingCellModule extends AdaptableModuleBase {
@@ -253,7 +253,11 @@ export class FlashingCellModule extends AdaptableModuleBase {
                     name: 'Name',
                     values: [flashingCell.Name],
                 },
-                { ...getScopeViewItems(flashingCell.Scope, this.api), label: 'Trigger' },
+                {
+                    label: 'Columns',
+                    name: 'Columns',
+                    view: FlashingCellScopeSummaryView,
+                },
                 {
                     ...getRuleViewItems(flashingCell.Rule, this.api),
                     label: 'Rule',

package/src/Strategy/FormatColumnModule.js

@@ -3,7 +3,7 @@ import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import * as FormatColumnRedux from '../Redux/ActionsReducers/FormatColumnRedux';
 import * as PopupRedux from '../Redux/ActionsReducers/PopupRedux';
 import { FormatColumnWizard } from '../View/FormatColumn/Wizard/FormatColumnWizard';
-import { getFormatColumnFormatSummaryValue, hasFormatColumnDisplayFormat } from '../View/FormatColumn/Wizard/FormatColumnFormatWizardSection';
+import { getFormatColumnFormatSummaryTagValues, hasFormatColumnDisplayFormat } from '../View/FormatColumn/Wizard/FormatColumnFormatWizardSection';
 import { getFormatColumnSettingsViewItems } from './Utilities/FormatColumn/getFormatColumnSettingsViewItems';
 import { MoveFormatColumn } from '../View/FormatColumn/MoveFormatColumn';
 import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
@@ -99,7 +99,7 @@ export class FormatColumnModule extends AdaptableModuleBase {
                 },
                 hasFormatColumnDisplayFormat(formatColumn) && {
                     name: 'Display Format',
-                    values: [getFormatColumnFormatSummaryValue(formatColumn)],
+                    values: getFormatColumnFormatSummaryTagValues(formatColumn),
                 },
                 getObjectTagsViewItems(formatColumn, this.api),
                 {

package/src/Strategy/FreeTextColumnModule.js

@@ -2,6 +2,7 @@ import { AdaptableModuleBase } from './AdaptableModuleBase';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import * as FreeTextColumnRedux from '../Redux/ActionsReducers/FreeTextColumnRedux';
 import { FreeTextColumnWizard } from '../View/FreeTextColumn/Wizard/FreeTextColumnWizard';
+import { getFreeTextColumnSettingsTags } from '../View/FreeTextColumn/Utilities/getFreeTextColumnSettingsTags';
 import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 export class FreeTextColumnModule extends AdaptableModuleBase {
@@ -65,36 +66,45 @@ export class FreeTextColumnModule extends AdaptableModuleBase {
         };
     }
     toView(freeTextColumn) {
+        const settingsTags = getFreeTextColumnSettingsTags(freeTextColumn.FreeTextColumnSettings);
+        const items = [
+            {
+                name: 'Settings',
+                label: 'Column Id',
+                values: [freeTextColumn.ColumnId],
+                tagVariant: 'column',
+            },
+            freeTextColumn.FriendlyName && {
+                name: 'Settings',
+                label: 'Column Name',
+                values: [freeTextColumn.FriendlyName],
+            },
+            {
+                name: 'Settings',
+                label: 'Data Type',
+                values: [freeTextColumn.FreeTextColumnSettings.DataType ?? 'Not specified'],
+            },
+            Boolean(freeTextColumn.DefaultValue) && {
+                name: 'Settings',
+                label: 'Default Value',
+                values: [freeTextColumn.DefaultValue],
+            },
+            freeTextColumn.TextEditor && {
+                name: 'Settings',
+                label: 'Editor Type',
+                values: [freeTextColumn.TextEditor],
+            },
+        ].filter(Boolean);
+        if (ArrayExtensions.IsNotNullOrEmpty(settingsTags)) {
+            items.push({
+                name: 'Settings',
+                values: settingsTags,
+            });
+        }
+        items.push(getObjectTagsViewItems(freeTextColumn, this.api));
         return {
             abObject: freeTextColumn,
-            items: [
-                {
-                    name: 'Settings',
-                    label: 'Column Id',
-                    values: [freeTextColumn.ColumnId],
-                },
-                freeTextColumn.FriendlyName && {
-                    name: 'Settings',
-                    label: 'Column Name',
-                    values: [freeTextColumn.FriendlyName],
-                },
-                {
-                    name: 'Settings',
-                    label: 'Data Type',
-                    values: [freeTextColumn.FreeTextColumnSettings.DataType ?? 'Not specified'],
-                },
-                Boolean(freeTextColumn.DefaultValue) && {
-                    name: 'Settings',
-                    label: 'Default Value',
-                    values: [freeTextColumn.DefaultValue],
-                },
-                freeTextColumn.TextEditor && {
-                    name: 'Editor Type',
-                    label: 'Editor',
-                    values: [freeTextColumn.TextEditor],
-                },
-                getObjectTagsViewItems(freeTextColumn, this.api),
-            ].filter(Boolean),
+            items: items.filter(Boolean),
         };
     }
     toViewAll() {

package/src/Strategy/Interface/IModule.d.ts

@@ -58,7 +58,9 @@ export interface AdaptableObjectItemView {
      * Values used for the component.
      * Could be later extended to include an 'onChange' prop.
      */
-    values?: (string | number)[];
+    values?: (string | number | React.ReactNode)[];
+    /** When `'column'`, tag values render with column styling. */
+    tagVariant?: 'default' | 'column';
 }
 export interface AdaptableObjectView {
     /**

package/src/Strategy/LayoutModule.js

@@ -8,8 +8,9 @@ import { EditCurrentLayoutButton } from '../View/Layout/EditCurrentLayoutButton'
 import { LayoutCloneButton } from '../View/Layout/LayoutCloneButton';
 import { LayoutWizard } from '../View/Layout/Wizard/LayoutWizard';
 import { getLayoutFilterViewItems } from './Utilities/Layout/getLayoutFilterViewItems';
-import { getLayoutSortViewItems } from './Utilities/Layout/getLayoutSortViewItems';
-import { WEIGHTED_AVERAGE_AGG_FN_NAME } from '../AdaptableState/Common/AggregationColumns';
+import { getLayoutTableColumnsViewItems, getLayoutPivotSortingViewItem } from './Utilities/Layout/columnsSummaryHelpers';
+import { getLayoutPivotRowGroupViewItems, getLayoutTableRowGroupViewItems, } from './Utilities/Layout/rowGroupSummaryHelpers';
+import { getLayoutTableAggregationViewItems, getLayoutPivotAggregationViewItems, } from './Utilities/Layout/aggregationSummaryHelpers';
 import { SHOW_PIVOT_COLUMN_DETAILS } from '../View/Components/Popups/WindowPopups/windowFactory';
 import flattenDeep from '../Utilities/utils/flattenDeep';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
@@ -277,25 +278,9 @@ export class LayoutModule extends AdaptableModuleBase {
         return this.getModuleAdaptableObjects().map((layout) => this.toView(layout));
     }
     toView(layout) {
-        const maxColumnsToDisplay = this.api.optionsApi.getLayoutOptions().layoutViewOptions?.maxColumnsToDisplay ?? 10;
         const columnIdToFriendlyName = (columnId) => {
             return this.api.columnApi.getFriendlyNameForColumnId(columnId);
         };
-        let columns = (layout.TableColumns || [])
-            .filter((c) => !this.api.columnApi.isAutoRowGroupColumn(c))
-            .filter((c) => !this.api.columnApi.isPivotResultColumn(c))
-            .filter((c) => !this.api.columnApi.isSelectionColumn(c));
-        if (columns.length >
-            maxColumnsToDisplay + 1 /* +1 is to show tag only beginning with 2, 'other 2' */) {
-            const extraColumns = columns.length - maxColumnsToDisplay;
-            const firstNColumns = columns
-                .slice(0, maxColumnsToDisplay)
-                .map((column) => columnIdToFriendlyName(column));
-            columns = [...firstNColumns, `and ${extraColumns} more`];
-        }
-        else {
-            columns = columns.map((column) => columnIdToFriendlyName(column));
-        }
         return {
             items: [
                 {
@@ -312,59 +297,23 @@ export class LayoutModule extends AdaptableModuleBase {
                  * The generated pivot columns cannot be prevented from beeing on the layout object.
                  * When they are removed/not added, they no longer appear in the grid.
                  */
-                !isPivotLayout(layout) && {
-                    name: 'Columns',
-                    values: columns,
-                },
-                layout.ColumnSorts?.length && getLayoutSortViewItems(layout, this.api),
+                ...(!isPivotLayout(layout)
+                    ? getLayoutTableColumnsViewItems(layout, this.api, {
+                        maxColumnsToDisplay: this.api.optionsApi.getAdaptableOptions()?.layoutOptions?.layoutViewOptions
+                            ?.maxColumnsToDisplay,
+                    })
+                    : []),
                 layout?.ColumnFilters?.length && getLayoutFilterViewItems(layout, this.api),
-                layout?.RowGroupedColumns?.length && {
-                    name: 'Row Groups',
-                    values: layout.RowGroupedColumns.map((colId) => columnIdToFriendlyName(colId)),
-                },
+                ...(!isPivotLayout(layout) ? getLayoutTableRowGroupViewItems(layout, this.api) : []),
                 layout?.PivotColumns?.length && {
                     name: 'Pivot Columns',
                     values: layout.PivotColumns.map((colId) => columnIdToFriendlyName(colId)),
+                    tagVariant: 'column',
                 },
-                layout?.PivotGroupedColumns?.length && {
-                    name: 'Pivot Row Groups',
-                    values: layout.PivotGroupedColumns.map((colId) => columnIdToFriendlyName(colId)),
-                },
-                layout?.TableAggregationColumns &&
-                    layout.TableAggregationColumns.length && {
-                    name: 'Aggregations',
-                    values: layout.TableAggregationColumns.map(({ ColumnId, AggFunc: aggFn }) => {
-                        if (ColumnId === 'Source' || ColumnId === 'Uuid' || ColumnId === 'AdaptableVersion') {
-                            return '';
-                        }
-                        let aggFnName = '';
-                        if (typeof aggFn === 'string') {
-                            aggFnName = aggFn;
-                        }
-                        else if (typeof aggFn === 'object' && aggFn.type === 'weightedAverage') {
-                            aggFnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
-                        }
-                        return `${aggFnName}(${columnIdToFriendlyName(ColumnId)})`;
-                    }).filter(Boolean),
-                },
-                isPivotLayout(layout) &&
-                    layout?.PivotAggregationColumns &&
-                    layout.PivotAggregationColumns.length && {
-                    name: 'Pivot Aggregations',
-                    values: layout.PivotAggregationColumns.map(({ ColumnId, AggFunc: aggFn }) => {
-                        if (ColumnId === 'Source' || ColumnId === 'Uuid' || ColumnId === 'AdaptableVersion') {
-                            return '';
-                        }
-                        let aggFnName = '';
-                        if (typeof aggFn === 'string') {
-                            aggFnName = aggFn;
-                        }
-                        else if (typeof aggFn === 'object' && aggFn.type === 'weightedAverage') {
-                            aggFnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
-                        }
-                        return `${aggFnName}(${columnIdToFriendlyName(ColumnId)})`;
-                    }).filter(Boolean),
-                },
+                isPivotLayout(layout) && getLayoutPivotSortingViewItem(layout, this.api),
+                ...(isPivotLayout(layout) ? getLayoutPivotRowGroupViewItems(layout, this.api) : []),
+                ...(!isPivotLayout(layout) ? getLayoutTableAggregationViewItems(layout, this.api) : []),
+                ...(isPivotLayout(layout) ? getLayoutPivotAggregationViewItems(layout, this.api) : []),
                 layout?.GridFilter &&
                     StringExtensions.IsNotNullOrEmpty(layout.GridFilter.Expression) &&
                     getGridFilterViewItems(layout),