@adaptabletools/adaptable 22.1.0-canary.0 → 22.1.0

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

@@ -10,7 +10,7 @@ import { Icon, NaturallySizedIcon } from '../../../../components/icons';
 import { CheckBox } from '../../../../components/CheckBox';
 import { clamp } from '../../../../Utilities/Helpers/Helper';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
+import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
 import { ReorderDraggable } from '../../../Components/ReorderDraggable';
 import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
 import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnIdsByOrder';
@@ -132,26 +132,29 @@ export const ColumnsSectionSummary = () => {
     return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
         React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
+const isSelectionColumn = (columnId) => columnId === AG_GRID_SELECTION_COLUMN;
 const isColumnVisible = (options) => {
     const { columnId, layout } = options;
     const isRowGroupColumn = isAutoRowGroupColumn(columnId);
     const visible = (!isPivotLayout(layout) &&
         layout.TableColumns.includes(columnId) &&
         layout.ColumnVisibility?.[columnId] !== false) ||
-        isRowGroupColumn;
+        isRowGroupColumn ||
+        isSelectionColumn(columnId);
     return visible;
 };
 const ColumnRow = (props) => {
     const adaptable = useAdaptable();
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const isRowGroupColumn = isAutoRowGroupColumn(props.column.columnId);
+    const isSelectionCol = isSelectionColumn(props.column.columnId);
     const { column } = props;
     const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
     return (React.createElement(Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
         React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
             React.createElement(CheckBox, { "data-name": column.columnId, onChange: (checked) => {
                     props.onColumnVisibilityChange(column.columnId, checked);
-                }, disabled: column.hideable === false || isRowGroupColumn, onClick: (event) => {
+                }, disabled: column.hideable === false || isRowGroupColumn || isSelectionCol, onClick: (event) => {
                     event.stopPropagation();
                 }, checked: visible }),
             React.createElement(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
@@ -164,7 +167,12 @@ export const ColumnsSection = (props) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const [selectedColumnId, setSelectedColumnId] = React.useState(null);
-    let hasSelectionColumn = false;
+    // the selection column is a special column managed by AG Grid - it is not
+    // returned by `getUIAvailableColumns`, but we still want to expose it in the
+    // column list (similar to auto row group columns) so users can reorder/pin it
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
     const allColumns = adaptable.api.columnApi
         .getUIAvailableColumns()
         .filter((col) => {
@@ -175,14 +183,9 @@ export const ColumnsSection = (props) => {
     })
         // if the current Layout is a PivotLayout, then we also filter out current Pivot Result Columns
         .filter((col) => !col.isGeneratedPivotResultColumn)
-        // also we need to filter out selection column
-        .filter((col) => {
-        const result = !col.isGeneratedSelectionColumn;
-        if (!result) {
-            hasSelectionColumn = true;
-        }
-        return result;
-    });
+        // selection columns are not returned by `getUIAvailableColumns` but guard
+        // against any future change
+        .filter((col) => !col.isGeneratedSelectionColumn);
     const onChange = (data) => {
         if (hasSelectionColumn &&
             Array.isArray(data.TableColumns) &&
@@ -209,13 +212,22 @@ export const ColumnsSection = (props) => {
         !allColumns.find((col) => col.columnId === AG_GRID_GROUPED_COLUMN)) {
         allColumns.unshift(generateAutoTreeSingleColumn());
     }
+    if (hasSelectionColumn) {
+        allColumns.unshift(generateSelectionColumn());
+    }
     const colIdToCol = allColumns.reduce((acc, col) => {
         if (col) {
             acc[col.columnId] = col;
         }
         return acc;
     }, {});
-    const TableColumns = layout.TableColumns;
+    let TableColumns = layout.TableColumns;
+    // when the selection column exists but is not explicitly listed in
+    // TableColumns, `sortArrayWithOrder` would push it to the end - instead we
+    // want it at the start (consistent with AG Grid's default position for it)
+    if (hasSelectionColumn && !TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+        TableColumns = [AG_GRID_SELECTION_COLUMN, ...TableColumns];
+    }
     const ColumnOrderAllColumns = ArrayExtensions.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
     const currentOrder = searchInputValue
         ? ColumnOrderAllColumns.filter((col) => {
@@ -259,7 +271,7 @@ export const ColumnsSection = (props) => {
         const columnIdArray = Array.isArray(columnId) ? columnId : [columnId];
         const columnIdSet = new Set(columnIdArray);
         const ColumnVisibility = { ...layout.ColumnVisibility };
-        let TableColumns = [...layout.TableColumns];
+        let newTableColumns = [...TableColumns];
         if (visible) {
             columnIdArray.forEach((colId) => {
                 delete ColumnVisibility[colId];
@@ -272,11 +284,11 @@ export const ColumnsSection = (props) => {
         }
         const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
         const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
-        const columnOrderSet = new Set(TableColumns);
+        const columnOrderSet = new Set(newTableColumns);
         const currentColumnIdsAreIncluded = columnIdArray.every((colId) => columnOrderSet.has(colId));
         if (!currentColumnIdsAreIncluded) {
             const biggestIndex = Math.max(...columnIdArray.map((colId) => idsToIndexes.get(colId)));
-            TableColumns = columnIds.filter((colId) => {
+            newTableColumns = columnIds.filter((colId) => {
                 const isCurrent = columnOrderSet.has(colId);
                 if (isCurrent) {
                     return true;
@@ -298,7 +310,7 @@ export const ColumnsSection = (props) => {
         }
         onChange({
             ...layout,
-            TableColumns: TableColumns,
+            TableColumns: newTableColumns,
             ColumnVisibility,
         });
     };
@@ -452,7 +464,7 @@ export const ColumnsSection = (props) => {
                                 return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
                             }, onChange: handleColumnsChange }))),
                 currentOrderIds.length ? (React.createElement(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
-                        ? (colIdToCol[selectedColumnId] ?? null)
+                        ? colIdToCol[selectedColumnId] ?? null
                         : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null))));
 };
 const hr = (React.createElement("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" }));
@@ -494,7 +506,7 @@ const ColumnPropertiesEditor = (props) => {
             React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
                 React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
                     "Header",
-                    React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                    React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
                             props.onColumnNameChange(props.column.columnId, event.target.value);
                         }, value: customHeader })),
                 React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },

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

@@ -91,7 +91,7 @@ export const RowGroupingSection = (props) => {
                             onChange(newLayout);
                         } },
                         React.createElement(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
-                        React.createElement(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Columns displays in its own, separate, Column" }))))),
+                        React.createElement(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }))))),
         React.createElement(Tabs, { className: "twa:mt-2" },
             React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs.Tab, null, rowGroupsText),

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

@@ -8,6 +8,7 @@ import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptab
 import { Box, Flex } from '../../../../components/Flex';
 import { twMerge } from '../../../../twMerge';
 import HelpBlock from '../../../../components/HelpBlock';
+import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
 import { AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
 export const RowSelectionSectionSummary = () => {
     const { data: layout } = useOnePageAdaptableWizardContext();
@@ -52,6 +53,7 @@ function getMode(layout) {
 export const RowSelectionSection = (props) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const mode = getMode(layout);
+    const isPivot = isPivotLayout(layout);
     const rowSelection = layout.RowSelection ?? false;
     const handleModeChange = (newMode) => {
         if (newMode === false) {
@@ -92,50 +94,47 @@ export const RowSelectionSection = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Selection Mode"),
+            React.createElement(Tabs.Tab, null, "Row Selection Mode"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "column" },
                     React.createElement(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange },
                         React.createElement(Radio, { value: false }, "Disabled"),
                         React.createElement(Radio, { value: "singleRow" }, "Single Row"),
                         React.createElement(Radio, { value: "multiRow" }, "Multi Row"))))),
+        !rowSelection && React.createElement(HelpBlock, null, "There is no Row Selection configured for this Layout"),
         rowSelection && (React.createElement(React.Fragment, null,
             React.createElement(Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Options"),
+                React.createElement(Tabs.Tab, null, "Row Selection Column Checkboxes"),
                 React.createElement(Tabs.Content, null,
                     React.createElement(Flex, { flexDirection: "row", className: "twa:gap-6" },
-                        React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Show selection checkboxes"),
-                        mode === 'multiRow' && (React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }) }, "Show header checkbox for select all"))),
-                    (rowSelection.Checkboxes ?? true) && (React.createElement(Flex, { flexDirection: "column", className: "twa:mt-3" },
-                        React.createElement(Box, { className: "twa:my-3" }, "Checkbox Location"),
-                        React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
-                            React.createElement(Radio, { value: false }, "Show selection checkbox in dedicated selection column"),
-                            React.createElement(Radio, { value: true }, "Show selection checkbox in group column")))))),
+                        React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Checkboxes in Column Cells"),
+                        mode === 'multiRow' && (React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }) }, "Checkbox in Column Header (to enable Select All)"))))),
+            (rowSelection.Checkboxes ?? true) && (React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Row Grouping Selection Checkboxes"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
+                        React.createElement(Radio, { value: false }, "Display in dedicated Selection Column"),
+                        React.createElement(Radio, { value: true }, "Display in Row Grouped Column"))))),
             React.createElement(Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Row Click Selection"),
+                React.createElement(Tabs.Tab, null, "Row Click Selection (when user clicks on Row outside of Selection Checkbox)"),
                 React.createElement(Tabs.Content, null,
-                    React.createElement(HelpBlock, { className: "twa:bg-primarydark/30 twa:text-text-on-primarydark twa:p-2 twa:rounded-standard twa:mb-2" },
-                        React.createElement("p", null, "This describes the behaviour of the row selection when the user clicks on a row, but outside the row selection checkbox."),
-                        React.createElement("p", null, "Should a click outside the checkbox select the row?")),
                     React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }) },
