@adaptabletools/adaptable 10.0.1 → 10.0.4-canary.1

package/src/View/GridInfo/ColumnInfoComponent.js

@@ -31,36 +31,36 @@ class ColumnInfoComponent extends React.Component {
             { Content: '', Size: 2 },
         ];
         let selectedColumnId = this.state.SelectedColumn
-            ? this.state.SelectedColumn.ColumnId
+            ? this.state.SelectedColumn.columnId
             : null;
         let keyValuePairs = [
             {
                 Key: 'Column Id',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.ColumnId : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.columnId : null,
             },
             {
                 Key: 'Header',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.FriendlyName : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.friendlyName : null,
             },
             {
                 Key: 'Aggregatable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Aggregatable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.aggregatable : null,
             },
             {
                 Key: 'DataType',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.DataType : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.dataType : null,
             },
             {
                 Key: 'Groupable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Groupable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.groupable : null,
             },
             {
                 Key: 'Filterable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Filterable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.filterable : null,
             },
             {
                 Key: 'Hideable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Hideable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.hideable : null,
             },
             {
                 Key: 'Editable',
@@ -68,27 +68,27 @@ class ColumnInfoComponent extends React.Component {
             },
             {
                 Key: 'Moveable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Moveable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.moveable : null,
             },
             {
                 Key: 'Pivotable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Pivotable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.pivotable : null,
             },
             {
                 Key: 'Queryable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Queryable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.queryable : null,
             },
             {
                 Key: 'Sortable',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Sortable : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.sortable : null,
             },
             {
                 Key: 'Visible',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.Visible : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.visible : null,
             },
             {
                 Key: 'Grouped',
-                Value: this.state.SelectedColumn ? this.state.SelectedColumn.IsGrouped : null,
+                Value: this.state.SelectedColumn ? this.state.SelectedColumn.isGrouped : null,
             },
         ];
         let moduleService = this.props.api.internalApi.getModuleService();
@@ -125,14 +125,14 @@ class ColumnInfoComponent extends React.Component {
                     React.createElement(FreeTextColumnSummary_1.FreeTextColumnSummary, { key: ModuleConstants.FreeTextColumnModuleId, summarisedColumn: this.state.SelectedColumn, teamSharingActivated: this.props.teamSharingActivated, accessLevel: this.getAccessLevel(ModuleConstants.FreeTextColumnModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.FreeTextColumnModuleId) })));
             }
             if (this.isModuleAvailable(ModuleConstants.PlusMinusModuleId) &&
-                this.state.SelectedColumn.DataType == Enums_1.DataType.Number) {
+                this.state.SelectedColumn.dataType == Enums_1.DataType.Number) {
                 summaries.push(React.createElement("div", { key: ModuleConstants.PlusMinusModuleId, className: this.isModuleReadOnly(ModuleConstants.PlusMinusModuleId)
                         ? GeneralConstants.READ_ONLY_STYLE
                         : '' },
                     React.createElement(PlusMinusSummary_1.PlusMinusSummary, { key: ModuleConstants.PlusMinusModuleId, summarisedColumn: this.state.SelectedColumn, teamSharingActivated: this.props.teamSharingActivated, accessLevel: this.getAccessLevel(ModuleConstants.PlusMinusModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.PlusMinusModuleId) })));
             }
             if (this.isModuleAvailable(ModuleConstants.CalculatedColumnModuleId) &&
-                ArrayExtensions_1.ArrayExtensions.ContainsItem(this.props.api.calculatedColumnApi.getAllCalculatedColumn().map((cc) => cc.ColumnId), this.state.SelectedColumn.ColumnId)) {
+                ArrayExtensions_1.ArrayExtensions.ContainsItem(this.props.api.calculatedColumnApi.getAllCalculatedColumn().map((cc) => cc.ColumnId), this.state.SelectedColumn.columnId)) {
                 summaries.push(React.createElement("div", { key: ModuleConstants.CalculatedColumnModuleId, className: this.isModuleReadOnly(ModuleConstants.CalculatedColumnModuleId)
                         ? GeneralConstants.READ_ONLY_STYLE
                         : '' },

package/src/View/GridInfo/GridInfoPopup.js

@@ -48,13 +48,16 @@ exports.GridInfoPopup = (props) => {
                 return props.api.columnApi.getFriendlyNameFromColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
             })
             : null;
+        const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
         returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
+        returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
+        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Column', props.api.gridApi.getVisibleColumnCount()));
+        returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));

