@adaptabletools/adaptable-cjs 22.1.0-canary.0 → 22.1.0

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

@@ -137,26 +137,29 @@ const ColumnsSectionSummary = () => {
         React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
+const isSelectionColumn = (columnId) => columnId === GeneralConstants_1.AG_GRID_SELECTION_COLUMN;
 const isColumnVisible = (options) => {
     const { columnId, layout } = options;
     const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(columnId);
     const visible = (!(0, isPivotLayout_1.isPivotLayout)(layout) &&
         layout.TableColumns.includes(columnId) &&
         layout.ColumnVisibility?.[columnId] !== false) ||
-        isRowGroupColumn;
+        isRowGroupColumn ||
+        isSelectionColumn(columnId);
     return visible;
 };
 const ColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const isRowGroupColumn = (0, ColumnApiImpl_1.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(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
         React.createElement(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
             React.createElement(CheckBox_1.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_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
@@ -169,7 +172,12 @@ const ColumnsSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.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) => {
@@ -180,14 +188,9 @@ 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) &&
@@ -214,13 +217,22 @@ const ColumnsSection = (props) => {
         !allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
         allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
     }
+    if (hasSelectionColumn) {
+        allColumns.unshift((0, ColumnApiImpl_1.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(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+        TableColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...TableColumns];
+    }
     const ColumnOrderAllColumns = ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
     const currentOrder = searchInputValue
         ? ColumnOrderAllColumns.filter((col) => {
@@ -264,7 +276,7 @@ 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];
@@ -277,11 +289,11 @@ 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;
@@ -303,7 +315,7 @@ const ColumnsSection = (props) => {
         }
         onChange({
             ...layout,
-            TableColumns: TableColumns,
+            TableColumns: newTableColumns,
             ColumnVisibility,
         });
     };
@@ -457,7 +469,7 @@ 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))));
 };
 exports.ColumnsSection = ColumnsSection;
@@ -500,7 +512,7 @@ const ColumnPropertiesEditor = (props) => {
             React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
                 React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
                     "Header",
-                    React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                    React.createElement(Input_1.default, { "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(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },

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

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

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

@@ -12,6 +12,7 @@ const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard
 const Flex_1 = require("../../../../components/Flex");
 const twMerge_1 = require("../../../../twMerge");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const RowSelectionSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -57,6 +58,7 @@ function getMode(layout) {
 const RowSelectionSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const mode = getMode(layout);
+    const isPivot = (0, isPivotLayout_1.isPivotLayout)(layout);
     const rowSelection = layout.RowSelection ?? false;
     const handleModeChange = (newMode) => {
         if (newMode === false) {
@@ -97,51 +99,48 @@ const RowSelectionSection = (props) => {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Selection Mode"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Row Selection Mode"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Flex_1.Flex, { flexDirection: "column" },
                     React.createElement(Radio_2.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, twMerge_1.twMerge)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange },
                         React.createElement(Radio_1.default, { value: false }, "Disabled"),
                         React.createElement(Radio_1.default, { value: "singleRow" }, "Single Row"),
                         React.createElement(Radio_1.default, { value: "multiRow" }, "Multi Row"))))),
+        !rowSelection && React.createElement(HelpBlock_1.default, null, "There is no Row Selection configured for this Layout"),
         rowSelection && (React.createElement(React.Fragment, null,
             React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs_1.Tabs.Tab, null, "Options"),
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Selection Column Checkboxes"),
                 React.createElement(Tabs_1.Tabs.Content, null,
                     React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6" },
-                        React.createElement(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Show selection checkboxes"),
-                        mode === 'multiRow' && (React.createElement(CheckBox_1.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_1.Flex, { flexDirection: "column", className: "twa:mt-3" },
-                        React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Checkbox Location"),
-                        React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
-                            React.createElement(Radio_1.default, { value: false }, "Show selection checkbox in dedicated selection column"),
-                            React.createElement(Radio_1.default, { value: true }, "Show selection checkbox in group column")))))),
+                        React.createElement(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Checkboxes in Column Cells"),
+                        mode === 'multiRow' && (React.createElement(CheckBox_1.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_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouping Selection Checkboxes"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
+                        React.createElement(Radio_1.default, { value: false }, "Display in dedicated Selection Column"),
+                        React.createElement(Radio_1.default, { value: true }, "Display in Row Grouped Column"))))),
             React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs_1.Tabs.Tab, null, "Row Click Selection"),
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Click Selection (when user clicks on Row outside of Selection Checkbox)"),
                 React.createElement(Tabs_1.Tabs.Content, null,
-                    React.createElement(HelpBlock_1.default, { 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(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }) },
-                        React.createElement(Radio_1.default, { value: false }, "Disabled"),
-                        React.createElement(Radio_1.default, { value: true }, "Enable selection and deselection"),
-                        React.createElement(Radio_1.default, { value: 'enableSelection' }, "Enable selection only"),
-                        React.createElement(Radio_1.default, { value: 'enableDeselection' }, "Enable deselection only")))),
+                        React.createElement(Radio_1.default, { value: false }, "Disabled (Cannot select or deselect by clicking in Row)"),
+                        React.createElement(Radio_1.default, { value: true }, "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)"),
+                        React.createElement(Radio_1.default, { value: 'enableSelection' }, "Selection Only (Enable selection by clicking in Row)"),
+                        React.createElement(Radio_1.default, { value: 'enableDeselection' }, "Deselection Only (Enable deselection by Ctrl+clicking in Row)")))),
+            mode === 'multiRow' && !isPivot && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Row Selection Behaviour"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
+                        React.createElement(Radio_1.default, { value: 'self' }, "Select Grouped Row Only (no cascade)"),
+                        React.createElement(Radio_1.default, { value: 'descendants' }, "Select Grouped Row and all descendants"),
+                        React.createElement(Radio_1.default, { value: 'filteredDescendants' }, "Select Grouped Row and only filtered descendants"))))),
             mode === 'multiRow' && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