-                        React.createElement(Radio, { value: false }, "Disabled"),
-                        React.createElement(Radio, { value: true }, "Enable selection and deselection"),
-                        React.createElement(Radio, { value: 'enableSelection' }, "Enable selection only"),
-                        React.createElement(Radio, { value: 'enableDeselection' }, "Enable deselection only")))),
+                        React.createElement(Radio, { value: false }, "Disabled (Cannot select or deselect by clicking in Row)"),
+                        React.createElement(Radio, { value: true }, "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)"),
+                        React.createElement(Radio, { value: 'enableSelection' }, "Selection Only (Enable selection by clicking in Row)"),
+                        React.createElement(Radio, { value: 'enableDeselection' }, "Deselection Only (Enable deselection by Ctrl+clicking in Row)")))),
+            mode === 'multiRow' && !isPivot && (React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Grouped Row Selection Behaviour"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
+                        React.createElement(Radio, { value: 'self' }, "Select Grouped Row Only (no cascade)"),
+                        React.createElement(Radio, { value: 'descendants' }, "Select Grouped Row and all descendants"),
+                        React.createElement(Radio, { value: 'filteredDescendants' }, "Select Grouped Row and only filtered descendants"))))),
             mode === 'multiRow' && (React.createElement(Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs.Tab, null, "Group & Bulk Selection"),
+                React.createElement(Tabs.Tab, null, "Select All (in Header) Behaviour"),
                 React.createElement(Tabs.Content, null,
-                    React.createElement(Flex, { flexDirection: "row", className: "twa:gap-6" },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Box, { className: "twa:self-center twa:mr-3" }, "Group Select"),
-                            React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
-                                React.createElement(Radio, { value: 'self' }, "Only select group row (no cascade)"),
-                                React.createElement(Radio, { value: 'descendants' }, "Select group row and all descendants"),
-                                React.createElement(Radio, { value: 'filteredDescendants' }, "Select group row and filtered descendants"))),
-                        React.createElement(Flex, { flexDirection: "row", className: "twa:ml-6 twa:flex-1" },
-                            React.createElement(Box, { className: "twa:self-center twa:mr-3" }, "Select All"),
-                            React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }) },
-                                React.createElement(Radio, { value: 'all' }, "All rows"),
-                                React.createElement(Radio, { value: 'filtered' }, "Filtered rows only"),
-                                React.createElement(Radio, { value: 'currentPage' }, "Current page only")))))))))));
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }) },
+                        React.createElement(Radio, { value: 'all' }, "All rows"),
+                        React.createElement(Radio, { value: 'filtered' }, "Filtered rows only"),
+                        React.createElement(Radio, { value: 'currentPage' }, "Current page only")))))))));
 };