package/src/View/Layout/Wizard/LayoutEditor/ColumnList.js

@@ -24,7 +24,7 @@ exports.ColumnList = (props) => {
             source.droppableId !== destination.droppableId) {
             return;
         }
-        if (!source.column || !source.column.Moveable) {
+        if (!source.column || !source.column.moveable) {
             return;
         }
         if (destination.index === source.index) {
@@ -36,8 +36,8 @@ exports.ColumnList = (props) => {
             // cannot drop on this list while searching
             return;
         }
-        if (!source.column.IsFixed &&
-            newColumns.slice(newDropIndex).filter((c) => c.IsFixed).length) {
+        if (!source.column.isFixed &&
+            newColumns.slice(newDropIndex).filter((c) => c.isFixed).length) {
             // there are fixed cols after this one, so it's an invalid drop
             return;
         }
@@ -59,7 +59,7 @@ exports.ColumnList = (props) => {
     }, [onDragEnd]);
     const renderColumn = react_2.useCallback((c) => {
         const defaultRenderColumn = (c) => {
-            return React.createElement(React.Fragment, null, c.FriendlyName);
+            return React.createElement(React.Fragment, null, c.friendlyName);
         };
         return (props.renderItem || defaultRenderColumn)(c);
     }, [props.renderItem]);
@@ -68,11 +68,11 @@ exports.ColumnList = (props) => {
             React.createElement(rebass_1.Box, { px: 2, mb: 2 },
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { placeholder: "Search a column", width: "100%", value: search, OnTextChange: setSearch })),
             columns.map((c, index) => {
-                return (React.createElement(react_beautiful_dnd_1.Draggable, { key: `${c.ColumnId}-column`, draggableId: c.ColumnId, index: index }, (provided, snapshot) => {
+                return (React.createElement(react_beautiful_dnd_1.Draggable, { key: `${c.columnId}-column`, draggableId: c.columnId, index: index }, (provided, snapshot) => {
                     const style = props.getItemStyle(c, snapshot, provided.draggableProps.style);
                     style.padding = 0;
                     if (search &&
-                        c.FriendlyName.toLowerCase().indexOf(search.toLowerCase()) == -1) {
+                        c.friendlyName.toLowerCase().indexOf(search.toLowerCase()) == -1) {
                         style.display = 'none';
                     }
                     return (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "ab-LayoutEditor__ColumnList__column", style: style }), renderColumn(c)));

package/src/View/Layout/Wizard/LayoutEditor/ColumnSortList.js

@@ -39,7 +39,7 @@ exports.ColumnSortList = (props) => {
             return;
         }
         if (columnDrag) {
-            if (!source.column.Sortable) {
+            if (!source.column.sortable) {
                 return;
             }
             if (columnSorts.filter((c) => c.ColumnId === source.columnId)[0]) {

package/src/View/Layout/Wizard/LayoutEditor/PivotList.js

@@ -36,7 +36,7 @@ exports.PivotList = (props) => {
             return;
         }
         if (columnDrag) {
-            if (!source.column.Pivotable) {
+            if (!source.column.pivotable) {
                 return;
             }
             if (pivotColumns.filter((colId) => colId === source.columnId)[0]) {

package/src/View/Layout/Wizard/LayoutEditor/RowGroupsList.js

@@ -36,7 +36,7 @@ exports.RowGroupsList = (props) => {
             return;
         }
         if (columnDrag) {
-            if (!source.column.Groupable) {
+            if (!source.column.groupable) {
                 return;
             }
             if (rowGroups.filter((colId) => colId === source.columnId)[0]) {

package/src/View/Layout/Wizard/LayoutEditor/getItemStyle.js

@@ -10,9 +10,9 @@ exports.getItemStyle = (column, layout, dragSource, snapshot, draggableStyle) =>
         if (dragSource == droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
             draggingOver === droppableIds_1.LayoutEditorDroppableIds.ColumnSortList &&
             //if col not sortable or is already in the sort order
-            (!column.Sortable ||
+            (!column.sortable ||
                 (layout.ColumnSorts &&
-                    layout.ColumnSorts.filter((sort) => sort.ColumnId === column.ColumnId)[0]))) {
+                    layout.ColumnSorts.filter((sort) => sort.ColumnId === column.columnId)[0]))) {
         }
         //dragging things on the first column, from any other column
         if (dragSource != droppableIds_1.LayoutEditorDroppableIds.ColumnList &&

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -88,7 +88,7 @@ exports.LayoutEditor = React.memo((props) => {
     const { layout } = state;
     const allColumnsMap = React.useMemo(() => {
         return allColumns.reduce((acc, col) => {
-            acc[col.ColumnId] = col;
+            acc[col.columnId] = col;
             return acc;
         }, {});
     }, [allColumns]);
@@ -99,7 +99,7 @@ exports.LayoutEditor = React.memo((props) => {
         return col;
     })
         .concat(allColumns.filter((col) => {
-        return !tmpMap[col.ColumnId];
+        return !tmpMap[col.columnId];
     }))
         .filter((c) => c));
     const setLayout = (layout) => {
@@ -118,7 +118,7 @@ exports.LayoutEditor = React.memo((props) => {
     }, [props.layout]);
     const visibleColumnsMap = React.useMemo(() => {
         return allColumns.reduce((acc, col) => {
-            acc[col.ColumnId] = layout.Columns.indexOf(col.ColumnId) != -1 ? col : null;
+            acc[col.columnId] = layout.Columns.indexOf(col.columnId) != -1 ? col : null;
             return acc;
         }, {});
     }, [layout, allColumns]);
@@ -126,7 +126,7 @@ exports.LayoutEditor = React.memo((props) => {
         return Object.keys(layout.AggregationColumns || {}).reduce((acc, colId) => {
             let fn = layout.AggregationColumns[colId];
             if (typeof fn === 'boolean') {
-                fn = allColumnsMap[colId].AggregationFunction;
+                fn = allColumnsMap[colId].aggregationFunction;
             }
             acc[colId] = fn;
             return acc;
@@ -145,8 +145,8 @@ exports.LayoutEditor = React.memo((props) => {
     const setColumnVisibility = (c, visible) => {
         const newLayout = visible
             ? Object.assign(Object.assign({}, layout), { Columns: columnList
-                    .filter((col) => visibleColumnsMap[col.ColumnId] || col.ColumnId === c.ColumnId)
-                    .map((c) => c.ColumnId) }) : Object.assign(Object.assign({}, layout), { Columns: layout.Columns.filter((colId) => colId !== c.ColumnId) });
+                    .filter((col) => visibleColumnsMap[col.columnId] || col.columnId === c.columnId)
+                    .map((c) => c.columnId) }) : Object.assign(Object.assign({}, layout), { Columns: layout.Columns.filter((colId) => colId !== c.columnId) });
         const previousGroupCols = getAgGridGroupAutoColumn(layout);
         const currentGroupCols = getAgGridGroupAutoColumn(newLayout);
         if (previousGroupCols.length !== currentGroupCols.length) {
@@ -172,7 +172,7 @@ exports.LayoutEditor = React.memo((props) => {
         }
         if (source.droppableId === droppableIds_1.LayoutEditorDroppableIds.ColumnList) {
             source.column = columnList[source.index];
-            source.columnId = source.column.ColumnId;
+            source.columnId = source.column.columnId;
         }
         if (destination.droppableId === droppableIds_1.LayoutEditorDroppableIds.ColumnList) {
             onDragEndRef.current.columnList(result);
@@ -192,7 +192,7 @@ exports.LayoutEditor = React.memo((props) => {
         const dragSource = source.droppableId;
         const column = dragSource === droppableIds_1.LayoutEditorDroppableIds.ColumnList ? allColumnsMap[draggableId] : null;
         const invalidSourceForColumns = source.droppableId !== droppableIds_1.LayoutEditorDroppableIds.ColumnList;
-        const dropDisabledOnColumns = !column || !column.Moveable || invalidSourceForColumns;
+        const dropDisabledOnColumns = !column || !column.moveable || invalidSourceForColumns;
         dispatch({
             type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_COLUMNS,
             payload: dropDisabledOnColumns,
@@ -203,37 +203,37 @@ exports.LayoutEditor = React.memo((props) => {
         });
         const columnAlreadySorted = column &&
             layout.ColumnSorts &&
-            !!layout.ColumnSorts.filter((c) => c.ColumnId === column.ColumnId)[0];
+            !!layout.ColumnSorts.filter((c) => c.ColumnId === column.columnId)[0];
         const invalidSourceForSort = dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
             dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnSortList;
-        const disableDropOnSort = invalidSourceForSort || columnAlreadySorted || (column && !column.Sortable);
+        const disableDropOnSort = invalidSourceForSort || columnAlreadySorted || (column && !column.sortable);
         dispatch({
             type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_SORT,
             payload: !!disableDropOnSort,
         });
         const columnAlreadyRowGrouped = column && layout.RowGroupedColumns
-            ? !!layout.RowGroupedColumns.filter((colId) => colId === column.ColumnId)[0]
+            ? !!layout.RowGroupedColumns.filter((colId) => colId === column.columnId)[0]
             : false;
         const invalidSourceForRowGroups = dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
             dragSource !== droppableIds_1.LayoutEditorDroppableIds.RowGroupsList;
-        const disableDropOnRowGroups = invalidSourceForRowGroups || columnAlreadyRowGrouped || (column && !column.Groupable);
+        const disableDropOnRowGroups = invalidSourceForRowGroups || columnAlreadyRowGrouped || (column && !column.groupable);
         dispatch({
             type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_ROW_GROUPS,
             payload: !!disableDropOnRowGroups,
         });
         const columnAlreadyPivoted = column && layout.PivotColumns
-            ? !!layout.PivotColumns.filter((colId) => colId === column.ColumnId)[0]
+            ? !!layout.PivotColumns.filter((colId) => colId === column.columnId)[0]
             : false;
         const invalidSourceForPivot = dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
             dragSource !== droppableIds_1.LayoutEditorDroppableIds.PivotList;
-        const disableDropOnPivot = invalidSourceForPivot || columnAlreadyPivoted || (column && !column.Pivotable);
+        const disableDropOnPivot = invalidSourceForPivot || columnAlreadyPivoted || (column && !column.pivotable);
         dispatch({
             type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_PIVOT,
             payload: !!disableDropOnPivot,
         });
     }, [state, layout]);
     const onColumnOrderChange = react_1.useCallback((columns) => {
-        setLayout(Object.assign(Object.assign({}, layout), { Columns: columns.filter((c) => visibleColumnsMap[c.ColumnId]).map((c) => c.ColumnId) }));
+        setLayout(Object.assign(Object.assign({}, layout), { Columns: columns.filter((c) => visibleColumnsMap[c.columnId]).map((c) => c.columnId) }));
         setColumnList(columns);
     }, [visibleColumnsMap, layout]);
     const onColumnSortsChange = react_1.useCallback((ColumnSorts) => {
@@ -257,16 +257,16 @@ exports.LayoutEditor = React.memo((props) => {
                     }, getItemStyle: (c, snapshot, draggableStyle) => {
                         return getItemStyle_1.getItemStyle(c, layout, state.dragSource, snapshot, draggableStyle);
                     }, columns: columnList, isDropDisabled: state.dropDisabledOnColumns, onColumnOrderChange: onColumnOrderChange, renderItem: (c) => {
-                        const visible = !!visibleColumnsMap[c.ColumnId];
-                        const aggregate = !!aggregationColumnsMap[c.ColumnId];
+                        const visible = !!visibleColumnsMap[c.columnId];
+                        const aggregate = !!aggregationColumnsMap[c.columnId];
                         // enable aggregation if there are row groups or pivoting is enabled
                         //  const aggregateEnabled =
                         //    (layout.RowGroupedColumns && layout.RowGroupedColumns.length) || layout.EnablePivot;
                         // JW: Not sure we do - why not just make it always visible as we ignore if if not required.
                         const aggregateEnabled = true;
-                        const customHeader = headerColumnsMap[c.ColumnId];
-                        const initialHeader = api.internalApi.getUserDefinedHeaderName(c.ColumnId);
-                        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.ColumnId },
+                        const customHeader = headerColumnsMap[c.columnId];
+                        const initialHeader = api.internalApi.getUserDefinedHeaderName(c.columnId);
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.columnId },
                             React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "secondary", color: "text-on-secondary" },
                                 React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" },
                                     React.createElement(rebass_1.Box, { ml: 2, mr: 2 },
@@ -279,18 +279,18 @@ exports.LayoutEditor = React.memo((props) => {
                                                 source: 'ContextMenu',
                                             });
                                         } }),
-                                    c.ColumnGroup && c.ColumnGroup.GroupCount > 1 ? (React.createElement(rebass_1.Box, { ml: 2, padding: 1, style: {
+                                    c.columnGroup && c.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { ml: 2, padding: 1, style: {
                                             borderRadius: 'var(--ab__border-radius)',
                                             background: 'var(--ab-color-defaultbackground)',
                                             color: 'var(--ab-color-text-on-defaultbackground)',
                                         } },
                                         "Group: ",
-                                        c.ColumnGroup.FriendlyName)) : null),
-                                React.createElement(CheckBox_1.CheckBox, { title: "Visible", readOnly: !c.Hideable && visible, checked: visible, mx: 2, style: {
+                                        c.columnGroup.friendlyName)) : null),
+                                React.createElement(CheckBox_1.CheckBox, { title: "Visible", readOnly: !c.hideable && visible, checked: visible, mx: 2, style: {
                                         whiteSpace: 'nowrap',
                                     }, onChange: setColumnVisibility.bind(null, c) }, "Visible")),
                             React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "column" },
-                                React.createElement(ColumnLabels, { showTitle: true, Sortable: c.Sortable, Filterable: c.Filterable, Moveable: c.Moveable, Pivotable: c.Pivotable, Groupable: c.Groupable, Aggregatable: c.Aggregatable }, ' '),
+                                React.createElement(ColumnLabels, { showTitle: true, sortable: c.sortable, filterable: c.filterable, moveable: c.moveable, pivotable: c.pivotable, groupable: c.groupable, aggregatable: c.aggregatable }, ' '),
                                 React.createElement(rebass_1.Flex, { flexDirection: "row", mt: 2 },
                                     React.createElement(rebass_1.Flex, { flex: 3, alignItems: "baseline" },
                                         React.createElement(rebass_1.Text, { fontSize: 3, mr: 2 }, "Header:"),
@@ -298,27 +298,27 @@ exports.LayoutEditor = React.memo((props) => {
                                                 const newTextValue = event.target.value;
                                                 const columnHeaders = Object.assign({}, layout.ColumnHeadersMap) || {};
                                                 if (StringExtensions_1.default.IsNullOrEmptyOrWhiteSpace(newTextValue)) {
-                                                    delete columnHeaders[c.ColumnId];
+                                                    delete columnHeaders[c.columnId];
                                                 }
                                                 else {
-                                                    columnHeaders[c.ColumnId] = newTextValue;
+                                                    columnHeaders[c.columnId] = newTextValue;
                                                 }
                                                 setLayout(Object.assign(Object.assign({}, layout), { ColumnHeadersMap: columnHeaders }));
                                             } })),
-                                    React.createElement(rebass_1.Flex, { flex: 2 }, c.Aggregatable &&
-                                        c.AvailableAggregationFunctions &&
-                                        c.AvailableAggregationFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { key: "checkbox", ml: 3, my: 0, disabled: !aggregateEnabled, onChange: (checked) => {
+                                    React.createElement(rebass_1.Flex, { flex: 2 }, c.aggregatable &&
+                                        c.availableAggregationFunctions &&
+                                        c.availableAggregationFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { key: "checkbox", ml: 3, my: 0, disabled: !aggregateEnabled, onChange: (checked) => {
                                             let aggCols = layout.AggregationColumns || {};
                                             // const aggCols = new Set(layout.AggregationColumns);
                                             if (checked) {
-                                                let aggFunc = c.AggregationFunction;
-                                                if (!aggFunc && c.AvailableAggregationFunctions) {
-                                                    aggFunc = c.AvailableAggregationFunctions[0];
+                                                let aggFunc = c.aggregationFunction;
+                                                if (!aggFunc && c.availableAggregationFunctions) {
+                                                    aggFunc = c.availableAggregationFunctions[0];
                                                 }
-                                                aggCols[c.ColumnId] = aggFunc;
+                                                aggCols[c.columnId] = aggFunc;
                                             }
                                             else {
-                                                delete aggCols[c.ColumnId];
+                                                delete aggCols[c.columnId];
                                                 if (!Object.keys(aggCols).length) {
                                                     aggCols = null;
                                                 }
@@ -328,7 +328,7 @@ exports.LayoutEditor = React.memo((props) => {
                                         "Aggregate",
                                         React.createElement(DropdownButton_1.default, { style: {
                                                 visibility: aggregate ? 'visible' : 'hidden',
-                                            }, ml: 2, padding: 0, columns: ['label'], variant: "text", items: c.AvailableAggregationFunctions.map((fnName) => {
+                                            }, ml: 2, padding: 0, columns: ['label'], variant: "text", items: c.availableAggregationFunctions.map((fnName) => {
                                                 return {
                                                     label: fnName,
                                                     onClick: () => {
@@ -336,11 +336,11 @@ exports.LayoutEditor = React.memo((props) => {
                                                         if (!aggCols) {
                                                             return;
                                                         }
-                                                        aggCols[c.ColumnId] = fnName;
+                                                        aggCols[c.columnId] = fnName;
                                                         setLayout(Object.assign(Object.assign({}, layout), { AggregationColumns: aggCols }));
                                                     },
                                                 };
-                                            }) }, aggregationColumnsMap[c.ColumnId]))) : null)))));
+                                            }) }, aggregationColumnsMap[c.columnId]))) : null)))));
                     } })),
             React.createElement(ListPanel, { header: "Sorting", className: "ab-LayoutEditor__ColumnSortListPanel" },
                 React.createElement(ColumnSortList_1.ColumnSortList, { columnSorts: layout.ColumnSorts, onColumnSortsChange: onColumnSortsChange, isDropDisabled: state.dropDisabledOnSort, onReady: (dragEnd) => {
@@ -356,7 +356,7 @@ exports.LayoutEditor = React.memo((props) => {
                             React.createElement(rebass_1.Box, { ml: 2, mr: 3 },
                                 React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
                             React.createElement(rebass_1.Flex, { flex: "1", flexDirection: "row", alignItems: "center" },
-                                column.FriendlyName,
+                                column.friendlyName,
                                 " [",
                                 c.SortOrder,
                                 "]"),
@@ -381,7 +381,7 @@ exports.LayoutEditor = React.memo((props) => {
                         return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", "data-name": "drag-item" },
                             React.createElement(rebass_1.Box, { ml: 2, mr: 3 },
                                 React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
-                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", flex: 1 }, column.FriendlyName),
+                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", flex: 1 }, column.friendlyName),
                             React.createElement(SimpleButton_1.default, { variant: "text", onClick: (e) => {
                                     e.stopPropagation();
                                     clear();
@@ -400,7 +400,7 @@ exports.LayoutEditor = React.memo((props) => {
                         return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", "data-name": "drag-item" },
                             React.createElement(rebass_1.Box, { ml: 2, mr: 3 },
                                 React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
-                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", flex: 1 }, column.FriendlyName),
+                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", flex: 1 }, column.friendlyName),
                             React.createElement(SimpleButton_1.default, { variant: "text", onClick: (e) => {
                                     e.stopPropagation();
                                     clear();
@@ -424,5 +424,5 @@ exports.LayoutEditor = React.memo((props) => {
                         Groupable: 'Can form a row group',
                         Moveable: 'Is draggable and movable',
                         Pivotable: 'Eligible for pivoting',
-                    }, Sortable: true, Filterable: true, Moveable: true, Pivotable: true, Groupable: true, Aggregatable: true })))));
+                    }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })))));
 }, areEqual);

package/src/View/PlusMinus/PlusMinusPopup.js

@@ -45,7 +45,7 @@ class PlusMinusPopupComponent extends React.Component {
                     let column = this.props.popupParams.column;
                     let plusMinus = ObjectFactory_1.ObjectFactory.CreateEmptyPlusMinusNudge();
                     plusMinus.Scope = {
-                        ColumnIds: [column.ColumnId],
+                        ColumnIds: [column.columnId],
                     };
                     this.setState({
                         editedAdaptableObject: plusMinus,

package/src/View/PlusMinus/PlusMinusSummary.js

@@ -40,7 +40,7 @@ class PlusMinusSummaryComponent extends React.Component {
     onNew() {
         let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyPlusMinusNudge();
         configEntity.Scope = {
-            ColumnIds: [this.props.summarisedColumn.ColumnId],
+            ColumnIds: [this.props.summarisedColumn.columnId],
         };
         this.setState({
             editedAdaptableObject: configEntity,

package/src/View/Query/QueryViewPanel.js

@@ -73,8 +73,8 @@ class QueryViewPanelComponent extends React.Component {
         ];
         let availableColumns = this.props.api.columnApi.getColumns().map((col) => {
             return {
-                label: col.FriendlyName,
-                onClick: () => this.setState({ expression: this.state.expression + `[${col.ColumnId}]` }),
+                label: col.friendlyName,
+                onClick: () => this.setState({ expression: this.state.expression + `[${col.columnId}]` }),
             };
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';

package/src/View/UIHelper.d.ts

@@ -52,6 +52,7 @@ export declare function getButtonTextColourForArrayandMessageType(adaptableAlert
 export declare function getButtonTextColourForMessageType(messageType: AdaptableMessageType): string;
 export declare function getAdaptableToolPanelWidth(): number;
 export declare function getCSSVariableValue(cssVariable: string): string | undefined;
+export declare function setCSSVariableValue(cssVariable: string, value: string): void;
 export declare function isBrowserDocumentAvailable(): boolean;
 export declare const UIHelper: {
     getHexForName: typeof getHexForName;
@@ -79,6 +80,7 @@ export declare const UIHelper: {
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;
     getCSSVariableValue: typeof getCSSVariableValue;
+    setCSSVariableValue: typeof setCSSVariableValue;
     getAdaptableToolPanelWidth: typeof getAdaptableToolPanelWidth;
     isBrowserDocumentAvailable: typeof isBrowserDocumentAvailable;
 };

package/src/View/UIHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.isValidUserChartContainer = exports.getChartContainer = exports.getModalContainer = exports.getPlaceHolderforDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
+exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.isValidUserChartContainer = exports.getChartContainer = exports.getModalContainer = exports.getPlaceHolderforDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
 const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -459,6 +459,14 @@ function getCSSVariableValue(cssVariable) {
     return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
 }
 exports.getCSSVariableValue = getCSSVariableValue;
+function setCSSVariableValue(cssVariable, value) {
+    if (!isBrowserDocumentAvailable()) {
+        // possible during static/server-side rendering (should happen only in test cases)
+        return undefined;
+    }
+    document.documentElement.style.setProperty(cssVariable, value);
+}
+exports.setCSSVariableValue = setCSSVariableValue;
 function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
@@ -489,6 +497,7 @@ exports.UIHelper = {
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,
     getCSSVariableValue,
+    setCSSVariableValue,
     getAdaptableToolPanelWidth,
     isBrowserDocumentAvailable,
 };

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -8,7 +8,8 @@ export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;
     init(params: ICellRendererParams): void;
+    render(): void;
     getGui(): HTMLElement;
-    refresh(params: any): boolean;
+    refresh(params: ICellRendererParams): boolean;
     destroy(): void;
 }

package/src/agGrid/ActionColumnRenderer.js

@@ -40,7 +40,7 @@ class ActionColumnRenderer {
                 actionColumn: actionCol,
                 primaryKeyValue: pkValue,
                 rowNode: params.node,
-                api: adaptable.api,
+                adaptableApi: adaptable.api,
             };
             // if its a group node then only show if set to do so
             if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionCol.includeGroupedRows) {
@@ -64,14 +64,30 @@ class ActionColumnRenderer {
                 let buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                 let buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                 let buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-                return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: () => button.onClick(button, context), className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
+                const handleClick = () => {
+                    button.onClick(button, context);
+                    // Timeout to let any updates to be done before re-rendering the component
+                    setTimeout(() => {
+                        // when called again it triggers a re-render
+                        // https:reactjs.org/docs/react-dom.html#render
+                        doRender();
+                    }, 16);
+                };
+                return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
                     button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                     buttonLabel));
             };
-            react_dom_1.render(renderButton(adaptable.api, context), this.eGui);
-            // this.eGui.innerHTML = '<button>' + actionCol.ActionColumnButton.Label + '</button>';
+            const eGui = this.eGui;
+            function doRender() {
+                react_dom_1.render(renderButton(adaptable.api, context), eGui);
+            }
+            this.render = doRender;
+            doRender();
         }
     }
+    // defined on init
+    // used to re-render in refresh
+    render() { }
     // gets called once when grid ready to insert the element
     getGui() {
         return this.eGui;
@@ -79,6 +95,7 @@ class ActionColumnRenderer {
     // gets called whenever the user gets the cell to refresh
     refresh(params) {
         // return true to tell the grid we refreshed successfully
+        this.render();
         return true;
     }
     // gets called when the cell is removed from the grid