-                React.createElement(Tabs_1.Tabs.Tab, null, "Group & Bulk Selection"),
+                React.createElement(Tabs_1.Tabs.Tab, null, "Select All (in Header) Behaviour"),
                 React.createElement(Tabs_1.Tabs.Content, null,
-                    React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6" },
-                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
-                            React.createElement(Flex_1.Box, { className: "twa:self-center twa:mr-3" }, "Group Select"),
-                            React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
-                                React.createElement(Radio_1.default, { value: 'self' }, "Only select group row (no cascade)"),
-                                React.createElement(Radio_1.default, { value: 'descendants' }, "Select group row and all descendants"),
-                                React.createElement(Radio_1.default, { value: 'filteredDescendants' }, "Select group row and filtered descendants"))),
-                        React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:ml-6 twa:flex-1" },
-                            React.createElement(Flex_1.Box, { className: "twa:self-center twa:mr-3" }, "Select All"),
-                            React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }) },
-                                React.createElement(Radio_1.default, { value: 'all' }, "All rows"),
-                                React.createElement(Radio_1.default, { value: 'filtered' }, "Filtered rows only"),
-                                React.createElement(Radio_1.default, { value: 'currentPage' }, "Current page only")))))))))));
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }) },
+                        React.createElement(Radio_1.default, { value: 'all' }, "All rows"),
+                        React.createElement(Radio_1.default, { value: 'filtered' }, "Filtered rows only"),
+                        React.createElement(Radio_1.default, { value: 'currentPage' }, "Current page only")))))))));
 };
 exports.RowSelectionSection = RowSelectionSection;

package/src/agGrid/AdaptableAgGrid.js

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

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1776278148216 || Date.now(),
-    VERSION: "22.1.0-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1776765174625 || 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

@@ -141,6 +141,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;
+}
 class LayoutManager extends LMEmitter_1.LMEmitter {
     gridApi;
     fieldsToIds = {};
@@ -812,7 +825,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         layout.TableColumns = layout.TableColumns.filter((colId) => colId != undefined);
         layout = (0, normalizeLayoutModel_1.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,
         };
@@ -1211,8 +1224,23 @@ class LayoutManager extends LMEmitter_1.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', {
@@ -1254,7 +1282,25 @@ class LayoutManager extends LMEmitter_1.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(() => {
@@ -1576,10 +1622,20 @@ class LayoutManager extends LMEmitter_1.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: ({