@adaptabletools/adaptable 18.0.0-canary.8 → 18.0.0

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

@@ -5,7 +5,7 @@ export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
         // TODO see what is this
-        predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showPredicate: !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+        predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
             selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

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

@@ -17,7 +17,7 @@ export const FormatColumnScopeWizardSection = (props) => {
         }, scope: data.Scope, updateScope: (Scope) => {
             var _a, _b;
             const newData = Object.assign(Object.assign({}, data), { Scope });
-            const wholeRow = api.scopeApi.scopeIsAll(Scope);
+            const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
             if ((_b = (_a = newData.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) {
                 if (wholeRow) {
                     // if scope is whole row, a predicate cannot be present, so we set the rule

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

@@ -7,22 +7,25 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Tag } from '../../../components/Tag';
 import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
 import { Toggle } from '../../../components/Toggle/Toggle';
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 export const renderFormatColumnSettingsSummary = (data) => {
-    var _a;
+    var _a, _b, _c, _d;
     return (React.createElement(Box, { padding: 2 },
         React.createElement(Text, null,
             "Cell alignment ",
             React.createElement(Tag, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
         React.createElement(Text, { mt: 3 },
-            "Include grouped rows ",
-            React.createElement(Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+            "Data Rows ",
+            React.createElement(Tag, null, ((_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeDataRows) ? 'no' : 'yes')),
+        ' ',
+        React.createElement(Text, { mt: 3 },
+            "Group Rows ",
+            React.createElement(Tag, null, ((_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeGroupRows) ? 'no' : 'yes')),
+        React.createElement(Text, { mt: 3 },
+            "Summary Rows ",
+            React.createElement(Tag, null, ((_d = data.RowScope) === null || _d === void 0 ? void 0 : _d.ExcludeSummaryRows) ? 'no' : 'yes'))));
 };
 export const FormatColumnSettingsWizardSection = (props) => {
+    var _a, _b, _c;
     const { data } = useOnePageAdaptableWizardContext();
     const onCellAlignmentSelectChanged = (CellAlignment) => {
         const newData = Object.assign(Object.assign({}, data), { CellAlignment });
@@ -31,8 +34,14 @@ export const FormatColumnSettingsWizardSection = (props) => {
         }
         props.onChange(newData);
     };
-    const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
+    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeDataRows }) }));
+    };
+    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeGroupRows: ExcludeGroupedRows }) }));
+    };
+    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeSummaryRows }) }));
     };
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Settings"),
@@ -50,7 +59,13 @@ export const FormatColumnSettingsWizardSection = (props) => {
                             React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
                                     ? onCellAlignmentSelectChanged('Right')
                                     : onCellAlignmentSelectChanged(null) }))),
-                    React.createElement(FormRow, { label: "Include Grouped Rows:" },
+                    React.createElement(FormRow, { label: "Exclude Data Rows:" },
+                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: (_a = data.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                    React.createElement(FormRow, { label: "Exclude Group Rows:" },
+                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: (_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                    React.createElement(FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: (_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))))))));
 };

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

@@ -9,7 +9,7 @@ export const isFormatColumnStyleValid = (data, api) => {
         UIHelper.IsEmptyStyle(data.Style) &&
         data.DisplayFormat === undefined &&
         data.CellAlignment === undefined &&
-        !api.scopeApi.isSingleBooleanColumnScope(data.Scope)) {
+        !api.columnScopeApi.isSingleBooleanColumnScope(data.Scope)) {
         return 'No format applied';
     }
     return true;

package/src/View/FreeTextColumn/FreeTextColumnSummary.js