package/src/agGrid/AdaptableAgGrid.js

@@ -462,7 +462,7 @@ export class AdaptableAgGrid {
             // fixes issue #3053
             gridOptions.suppressAggFuncInHeader = !!layoutModel.SuppressAggFuncInHeader;
             if (!isPivotLayoutModel(layoutModel) &&
-                LayoutManager.isSelectionColumnInNonFirstPosition(layoutModel.TableColumns)) {
+                LayoutManager.shouldUnlockSelectionColumnPosition(layoutModel)) {
                 gridOptions.selectionColumnDef = {
                     ...gridOptions.selectionColumnDef,
                     lockPosition: false,

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1776278112836 || Date.now(),
-    VERSION: "22.1.0-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1776765136447 || Date.now(),
+    VERSION: "22.1.0" || '--current-version--',
 };

package/src/layout-manager/src/index.d.ts

@@ -75,6 +75,7 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     static readonly SELECTION_COLUMN_ID = "ag-Grid-SelectionColumn";
     static getGridOptionForRowSelectionFromLayout(layoutRowSelection: LayoutRowSelection | false | undefined, baseGridRowSelection: GridOptions['rowSelection']): GridOptions['rowSelection'] | undefined;
     static isSelectionColumnInNonFirstPosition(tableColumns: string[] | undefined): boolean;
+    static shouldUnlockSelectionColumnPosition(layout: TableLayoutModel): boolean;
     private ensureSelectionColumnPositionUnlocked;
     private getRowSelectionFromGrid;
     private applyRowSelection;

package/src/layout-manager/src/index.js

@@ -138,6 +138,19 @@ function getDefaultColumnSizeStateForColDef(colId, colDef, options) {
     }
     return undefined;
 }
+function adjustColumnIdsForSelection(columnIds, layout) {
+    const selectionColPinning = layout.ColumnPinning?.[LayoutManager.SELECTION_COLUMN_ID];
+    if ((layout.RowSelection || selectionColPinning) &&
+        !columnIds.includes(LayoutManager.SELECTION_COLUMN_ID)) {
+        if (selectionColPinning === 'right') {
+            columnIds = [...columnIds, LayoutManager.SELECTION_COLUMN_ID];
+        }
+        else {
+            columnIds = [LayoutManager.SELECTION_COLUMN_ID, ...columnIds];
+        }
+    }
+    return columnIds;
+}
 export class LayoutManager extends LMEmitter {
     gridApi;
     fieldsToIds = {};
@@ -809,7 +822,7 @@ export class LayoutManager extends LMEmitter {
         layout.TableColumns = layout.TableColumns.filter((colId) => colId != undefined);
         layout = normalizeTableLayoutModel(layout, { isTree: _options?.isTree ?? false });
         const agGridState = {};
-        const columnIds = getColumnOrderIdsForAllColDefs(layout.TableColumns, colDefs);
+        const columnIds = adjustColumnIdsForSelection(getColumnOrderIdsForAllColDefs(layout.TableColumns, colDefs), layout);
         agGridState.columnOrder = {
             orderedColIds: columnIds,
         };
@@ -1208,8 +1221,23 @@ export class LayoutManager extends LMEmitter {
         const index = tableColumns.indexOf(LayoutManager.SELECTION_COLUMN_ID);
         return index > 0;
     }
+    static shouldUnlockSelectionColumnPosition(layout) {
+        const tableColumns = layout.TableColumns;
+        if (!tableColumns) {
+            return false;
+        }
+        const index = tableColumns.indexOf(LayoutManager.SELECTION_COLUMN_ID);
+        if (index > 0) {
+            return true;
+        }
+        const columnPinning = layout.ColumnPinning;
+        if (columnPinning && columnPinning[LayoutManager.SELECTION_COLUMN_ID]) {
+            return true;
+        }
+        return false;
+    }
     ensureSelectionColumnPositionUnlocked(layout) {
-        if (LayoutManager.isSelectionColumnInNonFirstPosition(layout.TableColumns)) {
+        if (LayoutManager.shouldUnlockSelectionColumnPosition(layout)) {
             const current = this.gridApi.getGridOption('selectionColumnDef');
             if (!current || current.lockPosition !== false) {
                 this.gridApi.setGridOption('selectionColumnDef', {
@@ -1251,7 +1279,25 @@ export class LayoutManager extends LMEmitter {
     }
     applyRowSelection(layout) {
         const rowSelection = LayoutManager.getGridOptionForRowSelectionFromLayout(layout.RowSelection, this.initialRowSelection);
+        const prevRowSelection = this.gridApi.getGridOption('rowSelection');
         this.gridApi.setGridOption('rowSelection', rowSelection);
+        // AG Grid does not always refresh already-rendered cells in the selection
+        // column when `rowSelection.checkboxes` is changed at runtime via setGridOption
+        // (e.g. toggling `checkboxes` or `headerCheckbox`).
+        // In the React wrapper this is masked by React-driven re-renders, but in the vanilla integration
+        // the selection column keeps showing stale content until a manual
+        // `refreshCells` is triggered. We force the refresh here so
+        // all integrations behave consistently.
+        if (typeof prevRowSelection === 'object' &&
+            typeof rowSelection === 'object' &&
+            rowSelection.checkboxes !== prevRowSelection.checkboxes) {
+            const selectionColumn = this.gridApi.getColumn(LayoutManager.SELECTION_COLUMN_ID);
+            if (selectionColumn) {
+                this.gridApi.refreshCells({
+                    columns: [LayoutManager.SELECTION_COLUMN_ID],
+                });
+            }
+        }
     }
     applyTableLayout(layout, options) {
         this.withSuppressColumnAnimation(() => {
@@ -1573,10 +1619,20 @@ export class LayoutManager extends LMEmitter {
     computeColumnOrderAndVisibility(layout, columnState) {
         const visibility = layout.ColumnVisibility || {};
         const columnOrderSet = new Set(layout.TableColumns);
-        const isColHidden = (colId) => visibility[colId] === false || !columnOrderSet.has(colId);
+        const isColHidden = (colId) => {
+            if (visibility[colId] === false) {
+                return true;
+            }
+            // for the selection column, return true even
+            // if not explicitly listed in the TableColumns
+            if (colId === LayoutManager.SELECTION_COLUMN_ID && layout.RowSelection) {
+                return false;
+            }
+            return !columnOrderSet.has(colId);
+        };
         columnState = columnState ?? {};
         columnState.applyOrder = true;
-        const columnIds = getColumnOrderIdsForAllColDefs(layout.TableColumns, this.gridApi.getColumnDefs());
+        const columnIds = adjustColumnIdsForSelection(getColumnOrderIdsForAllColDefs(layout.TableColumns, this.gridApi.getColumnDefs()), layout);
         columnState.state = columnIds.map((columnId) => {
             return {
                 colId: columnId,

package/src/metamodel/adaptable.metamodel.d.ts

@@ -3560,6 +3560,25 @@ export declare const ADAPTABLE_METAMODEL: {
             r: string;
         })[];
     };
+    LayoutRowSelection: {
+        k: string;
+        p: ({
+            n: string;
+            k: string;
+            o: boolean;
+            r?: undefined;
+        } | {
+            n: string;
+            k: string;
+            o: boolean;
+            r: string;
+        } | {
+            n: string;
+            k: string;
+            o?: undefined;
+            r?: undefined;
+        })[];
+    };
     LayoutState: {
         k: string;
         p: ({