@adaptabletools/adaptable 20.2.1 → 20.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "20.2.1",
+  "version": "20.2.2",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

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

@@ -155,6 +155,10 @@ export interface AdaptableColumn<TData = any> extends AdaptableColumnBase {
      * Is Column a generated Row Group Column
      */
     isGeneratedRowGroupColumn: boolean;
+    /**
+     * Is Column a generated Selection Column
+     */
+    isGeneratedSelectionColumn: boolean;
     /**
      * Is Column a generated Pivot Result Column
      */

package/src/AdaptableState/LayoutState.d.ts

@@ -5,6 +5,7 @@ import { ColumnFilter, GridFilter } from '../types';
 import { TableAggregationColumns, PivotAggregationColumns } from './Common/AggregationColumns';
 import { RowSummary } from './Common/RowSummary';
 import { NonEmptyArray } from '../Utilities/Extensions/ArrayExtensions';
+import { XOR } from '../Utilities/Extensions/TypeExtensions';
 /**
  * Base Layout Type - Pivot or Table
  */
@@ -188,11 +189,24 @@ export type RowGroupValuesWithExceptionKeys = {
      * Default behaviour for Row Groups: 'expanded' or 'collapsed';
      */
     RowGroupDefaultBehavior: 'expanded' | 'collapsed';
+} & XOR<{
     /**
-     * Keys of Row Groups which are exceptions to default RowGroupDefaultBehavior - these are actual values in Row Grouped Column
+     * @deprecated - use GroupKeys instead. Layout.RowGroupValues.GroupKeys[] array allows you
+     * to configure the row group expand / collapse behaviour for each combination of row grouped columns.
      */
     ExceptionGroupKeys?: any[][];
-};
+}, {
+    /**
+     * Allows you to configure the row group expand / collapse behaviour for each combination of row grouped columns.
+     * The default value is configured via RowGroupDefaultBehavior, but exceptions are configured by the GroupKeys array.
+     * Each item in the GroupKeys array is a an object with `RowGroupedColumns` and `ExceptionGroupKeys`. Those properties
+     * configure the collapse/expand exceptions for the specific row group columns.
+     */
+    GroupKeys?: {
+        RowGroupedColumns: string[];
+        ExceptionGroupKeys?: any[][];
+    }[];
+}>;
 /**
  * Manages Column Group expand / collapse behaviour, including exceptions
  */

package/src/AdaptableState/QuickSearchState.d.ts

@@ -5,19 +5,19 @@ import { BaseState } from './BaseState';
  */
 export interface QuickSearchState extends BaseState {
     /**
-     * Last Quick Search that was run (and will run again at start up)
+     * Last Quick Search that was run (and will be applied at start-up)
      */
     QuickSearchText?: string;
     /**
-     * Style to use to highlight matching cells
+     * Style used to highlight matching cells
      */
-    Style?: AdaptableStyle;
+    CellMatchStyle?: Omit<AdaptableStyle, 'ClassName'>;
     /**
-     * Style to use to highlight matching text within a cell
+     * Style used to highlight matching text within a cell (not availale in SSRM)
      */
     TextMatchStyle?: Omit<AdaptableStyle, 'ClassName'>;
     /**
-     * Style to use to highlight matching text within current match
+     * Style used to highlight matching text within current match (not availale in SSRM)
      */
     CurrentTextMatchStyle?: Omit<AdaptableStyle, 'ClassName'>;
 }

package/src/Api/Implementation/ColumnApiImpl.js

@@ -27,6 +27,7 @@ const ROW_GROUP_COLUMN_DEFAULTS = {
     isGrouped: true,
     isGeneratedRowGroupColumn: true,
     isGeneratedPivotResultColumn: false,
+    isGeneratedSelectionColumn: false,
     isFixed: false,
     pinned: null,
     isSparkline: false,

package/src/Api/Implementation/LayoutHelpers.d.ts

@@ -15,6 +15,9 @@ export declare const normalizeTableLayout: (tableLayout: TableLayout, options?:
     isTree: boolean;
 }) => TableLayout;
 export declare const normalizePivotLayout: (pivotLayout: PivotLayout) => PivotLayout;