@@ -45,7 +45,7 @@ export class FreeTextColumnSummaryComponent extends React.Component {
             this.state.editedAdaptableObject && (React.createElement(FreeTextColumnWizard, { moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.FreeTextColumns, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        let configEntity = ObjectFactory.CreateEmptyFreeTextColumn();
+        let configEntity = ObjectFactory.CreateEmptyFreeTextColumn(this.props.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
         configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({
             editedAdaptableObject: configEntity,

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -8,8 +8,10 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import * as FreeTextColumnRedux from '../../../Redux/ActionsReducers/FreeTextColumnRedux';
 import { useDispatch, useSelector } from 'react-redux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { useAdaptable } from '../../AdaptableContext';
 export const FreeTextColumnWizard = (props) => {
     var _a;
+    const adaptable = useAdaptable();
     const allFreeTextColumns = useSelector((state) => state.FreeTextColumn.FreeTextColumns);
     const [freeTextColumn, setFreeTextColumn] = useState(() => {
         var _a, _b;
@@ -19,7 +21,7 @@ export const FreeTextColumnWizard = (props) => {
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
             return allFreeTextColumns.find((column) => column.ColumnId === props.popupParams.column.columnId);
         }
-        return ObjectFactory.CreateEmptyFreeTextColumn();
+        return ObjectFactory.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = useDispatch();
     const isEdit = props.data || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -49,7 +49,7 @@ const QueryViewPanelComponent = (props) => {
                         paddingTop: 6,
                         overflow: 'hidden',
                         zIndex: 100,
-                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
+                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
             isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
             gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
             ' ',
@@ -75,11 +75,11 @@ const QueryViewPanelComponent = (props) => {
                         zIndex: 100,
                         height: '100%',
                         overflow: 'hidden',
-                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
+                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
     const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
     const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
     const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
         React.createElement(Icon, { name: 'list' })));

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -59,7 +59,7 @@ export const useGridFilterExpressionEditor = () => {
     const runQuery = (newExpression = expression) => {
         if (StringExtensions.IsNullOrEmpty(newExpression) &&
             StringExtensions.IsNotNullOrEmpty(gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression)) {
-            // user pressed enter key with an empty input => clear existing current query
+            // user pressed enter key with an empty input => clear existing expression
             adaptable.api.gridFilterApi.setGridFilterExpression('');
             return;
         }

package/src/View/Layout/LayoutViewPanel.js

@@ -25,8 +25,9 @@ class LayoutViewPanelComponent extends React.Component {
             return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+        let layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { flex: 1 },
+            React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
                 React.createElement(Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
             React.createElement(Flex, { flexDirection: "row", className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
                 isManualSaveLayout && (React.createElement(ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),

package/src/View/Layout/TransposedPopup.js

@@ -4,23 +4,24 @@ import FormLayout, { FormRow } from '../../components/FormLayout';
 import Panel from '../../components/Panel';
 import { useAdaptable } from '../AdaptableContext';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 export const TransposedPopup = (props) => {
     const adaptable = useAdaptable();
+    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
     const rowNodes = React.useMemo(() => {
-        return adaptable.api.gridApi.getAllRowNodes();
+        return props.popupProps.visibleRows
+            ? adaptable.api.gridApi.getVisibleRowNodes()
+            : adaptable.api.gridApi.getAllRowNodes();
     }, [
-    // can be later triggered by ticking data
+    // can be later triggered by tickng data
     ]);
-    const { transposedColumnId, hideTransposedColumn = true } = props.popupProps;
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
-    // Thist must be qunique
-    const transposeByColumnId = primaryKey;
-    // Only used to show nice values a the top of the grid, istead on the value
-    // of the primarykey
-    const [synteticTransposedByColumnId, setSynteticTransposedByColumnId] = React.useState(transposedColumnId !== null && transposedColumnId !== void 0 ? transposedColumnId : primaryKey);
+    const [syntheticTransposedByColumnId, setSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
     const columns = React.useMemo(() => {
         // customisable
-        return adaptable.api.columnApi.getColumns();
+        return visibleColumns
+            ? adaptable.api.columnApi.getVisibleColumns()
+            : adaptable.api.columnApi.getColumns();
     }, []);
     const adaptableContainerId = 'transposed-adaptable-container';
     const agGridContainerId = 'transposed-adaptable-ag-grid-container';
@@ -39,9 +40,10 @@ export const TransposedPopup = (props) => {
         for (const row of rowNodes) {
             // we force the col-ids to be strings, easer to work with
             //row[transposeByColumnId] + '';
-            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId) + '';
+            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
             //row[synteticTransposedByColumnId] + '';
-            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, synteticTransposedByColumnId) + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
+                '';
             transposedColumns.push({
                 colId,
                 header,
@@ -51,7 +53,7 @@ export const TransposedPopup = (props) => {
             /**
              * We can hide the transposed column, if we want
              */
-            if (hideTransposedColumn && column.columnId === synteticTransposedByColumnId) {
+            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
                 continue;
             }
             const transposedRow = {
@@ -62,7 +64,7 @@ export const TransposedPopup = (props) => {
             };
             for (let row of rowNodes) {
                 // [transposed-by-column-value[n]]: [other column value[n]]
-                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, transposeByColumnId);
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
                 // row[column.field]
                 let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
                 if (value instanceof Date) {
@@ -76,7 +78,7 @@ export const TransposedPopup = (props) => {
             transposedColumns,
             transposedRows,
         };
-    }, [rowNodes, primaryKey, synteticTransposedByColumnId]);
+    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
     React.useEffect(() => {
         // Mounting in an effect, so the nodes are rendered/available
         const hostAdaptableOptions = adaptable.adaptableOptions;
@@ -94,7 +96,7 @@ export const TransposedPopup = (props) => {
             },
             layoutOptions: {
                 createDefaultLayout: false,
-                autoSizeColumnsInLayout: true,
+                autoSizeColumnsInLayout: autosize,
             },
             predefinedConfig: {
                 Layout: {
@@ -120,7 +122,7 @@ export const TransposedPopup = (props) => {
         };
         const firstColumn = {
             field: transposedFirstColumnHeader,
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(synteticTransposedByColumnId),
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
         };
         const agGridOptions = {
             suppressLoadingOverlay: true,
@@ -155,14 +157,14 @@ export const TransposedPopup = (props) => {
             sideBar: false,
         };
         const modules = adaptable.getAgGridRegisteredModules();
-        const adaptableInitFn = Object.getPrototypeOf(adaptable).constructor.init;
-        const agGridConfig = {
-            gridOptions: agGridOptions,
-            modules: modules,
-        };
         let transposedAdaptableApi;
         (async () => {
-            transposedAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+            transposedAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
+                gridOptions: agGridOptions,
+                modules,
+            });
             adaptable.api.eventApi.on('ThemeChanged', (event) => {
                 transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });
@@ -172,7 +174,7 @@ export const TransposedPopup = (props) => {
                 transposedAdaptableApi.destroy();
             }
         };
-    }, [synteticTransposedByColumnId]);
+    }, [syntheticTransposedByColumnId]);
     /**
      * Need to get all data, manualy pivot the grid using the primary key.
      *
@@ -184,8 +186,8 @@ export const TransposedPopup = (props) => {
         React.createElement(Panel, null,
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector, { value: synteticTransposedByColumnId, onChange: (colId) => {
-                            setSynteticTransposedByColumnId(colId);
+                    React.createElement(ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
+                            setSyntheticTransposedByColumnId(colId);
                         } })))),
         React.createElement(Flex, { height: "100%" },
             React.createElement(Box, { id: "transposed-adaptable-container" }),

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

@@ -14,6 +14,8 @@ import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionV
 import { SortSection, SortSectionSummary } from './sections/SortSection';
 import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
 import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
+import { areSummaryRowsValid, RowSummarySection } from './sections/RowSummarySection';
+import { WEIGHTED_AVERAGE_AGGREATED_FUNCTION } from '../../../PredefinedConfig/Common/RowSummary';
 export const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = useDispatch();
@@ -27,14 +29,16 @@ export const LayoutWizard = (props) => {
             preparedLayout = cloneObject(initialLayout);
             if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
                 preparedLayout.Name = '';
+                delete preparedLayout.Uuid;
             }
         }
         else {
             preparedLayout = ObjectFactory.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
-            preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.agGridAdapter.initialGridOptions.suppressAggFuncInHeader;
+            preparedLayout.SuppressAggFuncInHeader = !!adaptable.agGridAdapter
+                .getAgGridApi()
+                .getGridOption('suppressAggFuncInHeader');
         }
         return preparedLayout;
     });
@@ -101,6 +105,7 @@ export const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
+                isValid: areSummaryRowsValid,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
@@ -113,7 +118,37 @@ export const LayoutWizard = (props) => {
                 renderSummary: () => React.createElement(AggregationsSectionSummary, null),
                 isValid: (data) => isAggregationsSectionValid(data),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(AggregationsSection, { onChange: setLayout }))),
+                    React.createElement(AggregationsSection, { onChange: (layout) => {
+                            let newLayout = cloneObject(layout);
+                            // if we do not have an weighted avg col, we need to clear the row summary if one exists
+                            if (newLayout.RowSummaries) {
+                                newLayout.RowSummaries = newLayout.RowSummaries.map((rowSummary) => {
+                                    return Object.assign(Object.assign({}, rowSummary), { ColumnsMap: Object.entries(rowSummary.ColumnsMap).reduce((acc, [columnId, aggFunc]) => {
+                                            if (
+                                            // see if it is weighted avg
+                                            aggFunc === WEIGHTED_AVERAGE_AGGREATED_FUNCTION &&
+                                                // see if we have a weight in the agg columns
+                                                newLayout.AggregationColumns[columnId] &&
+                                                (typeof newLayout.AggregationColumns[columnId] !== 'object' ||
+                                                    newLayout.AggregationColumns[columnId].weightColumnId)) {
+                                                // need to remove the row summary
+                                                return acc;
+                                            }
+                                            acc[columnId] = aggFunc;
+                                            return acc;
+                                        }, {}) });
+                                });
+                            }
+                            setLayout(newLayout);
+                        } }))),
+            },
+            {
+                title: 'Row Summaries',
+                details: 'Configure Row Summaries',
+                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
+                isVisible: () => layoutSupportedFeatures.RowSummaries,
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowSummarySection, { onChange: setLayout }))),
             },
             {
                 title: 'Sort',

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

@@ -170,7 +170,7 @@ const ColumnRow = (props) => {
                     React.createElement(FormRow, { label: "ColumnId" },
                         React.createElement(Tag, null, props.column.columnId)),
                     React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placeholder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormRow, { label: "Width" },

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

@@ -52,7 +52,7 @@ export const FilterSection = (props) => {
         React.createElement(Tabs.Content, null,
             React.createElement(FormLayout, { mb: 2 },
                 React.createElement(FormRow, { label: "Add Column Filter" },
-                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select column to create filter", onChange: (option) => {
+                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select Column to create Filter", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {

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

@@ -12,7 +12,23 @@ export const RowGroupingSectionSummary = () => {
     var _a;
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Row Grouping"))));
+    return (React.createElement(Box, null, ((_a = layout.RowSummaries) === null || _a === void 0 ? void 0 : _a.length) ? (layout === null || layout === void 0 ? void 0 : layout.RowSummaries.map((rowSummary, index) => {
+        var _a;
+        const columns = Object.entries((_a = rowSummary.ColumnsMap) !== null && _a !== void 0 ? _a : {})
+            .map(([columnId, expression]) => {
+            if (columnId === 'Source' || columnId === 'Uuid') {
+                return '';
+            }
+            return `${expression}(${adaptable.api.columnApi.getFriendlyNameForColumnId(columnId)})`;
+        })
+            .filter(Boolean)
+            .join(', ');
+        return (React.createElement(Box, { mb: 2 },
+            React.createElement(Tag, { key: index },
+                rowSummary.Position,
+                " ",
+                columns)));
+    })) : (React.createElement(Tag, null, "No Row Summaries"))));
 };
 export const RowGroupingSection = (props) => {
     var _a, _b, _c;
@@ -27,7 +43,7 @@ export const RowGroupingSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));
     };
     return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Grouped Rows"),
+        React.createElement(Tabs.Tab, null, "Group Rows"),
         ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs.Tab, null, "Expanded Rows"),
         React.createElement(Tabs.Content, null,
             React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {

package/src/View/Layout/Wizard/sections/RowSummarySection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const areSummaryRowsValid: (layout: Layout) => true | string;
+export declare const RowGroupingSectionSummary: React.FunctionComponent;
+interface RowSummarySectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const RowSummarySection: React.FunctionComponent<RowSummarySectionProps>;
+export {};

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

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Panel from '../../../../components/Panel';
+import { Select } from '../../../../components/Select';
+import SimpleButton from '../../../../components/SimpleButton';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { summarySupportedExpressions, WEIGHTED_AVERAGE_AGGREATED_FUNCTION, } from '../../../../PredefinedConfig/Common/RowSummary';
+import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';
+import { LayoutModuleId } from '../../../../Utilities/Constants/ModuleConstants';
+import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ValueSelector } from '../../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { columnFilter } from './Utilities';
+export const areSummaryRowsValid = (layout) => {
+    var _a;
+    if (!layout.RowSummaries)
+        return true;
+    let valid = true;
+    (_a = layout.RowSummaries) === null || _a === void 0 ? void 0 : _a.find((rowSummary) => {
+        var _a;
+        for (const [_, fn] of Object.entries((_a = rowSummary.ColumnsMap) !== null && _a !== void 0 ? _a : {})) {
+            if (!fn) {
+                valid = 'All row summary columns must have an aggregation function.';
+                return true;
+            }
+        }
+    });
+    return valid;
+};
+const getAvailableExpressionsForColumnType = (columnType, availableScalarExpressions) => {
+    const inputType = mapColumnDataTypeToExpressionFunctionType(columnType);
+    // Object.entries(availableScalarExpressions ?? {})
+    return summarySupportedExpressions
+        .filter((expression) => availableScalarExpressions[expression])
+        .map((expression) => {
+        var _a, _b;
+        const expressionDef = availableScalarExpressions[expression];
+        let firstArg = null;
+        if (Array.isArray((_a = expressionDef === null || expressionDef === void 0 ? void 0 : expressionDef.inputs) === null || _a === void 0 ? void 0 : _a[0])) {
+            // @ts-ignore
+            firstArg = (_b = expressionDef.inputs.find((input) => input.includes(inputType))) === null || _b === void 0 ? void 0 : _b[0];
+        }
+        else {
+            firstArg = expressionDef.inputs[0];
+        }
+        if (inputType === firstArg) {
+            return expression;
+        }
+        else {
+            return null;
+        }
+    })
+        .filter(Boolean);
+};
+export const RowGroupingSectionSummary = () => {
+    var _a;
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Row Grouping"))));
+};
+const RowSummaryEditor = ({ rowSummary, onChange, availableScalarExpressions, onDelete, }) => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = useAdaptable();
+    const columns = React.useMemo(() => {
+        const colIds = adaptable.api.columnApi
+            .getColumns()
+            .filter((column) => {
+            var _a, _b;
+            if (!['Number', 'String', 'Date'].includes(column.dataType))
+                return false;
+            return (_b = (_a = layout.Columns) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, column.columnId);
+        })
+            .map((c) => c.columnId);
+        return sortWithOrderArray(colIds, Object.keys(rowSummary.ColumnsMap), {
+            sortUnorderedItems: false,
+        }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+    }, [rowSummary.ColumnsMap]);
+    return (React.createElement(Panel, { header: React.createElement(Flex, { style: { width: '100%' } },
+            React.createElement(Flex, { flex: 1, alignItems: "center" }, "Row Summary"),
+            React.createElement(SimpleButton, { icon: "delete", onClick: () => {
+                    onDelete();
+                } })), p: 2 },
+        React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "Position" },
+                React.createElement(Select, { options: [
+                        {
+                            label: 'Top',
+                            value: 'Top',
+                        },
+                        {
+                            label: 'Bottom',
+                            value: 'Bottom',
+                        },
+                    ], value: rowSummary.Position, onChange: (position) => {
+                        onChange(Object.assign(Object.assign({}, rowSummary), { Position: position }));
+                    } }))),
+        React.createElement(Flex, { flexDirection: 'column', mt: 2, mb: 1 },
+            React.createElement(Flex, { alignItems: "center", flex: 1, mb: 2 }, "Column Aggregations"),
+            React.createElement(Panel, { bodyProps: { maxHeight: '100%' }, style: { height: 360 } },
+                React.createElement(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: columns, xSelectedLabel: () => {
+                        return 'Active Aggregations:';
+                    }, toListLabel: (column) => {
+                        var _a, _b, _c;
+                        const label = (_a = column.friendlyName) !== null && _a !== void 0 ? _a : column.columnId;
+                        if (!(column.columnId in ((_b = rowSummary.ColumnsMap) !== null && _b !== void 0 ? _b : {}))) {
+                            return label;
+                        }
+                        const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
+                            label: expression,
+                            value: expression,
+                        }));
+                        // check out if this layout has a aggregation with wighted column
+                        const aggregation = (_c = layout.AggregationColumns) === null || _c === void 0 ? void 0 : _c[column.columnId];
+                        if (aggregation && typeof aggregation === 'object' && aggregation.weightedColumnId) {
+                            expressionOptions.push({
+                                label: 'WEIGHTERD_AVG',
+                                value: WEIGHTED_AVERAGE_AGGREATED_FUNCTION,
+                            });
+                        }
+                        const expression = rowSummary.ColumnsMap[column.columnId];
+                        return (React.createElement(Flex, null,
+                            React.createElement(Flex, { mr: 2, alignItems: 'center' }, label),
+                            React.createElement(Select, { value: expression, options: expressionOptions, onChange: (expression) => {
+                                    onChange(Object.assign(Object.assign({}, rowSummary), { ColumnsMap: Object.assign(Object.assign({}, rowSummary.ColumnsMap), { [column.columnId]: expression }) }));
+                                } })));
+                    }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
+                        const newColumnsMap = {};
+                        colIds.forEach((colId) => {
+                            var _a;
+                            newColumnsMap[colId] = (_a = rowSummary.ColumnsMap[colId]) !== null && _a !== void 0 ? _a : null;
+                        });
+                        onChange(Object.assign(Object.assign({}, rowSummary), { ColumnsMap: newColumnsMap }));
+                    } })))));
+};
+export const RowSummarySection = (props) => {
+    var _a;
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const availableScalarExpressions = React.useMemo(() => {
+        return adaptable.api.internalApi
+            .getQueryLanguageService()
+            .getModuleExpressionFunctionsMap(LayoutModuleId).aggregatedScalarFunctions;
+    }, []);
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Row Summaries"),
+        React.createElement(Tabs.Content, null,
+            React.createElement("div", null,
+                React.createElement(Flex, { mb: 1 },
+                    React.createElement(Flex, { flex: 1 }),
+                    React.createElement(SimpleButton, { onClick: () => {
+                            var _a;
+                            props.onChange(Object.assign(Object.assign({}, layout), { RowSummaries: [
+                                    ...((_a = layout.RowSummaries) !== null && _a !== void 0 ? _a : []),
+                                    {
+                                        Position: 'Top',
+                                        ColumnsMap: {},
+                                    },
+                                ] }));
+                        }, icon: "plus" }, "Add Row Summary")),
+                ((_a = layout.RowSummaries) !== null && _a !== void 0 ? _a : []).map((rowSummary, index) => {
+                    return (React.createElement(RowSummaryEditor, { key: index, onDelete: () => {
+                            const newSummaries = [...layout.RowSummaries];
+                            newSummaries.splice(index, 1);
+                            props.onChange(Object.assign(Object.assign({}, layout), { RowSummaries: newSummaries }));
+                        }, availableScalarExpressions: availableScalarExpressions, rowSummary: rowSummary, onChange: (rowSummary) => {
+                            const newSummaries = [...layout.RowSummaries];
+                            newSummaries[index] = rowSummary;
+                            props.onChange(Object.assign(Object.assign({}, layout), { RowSummaries: newSummaries }));
+                        } }));
+                })))));
+};