+export declare const getLayoutRowGroupValuesExceptionGroupKeys: (layout: TableLayout | PivotLayout) => any[][];
+export declare const toRowGroupValuesForLayoutState: (rowGroupValuesModel: TableLayoutModel['RowGroupValues']) => TableLayout['RowGroupValues'];
+export declare const toRowGroupValuesForLayoutModel: (rowGroupValuesState: TableLayout['RowGroupValues']) => TableLayoutModel['RowGroupValues'];
 export declare const checkForDuplicateColumns: (layout: TableLayout) => void;
 export declare const tableLayoutToTableLayoutModel: (tableLayout: TableLayout) => TableLayoutModel;
 export declare const pivotLayoutToPivotLayoutModel: (pivotLayout: PivotLayout) => PivotLayoutModel;

package/src/Api/Implementation/LayoutHelpers.js

@@ -64,6 +64,78 @@ const errorOnce = (message) => {
     console.error(message);
     errorOnceMessages.set(message, true);
 };
+export const getLayoutRowGroupValuesExceptionGroupKeys = (layout) => {
+    if (!layout.RowGroupValues) {
+        return [];
+    }
+    if (layout.RowGroupValues?.RowGroupDefaultBehavior === 'always-collapsed') {
+        return [];
+    }
+    if (layout.RowGroupValues?.RowGroupDefaultBehavior === 'always-expanded') {
+        return [];
+    }
+    if (Array.isArray(layout.RowGroupValues?.GroupKeys)) {
+        const currentGroupedColumns = (layout.RowGroupedColumns || []).join(',');
+        const matchingGroupKeys = layout.RowGroupValues.GroupKeys.find(({ RowGroupedColumns }) => {
+            return RowGroupedColumns.join(',') === currentGroupedColumns;
+        });
+        if (matchingGroupKeys) {
+            return matchingGroupKeys.ExceptionGroupKeys;
+        }
+    }
+    return layout.RowGroupValues.ExceptionGroupKeys || [];
+};
+export const toRowGroupValuesForLayoutState = (rowGroupValuesModel) => {
+    if (!rowGroupValuesModel) {
+        return undefined;
+    }
+    const rowGroupValuesState = {
+        RowGroupDefaultBehavior: rowGroupValuesModel.RowGroupDisplay,
+    };
+    if (rowGroupValuesModel.RowGroupDisplay === 'collapsed' ||
+        rowGroupValuesModel.RowGroupDisplay === 'expanded') {
+        if (rowGroupValuesModel.GroupKeys) {
+            rowGroupValuesState.GroupKeys =
+                rowGroupValuesModel.GroupKeys.map(({ RowGroupedColumns, Values }) => {
+                    return {
+                        RowGroupedColumns,
+                        ExceptionGroupKeys: Values,
+                    };
+                });
+        }
+        else {
+            rowGroupValuesState.ExceptionGroupKeys =
+                rowGroupValuesModel.Values;
+        }
+    }
+    return rowGroupValuesState;
+};
+export const toRowGroupValuesForLayoutModel = (rowGroupValuesState) => {
+    if (!rowGroupValuesState) {
+        return undefined;
+    }
+    if (rowGroupValuesState.RowGroupDefaultBehavior === 'always-collapsed' ||
+        rowGroupValuesState.RowGroupDefaultBehavior === 'always-expanded') {
+        return {
+            RowGroupDisplay: rowGroupValuesState.RowGroupDefaultBehavior,
+        };
+    }
+    if (rowGroupValuesState.GroupKeys) {
+        return {
+            RowGroupDisplay: rowGroupValuesState.RowGroupDefaultBehavior,
+            GroupKeys: rowGroupValuesState.GroupKeys.map(({ RowGroupedColumns, ExceptionGroupKeys }) => {
+                return {
+                    RowGroupedColumns,
+                    Values: ExceptionGroupKeys,
+                };
+            }),
+        };
+    }
+    return {
+        RowGroupDisplay: rowGroupValuesState.RowGroupDefaultBehavior,
+        Values: rowGroupValuesState.ExceptionGroupKeys || [],
+    };
+};
 export const checkForDuplicateColumns = (layout) => {
     if (layout.TableColumns) {
         const set = new Set(layout.TableColumns);
@@ -97,17 +169,7 @@ export const tableLayoutToTableLayoutModel = (tableLayout) => {
         ColumnSorts: tableLayout.ColumnSorts,
         RowGroupedColumns: tableLayout.RowGroupedColumns,
         ColumnPinning: tableLayout.ColumnPinning,
-        RowGroupValues: tableLayout.RowGroupValues
-            ? tableLayout.RowGroupValues.RowGroupDefaultBehavior === 'always-collapsed' ||
-                tableLayout.RowGroupValues.RowGroupDefaultBehavior === 'always-expanded'
-                ? {
-                    RowGroupDisplay: tableLayout.RowGroupValues.RowGroupDefaultBehavior,
-                }
-                : {
-                    RowGroupDisplay: tableLayout.RowGroupValues.RowGroupDefaultBehavior,
-                    Values: tableLayout.RowGroupValues.ExceptionGroupKeys || [],
-                }
-            : undefined,
+        RowGroupValues: toRowGroupValuesForLayoutModel(tableLayout.RowGroupValues),
         ColumnGroupValues: tableLayout.ColumnGroupValues
             ? tableLayout.ColumnGroupValues.ColumnGroupDefaultBehavior === 'always-expanded' ||
                 tableLayout.ColumnGroupValues.ColumnGroupDefaultBehavior === 'always-collapsed'
@@ -180,17 +242,7 @@ export const pivotLayoutToPivotLayoutModel = (pivotLayout) => {
         GrandTotalRow: pivotLayout.GrandTotalRow,
         PivotGrandTotal: pivotLayout.PivotGrandTotal,
         PivotColumnTotal: pivotLayout.PivotColumnTotal,
-        RowGroupValues: pivotLayout.RowGroupValues
-            ? pivotLayout.RowGroupValues.RowGroupDefaultBehavior === 'always-collapsed' ||
-                pivotLayout.RowGroupValues.RowGroupDefaultBehavior === 'always-expanded'
-                ? {
-                    RowGroupDisplay: pivotLayout.RowGroupValues.RowGroupDefaultBehavior,
-                }
-                : {
-                    RowGroupDisplay: pivotLayout.RowGroupValues.RowGroupDefaultBehavior,
-                    Values: pivotLayout.RowGroupValues.ExceptionGroupKeys || [],
-                }
-            : undefined,
+        RowGroupValues: toRowGroupValuesForLayoutModel(pivotLayout.RowGroupValues),
         ColumnGroupValues: pivotLayout.ColumnGroupValues
             ? pivotLayout.ColumnGroupValues.ColumnGroupDefaultBehavior === 'always-expanded' ||
                 pivotLayout.ColumnGroupValues.ColumnGroupDefaultBehavior === 'always-collapsed'
@@ -295,15 +347,7 @@ export const tableLayoutModelToTableLayout = (layoutModel) => {
         delete tableLayout.ColumnPinning;
     }
     if (layoutModel.RowGroupValues) {
-        tableLayout.RowGroupValues = {
-            RowGroupDefaultBehavior: layoutModel.RowGroupValues.RowGroupDisplay,
-        };
-        if ((layoutModel.RowGroupValues.RowGroupDisplay === 'collapsed' ||
-            layoutModel.RowGroupValues.RowGroupDisplay === 'expanded') &&
-            layoutModel.RowGroupValues.Values) {
-            // @ts-ignore
-            tableLayout.RowGroupValues.ExceptionGroupKeys = layoutModel.RowGroupValues.Values;
-        }
+        tableLayout.RowGroupValues = toRowGroupValuesForLayoutState(layoutModel.RowGroupValues);
     }
     else {
         delete tableLayout.RowGroupValues;
@@ -397,15 +441,7 @@ export const pivotLayoutModelToPivotLayout = (layoutModel) => {
         delete pivotLayout.PivotGroupedColumns;
     }
     if (layoutModel.RowGroupValues) {
-        pivotLayout.RowGroupValues = {
-            RowGroupDefaultBehavior: layoutModel.RowGroupValues.RowGroupDisplay,
-        };
-        if ((layoutModel.RowGroupValues.RowGroupDisplay === 'collapsed' ||
-            layoutModel.RowGroupValues.RowGroupDisplay === 'expanded') &&
-            layoutModel.RowGroupValues.Values) {
-            // @ts-ignore
-            pivotLayout.RowGroupValues.ExceptionGroupKeys = layoutModel.RowGroupValues.Values;
-        }
+        pivotLayout.RowGroupValues = toRowGroupValuesForLayoutState(layoutModel.RowGroupValues);
     }
     else {
         delete pivotLayout.RowGroupValues;

package/src/Api/Implementation/QuickSearchApiImpl.d.ts

@@ -9,10 +9,10 @@ export declare class QuickSearchApiImpl extends ApiBase implements QuickSearchAp
     gotoNextMatch(): void;
     gotoPreviousMatch(): void;
     getQuickSearchValue(): string;
-    getQuickSearchStyle(): AdaptableStyle;
+    getQuickSearchCellMatchStyle(): AdaptableStyle;
     getQuickSearchTextMatchStyle(): AdaptableStyle | undefined;
     getQuickSearchCurrentTextMatchStyle(): AdaptableStyle | undefined;
-    setQuickSearchStyle(style: AdaptableStyle): void;
+    setQuickSearchCellMatchStyle(style: AdaptableStyle): void;
     openQuickSearchSettingsPanel(): void;
     showFloatingQuickSearch(): void;
     hideFloatingQuickSearch(): void;

package/src/Api/Implementation/QuickSearchApiImpl.js

@@ -21,8 +21,8 @@ export class QuickSearchApiImpl extends ApiBase {
     getQuickSearchValue() {
         return this.getQuickSearchState().QuickSearchText;
     }
-    getQuickSearchStyle() {
-        return this.getQuickSearchState().Style;
+    getQuickSearchCellMatchStyle() {
+        return this.getQuickSearchState().CellMatchStyle;
     }
     getQuickSearchTextMatchStyle() {
         return this.getQuickSearchState().TextMatchStyle;
@@ -30,8 +30,8 @@ export class QuickSearchApiImpl extends ApiBase {
     getQuickSearchCurrentTextMatchStyle() {
         return this.getQuickSearchState().CurrentTextMatchStyle;
     }
-    setQuickSearchStyle(style) {
-        this.dispatchAction(QuickSearchRedux.QuickSearchSetStyle(style));
+    setQuickSearchCellMatchStyle(style) {
+        this.dispatchAction(QuickSearchRedux.QuickSearchSetCellMatchingStyle(style));
     }
     openQuickSearchSettingsPanel() {
         this.showModulePopup(ModuleConstants.QuickSearchModuleId);

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

@@ -77,7 +77,7 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * @param scope Scope to check
      */
     getFormatColumnDefsForScope(scope: ColumnScope): AdaptablePredicateDef[];
-    formatColumnWithColumnGroupStateShouldRender(formatColumn: FormatColumn, column: AdaptableColumn): boolean;
+    formatColumnWithColumnGroupScopeShouldRender(formatColumn: FormatColumn, column: AdaptableColumn): boolean;
     /**
      * Checks if format column is relevant for a given cell (intersection of given AdaptableColumn and RowNode)
      *

package/src/Api/Internal/FormatColumnInternalApi.js

@@ -172,7 +172,7 @@ export class FormatColumnInternalApi extends ApiBase {
             .predicateApi.internalApi.getFormatColumnPredicateDefs(scope)
             .filter((predicateDef) => this.getColumnScopeApi().isScopeInScope(scope, predicateDef.columnScope));
     }
-    formatColumnWithColumnGroupStateShouldRender(formatColumn, column) {
+    formatColumnWithColumnGroupScopeShouldRender(formatColumn, column) {
         if (!formatColumn.ColumnGroupScope) {
             return true;
         }
@@ -187,7 +187,7 @@ export class FormatColumnInternalApi extends ApiBase {
         if (!columnGroupParentForCurrentColumn) {
             return false;
         }
-        const columnGroupState = columnGroupParentForCurrentColumn.isExpanded()
+        const columnGroupScope = columnGroupParentForCurrentColumn.isExpanded()
             ? 'Expanded'
             : 'Collapsed';
         const columnGroupLeafColumns = columnGroupParentForCurrentColumn.getLeafColumns();
@@ -201,7 +201,7 @@ export class FormatColumnInternalApi extends ApiBase {
         if (formatColumn.ColumnGroupScope === 'Both') {
             return true;
         }
-        return formatColumn.ColumnGroupScope === columnGroupState;
+        return formatColumn.ColumnGroupScope === columnGroupScope;
     }
     /**
      * Checks if format column is relevant for a given cell (intersection of given AdaptableColumn and RowNode)
@@ -234,7 +234,7 @@ export class FormatColumnInternalApi extends ApiBase {
             }
         }
         if (formatColumn.ColumnGroupScope &&
-            !this.formatColumnWithColumnGroupStateShouldRender(formatColumn, column)) {
+            !this.formatColumnWithColumnGroupScopeShouldRender(formatColumn, column)) {
             return false;
         }
         if (!formatColumn.Rule) {

package/src/Api/QuickSearchApi.d.ts

@@ -32,7 +32,7 @@ export interface QuickSearchApi {
     /**
      *  Retrieves current Quick Search style
      */
-    getQuickSearchStyle(): AdaptableStyle;
+    getQuickSearchCellMatchStyle(): AdaptableStyle;
     /**
      * Retrieves the style for the text match in the Quick Search
      */
@@ -45,7 +45,7 @@ export interface QuickSearchApi {
      * Sets style for Quick Search; can be name of (a provided) css style
      * @param style the style to use
      */
-    setQuickSearchStyle(style: AdaptableStyle): void;
+    setQuickSearchCellMatchStyle(style: AdaptableStyle): void;
     /**
      * Opens Settings Panel with Quick Search section selected and visible
      */

package/src/Redux/ActionsReducers/QuickSearchRedux.d.ts

@@ -8,7 +8,7 @@ export declare const QUICK_SEARCH_RUN = "QUICK_SEARCH_RUN";
 /**
  * @ReduxAction Sets Quick Search style
  */
-export declare const QUICK_SEARCH_SET_STYLE = "QUICK_SEARCH_SET_STYLE";
+export declare const QUICK_SEARCH_SET_CELL_MATCHING_STYLE = "QUICK_SEARCH_SET_CELL_MATCHING_STYLE";
 /**
  * @ReduxAction Quick Search Module is ready
  */
@@ -16,13 +16,13 @@ export declare const QUICK_SEARCH_READY = "QUICK_SEARCH_READY";
 export interface QuickSearchRunAction extends Redux.Action {
     quickSearchText: string;
 }
-export interface QuickSearchSetStyleAction extends Redux.Action {
-    style: AdaptableStyle;
+export interface QuickSearchSetMatchingCellStyleAction extends Redux.Action {
+    matchingCellStyle: AdaptableStyle;
 }
 export interface QuickSearchReadyAction extends Redux.Action {
     quickSearchState: QuickSearchState;
 }
 export declare const QuickSearchRun: (quickSearchText: string) => QuickSearchRunAction;
-export declare const QuickSearchSetStyle: (style: AdaptableStyle) => QuickSearchSetStyleAction;
+export declare const QuickSearchSetCellMatchingStyle: (matchingCellStyle: AdaptableStyle) => QuickSearchSetMatchingCellStyleAction;
 export declare const QuickSearchReady: (quickSearchState: QuickSearchState) => QuickSearchReadyAction;
 export declare const QuickSearchReducer: Redux.Reducer<QuickSearchState>;

package/src/Redux/ActionsReducers/QuickSearchRedux.js

@@ -7,7 +7,7 @@ export const QUICK_SEARCH_RUN = 'QUICK_SEARCH_RUN';
 /**
  * @ReduxAction Sets Quick Search style
  */
-export const QUICK_SEARCH_SET_STYLE = 'QUICK_SEARCH_SET_STYLE';
+export const QUICK_SEARCH_SET_CELL_MATCHING_STYLE = 'QUICK_SEARCH_SET_CELL_MATCHING_STYLE';
 /**
  * @ReduxAction Quick Search Module is ready
  */
@@ -16,9 +16,9 @@ export const QuickSearchRun = (quickSearchText) => ({
     type: QUICK_SEARCH_RUN,
     quickSearchText,
 });
-export const QuickSearchSetStyle = (style) => ({
-    type: QUICK_SEARCH_SET_STYLE,
-    style,
+export const QuickSearchSetCellMatchingStyle = (matchingCellStyle) => ({
+    type: QUICK_SEARCH_SET_CELL_MATCHING_STYLE,
+    matchingCellStyle: matchingCellStyle,
 });
 export const QuickSearchReady = (quickSearchState) => ({
     type: QUICK_SEARCH_READY,
@@ -26,7 +26,7 @@ export const QuickSearchReady = (quickSearchState) => ({
 });
 const initialState = {
     QuickSearchText: EMPTY_STRING,
-    Style: {
+    CellMatchStyle: {
         BackColor: QUICK_SEARCH_DEFAULT_BACK_COLOR,
         ForeColor: QUICK_SEARCH_DEFAULT_FORE_COLOR,
     },
@@ -37,9 +37,9 @@ export const QuickSearchReducer = (state = initialState, action) => {
             return Object.assign({}, state, {
                 QuickSearchText: action.quickSearchText,
             });
-        case QUICK_SEARCH_SET_STYLE:
+        case QUICK_SEARCH_SET_CELL_MATCHING_STYLE:
             return Object.assign({}, state, {
-                Style: action.style,
+                CellMatchStyle: action.matchingCellStyle,
             });
         default:
             return state;

package/src/Redux/Store/AdaptableStore.js

@@ -466,7 +466,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                  * Use Case: We have updated an AdapTable Module that affects rendering
                  * Action: We set up all columns again
                  */
-                case QuickSearchRedux.QUICK_SEARCH_SET_STYLE:
+                case QuickSearchRedux.QUICK_SEARCH_SET_CELL_MATCHING_STYLE:
                 case FormatColumnRedux.FORMAT_COLUMN_ADD:
                 case FormatColumnRedux.FORMAT_COLUMN_EDIT:
                 case FormatColumnRedux.FORMAT_COLUMN_DELETE:

package/src/View/Components/StyleComponent.d.ts

@@ -8,6 +8,7 @@ export interface StyleComponentProps extends React.ClassAttributes<StyleComponen
     api: AdaptableApi;
     headless?: boolean;
     hidePreview?: boolean;
+    headerText?: string;
     Style: AdaptableStyle;
     showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;

package/src/View/Components/StyleComponent.js

@@ -44,10 +44,11 @@ export class StyleComponent extends React.Component {
     }
     render() {
         const Cmp = this.props.headless ? Box : Panel;
+        const headerText = this.props.headerText ?? 'Style';
         const cmpProps = this.props.headless
             ? {}
             : {
-                header: 'Style',
+                header: headerText,
                 margin: 2,
                 'data-name': 'style-component',
             };

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

@@ -22,6 +22,7 @@ import { ReorderDraggable } from '../../../Components/ReorderDraggable';
 import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
 import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnIdsByOrder';
 import HelpBlock from '../../../../components/HelpBlock';
+import { AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
 const PropertyOrderText = (props) => (React.createElement(Text, { fontWeight: 600, fontSize: 2 }, props.children));
 const columnTypes = {
     default: {
@@ -195,6 +196,7 @@ export const ColumnsSection = (props) => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
     const [searchInputValue, setSearchInputValue] = React.useState('');
+    let hasSelectionColumn = false;
     const allColumns = adaptable.api.columnApi
         .getUIAvailableColumns()
         .filter((col) => {
@@ -204,7 +206,23 @@ export const ColumnsSection = (props) => {
         return !col.isGeneratedRowGroupColumn;
     })
         // if the current Layout is a PivotLayout, then we also filter out current Pivot Result Columns
-        .filter((col) => !col.isGeneratedPivotResultColumn);
+        .filter((col) => !col.isGeneratedPivotResultColumn)
+        // also we need to filter out selection column
+        .filter((col) => {
+        const result = !col.isGeneratedSelectionColumn;
+        if (!result) {
+            hasSelectionColumn = true;
+        }
+        return result;
+    });
+    const onChange = (data) => {
+        if (hasSelectionColumn &&
+            Array.isArray(data.TableColumns) &&
+            !data.TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+            data.TableColumns.unshift(AG_GRID_SELECTION_COLUMN);
+        }
+        props.onChange(data);
+    };
     // however, changes in RowGroupedColumns done in the previous step
     // are reflected into the layout, so we use the latest layout.RowGroupedColumns
     // to create new columns
@@ -261,7 +279,7 @@ export const ColumnsSection = (props) => {
                 ColumnVisibility[colId] = false;
             }
         });
-        props.onChange({
+        onChange({
             ...layout,
             TableColumns: columnIds,
             ColumnVisibility,
@@ -300,14 +318,14 @@ export const ColumnsSection = (props) => {
                 return shouldInclude;
             });
         }
-        props.onChange({
+        onChange({
             ...layout,
             TableColumns: TableColumns,
             ColumnVisibility,
         });
     };
     const handlePinChange = (columnId, pinning) => {
-        props.onChange({
+        onChange({
             ...layout,
             ColumnPinning: {
                 ...layout.ColumnPinning,
@@ -316,7 +334,7 @@ export const ColumnsSection = (props) => {
         });
     };
     const handleColumnNameChange = (columnId, headerName) => {
-        props.onChange({
+        onChange({
             ...layout,
             ColumnHeaders: {
                 ...layout.ColumnHeaders,
@@ -325,7 +343,7 @@ export const ColumnsSection = (props) => {
         });
     };
     const handleColumnWidthChange = (columnId, width) => {
-        props.onChange({
+        onChange({
             ...layout,
             ColumnWidths: {
                 ...layout.ColumnWidths,
@@ -334,7 +352,8 @@ export const ColumnsSection = (props) => {
         });
     };
     const visibleIds = layout.TableColumns.filter((colId) => {
-        return layout.ColumnVisibility?.[colId] !== false;
+        return (layout.ColumnVisibility?.[colId] !== false &&
+            adaptable.api.columnApi.isSelectionColumn(colId) === false);
     });
     const toLabel = (colId) => adaptable.api.columnApi.getFriendlyNameForColumnId(colId, layout);
     const toIdentifier = (colId) => colId;
@@ -373,7 +392,7 @@ export const ColumnsSection = (props) => {
                 noSelectionLabel: `No Columns Selected`,
                 onChange: handleColumnsChange,
                 onSelectAll: () => {
-                    props.onChange({
+                    onChange({
                         ...layout,
                         ColumnVisibility: {},
                         TableColumns: ColumnOrderAllColumns.map((col) => col.columnId),

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

@@ -39,8 +39,8 @@ export const RowGroupBehaviorSection = (props) => {
                 }
                 onChange(newLayout);
             } },
-            React.createElement(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Always open Layout with all Grouped Rows collapsed" }),
-            React.createElement(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Always open Layout with all Grouped Rows expanded" }),
+            React.createElement(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }),
+            React.createElement(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }),
             React.createElement(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }),
             React.createElement(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" }))));
 };

package/src/View/QuickSearch/QuickSearchPopup.d.ts

@@ -6,7 +6,7 @@ interface QuickSearchPopupProps extends ModuleViewPopupProps<any> {
     QuickSearchText: string;
     QuickSearchStyle: AdaptableStyle;
     onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
-    onSetStyle: (style: AdaptableStyle) => QuickSearchRedux.QuickSearchSetStyleAction;
+    onSetMatchingCellStyle: (style: AdaptableStyle) => QuickSearchRedux.QuickSearchSetMatchingCellStyleAction;
 }
 export declare const QuickSearchPopup: import("react-redux").ConnectedComponent<(props: QuickSearchPopupProps) => React.JSX.Element, {
     [x: string]: any;

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -11,6 +11,7 @@ import { CheckBox } from '../../components/CheckBox';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
+import HelpBlock from '../../components/HelpBlock';
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);
     const [state, setState] = useState({
@@ -19,7 +20,7 @@ const QuickSearchPopupComponent = (props) => {
     });
     const onUpdateStyle = (style) => {
         setState({ ...state, EditedStyle: style });
-        props.onSetStyle(style);
+        props.onSetMatchingCellStyle(style);
     };
     const onQuickSearchBehaviourChange = (checked) => {
         setState({ ...state, RunQueryAfterQuickSearch: checked });
@@ -33,21 +34,23 @@ const QuickSearchPopupComponent = (props) => {
         React.createElement(Panel, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Filters the Grid to only show rows with matching cells; use with care as can cause performance issues"),
+                ' ',
                 React.createElement(FormLayout, { columns: [1, 2] },
                     React.createElement(FormRow, null,
                         React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))))),
-        React.createElement(StyleComponent, { style: { height: '100%' }, api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
+        React.createElement(StyleComponent, { style: { height: '100%' }, headerText: 'Cell Matching Style', api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
 };
 function mapStateToProps(state, ownProps) {
     return {
         QuickSearchText: state.QuickSearch.QuickSearchText,
-        QuickSearchStyle: state.QuickSearch.Style,
+        QuickSearchStyle: state.QuickSearch.CellMatchStyle,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
         onRunQuickSearch: (quickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(quickSearchText)),
-        onSetStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetStyle(style)),
+        onSetMatchingCellStyle: (style) => dispatch(QuickSearchRedux.QuickSearchSetCellMatchingStyle(style)),
     };
 }
 export const QuickSearchPopup = connect(mapStateToProps, mapDispatchToProps)(QuickSearchPopupComponent);