@alaarab/ogrid-angular 2.0.14 → 2.0.16

package/dist/esm/components/base-datagrid-table.component.js

@@ -20,6 +20,10 @@ export class BaseDataGridTableComponent {
         this.virtualScrollService = new VirtualScrollService();
         this.lastMouseShift = false;
         this.columnSizingVersion = signal(0);
+        /** DOM-measured column widths from the last layout pass.
+         *  Used as a minWidth floor to prevent columns from shrinking
+         *  when new data loads (e.g. server-side pagination). */
+        this.measuredColumnWidths = signal({});
         // Signal-backed view child elements — set from ngAfterViewInit.
         // @ViewChild is a plain property (not a signal), so effects/computed that read it
         // only evaluate once during construction when the ref is still undefined.
@@ -129,17 +133,25 @@ export class BaseDataGridTableComponent {
             const fc = this.freezeCols();
             const props = this.getProps();
             const pinnedCols = props?.pinnedColumns ?? {};
+            const measuredWidths = this.measuredColumnWidths();
+            const sizingOverrides = this.columnSizingOverrides();
             return cols.map((col, colIdx) => {
                 const isFreezeCol = fc != null && fc >= 1 && colIdx < fc;
                 const runtimePinned = pinnedCols[col.columnId];
                 const pinnedLeft = runtimePinned === 'left' || col.pinned === 'left' || (isFreezeCol && colIdx === 0);
                 const pinnedRight = runtimePinned === 'right' || col.pinned === 'right';
                 const w = this.getColumnWidth(col);
+                // Use previously-measured DOM width as a minWidth floor to prevent columns
+                // from shrinking when new data loads (e.g. server-side pagination).
+                const hasResizeOverride = !!sizingOverrides[col.columnId];
+                const measuredW = measuredWidths[col.columnId];
+                const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+                const effectiveMinWidth = hasResizeOverride ? w : Math.max(baseMinWidth, measuredW ?? 0);
                 return {
                     col,
                     pinnedLeft,
                     pinnedRight,
-                    minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
+                    minWidth: effectiveMinWidth,
                     width: w,
                 };
             });
@@ -181,6 +193,41 @@ export class BaseDataGridTableComponent {
             this.wrapperElSignal.set(wrapper);
         if (tableContainer)
             this.tableContainerElSignal.set(tableContainer);
+        this.measureColumnWidths();
+    }
+    /** Lifecycle hook — re-measure column widths after each view update */
+    ngAfterViewChecked() {
+        this.measureColumnWidths();
+    }
+    /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
+     *  Only updates the signal when values actually change, to avoid render loops. */
+    measureColumnWidths() {
+        const wrapper = this.getWrapperRef()?.nativeElement;
+        if (!wrapper)
+            return;
+        const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+        if (headerCells.length === 0)
+            return;
+        const measured = {};
+        headerCells.forEach((cell) => {
+            const colId = cell.getAttribute('data-column-id');
+            if (colId)
+                measured[colId] = cell.offsetWidth;
+        });
+        // Only update signal if values changed to avoid triggering computed re-evaluations unnecessarily
+        const prev = this.measuredColumnWidths();
+        let changed = Object.keys(measured).length !== Object.keys(prev).length;
+        if (!changed) {
+            for (const key in measured) {
+                if (prev[key] !== measured[key]) {
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (changed) {
+            this.measuredColumnWidths.set(measured);
+        }
     }
     /**
      * Initialize base wiring effects. Must be called from subclass constructor
@@ -236,6 +283,25 @@ export class BaseDataGridTableComponent {
         });
     }
     // --- Helper methods ---
+    /** Lookup effective min-width for a column (includes measured width floor) */
+    getEffectiveMinWidth(col) {
+        const layout = this.columnLayouts().find((l) => l.col.columnId === col.columnId);
+        return layout?.minWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    }
+    /**
+     * Returns derived cell interaction metadata (non-event attributes) for use in templates.
+     * Mirrors React's getCellInteractionProps for the Angular view layer.
+     * Event handlers (mousedown, click, dblclick, contextmenu) are still bound inline in templates.
+     */
+    getCellInteractionProps(descriptor) {
+        return {
+            tabIndex: descriptor.isActive ? 0 : -1,
+            dataRowIndex: descriptor.rowIndex,
+            dataColIndex: descriptor.globalColIndex,
+            dataInRange: descriptor.isInRange ? 'true' : null,
+            role: descriptor.canEditAny ? 'button' : null,
+        };
+    }
     asColumnDef(colDef) {
         return colDef;
     }
@@ -332,6 +398,10 @@ export class BaseDataGridTableComponent {
     }
     onResizeStart(event, col) {
         event.preventDefault();
+        // Clear cell selection before resize (like React) so selection outlines don't persist during drag
+        this.state().interaction.setActiveCell(null);
+        this.state().interaction.setSelectionRange(null);
+        this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
         const startX = event.clientX;
         const startWidth = this.getColumnWidth(col);
         const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;

package/dist/esm/components/base-inline-cell-editor.component.js

@@ -0,0 +1,253 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Input, Output, EventEmitter, signal, computed, ViewChild } from '@angular/core';
+/**
+ * Abstract base class for Angular inline cell editors.
+ * Contains all shared signals, lifecycle hooks, keyboard handlers,
+ * dropdown positioning, and display logic.
+ *
+ * Subclasses only need a @Component decorator with selector + template.
+ */
+export class BaseInlineCellEditorComponent {
+    constructor() {
+        this.commit = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.localValue = signal('');
+        this.highlightedIndex = signal(0);
+        this.selectOptions = signal([]);
+        this.searchText = signal('');
+        this.filteredOptions = computed(() => {
+            const options = this.selectOptions();
+            const search = this.searchText().trim().toLowerCase();
+            if (!search)
+                return options;
+            return options.filter((v) => this.getDisplayText(v).toLowerCase().includes(search));
+        });
+        this._initialized = false;
+    }
+    ngOnInit() {
+        this._initialized = true;
+        this.syncFromInputs();
+    }
+    ngOnChanges() {
+        if (this._initialized) {
+            this.syncFromInputs();
+        }
+    }
+    syncFromInputs() {
+        const v = this.value;
+        this.localValue.set(v != null ? String(v) : '');
+        const col = this.column;
+        if (col?.cellEditorParams?.values) {
+            const vals = col.cellEditorParams.values;
+            this.selectOptions.set(vals);
+            const initialIdx = vals.findIndex((opt) => String(opt) === String(v));
+            this.highlightedIndex.set(Math.max(initialIdx, 0));
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const richSelectInput = this.richSelectInput?.nativeElement;
+            if (richSelectInput) {
+                richSelectInput.focus();
+                richSelectInput.select();
+                this.positionFixedDropdown(this.richSelectWrapper, this.richSelectDropdown);
+                return;
+            }
+            const selectWrap = this.selectWrapper?.nativeElement;
+            if (selectWrap) {
+                selectWrap.focus();
+                this.positionFixedDropdown(this.selectWrapper, this.selectDropdown);
+                return;
+            }
+            const el = this.inputEl?.nativeElement;
+            if (el) {
+                el.focus();
+                if (el instanceof HTMLInputElement && el.type === 'text') {
+                    el.select();
+                }
+            }
+        });
+    }
+    commitValue(value) {
+        this.commit.emit(value);
+    }
+    onTextKeyDown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.commitValue(this.localValue());
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancel.emit();
+        }
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            this.commitValue(this.localValue());
+        }
+    }
+    getDisplayText(value) {
+        const formatValue = this.column?.cellEditorParams?.formatValue;
+        if (formatValue)
+            return formatValue(value);
+        return value != null ? String(value) : '';
+    }
+    onCustomSelectKeyDown(e) {
+        const options = this.selectOptions();
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
+                this.scrollOptionIntoView(this.selectDropdown);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
+                this.scrollOptionIntoView(this.selectDropdown);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                if (options.length > 0 && this.highlightedIndex() < options.length) {
+                    this.commitValue(options[this.highlightedIndex()]);
+                }
+                break;
+            case 'Tab':
+                e.preventDefault();
+                if (options.length > 0 && this.highlightedIndex() < options.length) {
+                    this.commitValue(options[this.highlightedIndex()]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                this.cancel.emit();
+                break;
+        }
+    }
+    onRichSelectSearch(text) {
+        this.searchText.set(text);
+        this.highlightedIndex.set(0);
+    }
+    onRichSelectKeyDown(e) {
+        const options = this.filteredOptions();
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
+                this.scrollOptionIntoView(this.richSelectDropdown);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
+                this.scrollOptionIntoView(this.richSelectDropdown);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                if (options.length > 0 && this.highlightedIndex() < options.length) {
+                    this.commitValue(options[this.highlightedIndex()]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                this.cancel.emit();
+                break;
+        }
+    }
+    onCheckboxKeyDown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancel.emit();
+        }
+    }
+    onTextBlur() {
+        this.commitValue(this.localValue());
+    }
+    getInputStyle() {
+        const baseStyle = 'width:100%;box-sizing:border-box;padding:6px 10px;border:none;outline:none;font:inherit;background:transparent;color:inherit;';
+        const col = this.column;
+        if (col.type === 'numeric') {
+            return baseStyle + 'text-align:right;';
+        }
+        return baseStyle;
+    }
+    /** Position a dropdown using fixed positioning to escape overflow clipping. */
+    positionFixedDropdown(wrapperRef, dropdownRef) {
+        const wrapper = wrapperRef?.nativeElement;
+        const dropdown = dropdownRef?.nativeElement;
+        if (!wrapper || !dropdown)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const maxH = 200;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+        dropdown.style.position = 'fixed';
+        dropdown.style.left = `${rect.left}px`;
+        dropdown.style.width = `${rect.width}px`;
+        dropdown.style.maxHeight = `${maxH}px`;
+        dropdown.style.zIndex = '9999';
+        dropdown.style.right = 'auto';
+        if (flipUp) {
+            dropdown.style.top = 'auto';
+            dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
+        }
+        else {
+            dropdown.style.top = `${rect.bottom}px`;
+        }
+    }
+    /** Scroll the highlighted option into view within a dropdown element. */
+    scrollOptionIntoView(dropdownRef) {
+        setTimeout(() => {
+            const dropdown = dropdownRef?.nativeElement;
+            if (!dropdown)
+                return;
+            const highlighted = dropdown.children[this.highlightedIndex()];
+            highlighted?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+}
+__decorate([
+    Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "value", void 0);
+__decorate([
+    Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "editorType", void 0);
+__decorate([
+    Output()
+], BaseInlineCellEditorComponent.prototype, "commit", void 0);
+__decorate([
+    Output()
+], BaseInlineCellEditorComponent.prototype, "cancel", void 0);
+__decorate([
+    ViewChild('inputEl')
+], BaseInlineCellEditorComponent.prototype, "inputEl", void 0);
+__decorate([
+    ViewChild('selectWrapper')
+], BaseInlineCellEditorComponent.prototype, "selectWrapper", void 0);
+__decorate([
+    ViewChild('selectDropdown')
+], BaseInlineCellEditorComponent.prototype, "selectDropdown", void 0);
+__decorate([
+    ViewChild('richSelectWrapper')
+], BaseInlineCellEditorComponent.prototype, "richSelectWrapper", void 0);
+__decorate([
+    ViewChild('richSelectInput')
+], BaseInlineCellEditorComponent.prototype, "richSelectInput", void 0);
+__decorate([
+    ViewChild('richSelectDropdown')
+], BaseInlineCellEditorComponent.prototype, "richSelectDropdown", void 0);

package/dist/esm/index.js

@@ -19,4 +19,5 @@ export { BaseDataGridTableComponent } from './components/base-datagrid-table.com
 export { BaseColumnHeaderFilterComponent } from './components/base-column-header-filter.component';
 export { BaseColumnChooserComponent } from './components/base-column-chooser.component';
 export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
+export { BaseInlineCellEditorComponent } from './components/base-inline-cell-editor.component';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/esm/services/datagrid-state.service.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Injectable, signal, computed, effect, DestroyRef, inject } from '@angular/core';
-import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, getCellValue, normalizeSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, } from '@alaarab/ogrid-core';
+import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations, getCellValue, normalizeSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, UndoRedoStack, findCtrlArrowTarget, computeTabNavigation, formatSelectionAsTsv, parseTsvClipboard, rangesEqual, } from '@alaarab/ogrid-core';
 /**
  * Single orchestration service for DataGridTable. Takes grid props,
  * returns all derived state and handlers so Angular UI packages can be thin view layers.
@@ -33,10 +33,8 @@ let DataGridStateService = class DataGridStateService {
         this.cutRangeSig = signal(null);
         this.copyRangeSig = signal(null);
         this.internalClipboard = null;
-        // Undo/redo state
-        this.undoHistory = [];
-        this.redoStack = [];
-        this.batch = null;
+        // Undo/redo state (backed by core UndoRedoStack)
+        this.undoRedoStack = new UndoRedoStack(100);
         this.undoLengthSig = signal(0);
         this.redoLengthSig = signal(0);
         // Fill handle state
@@ -70,14 +68,10 @@ let DataGridStateService = class DataGridStateService {
             if (!original)
                 return undefined;
             return (event) => {
-                if (this.batch !== null) {
-                    this.batch.push(event);
-                }
-                else {
-                    this.undoHistory = [...this.undoHistory, [event]].slice(-100);
-                    this.redoStack = [];
-                    this.undoLengthSig.set(this.undoHistory.length);
-                    this.redoLengthSig.set(0);
+                this.undoRedoStack.record(event);
+                if (!this.undoRedoStack.isBatching) {
+                    this.undoLengthSig.set(this.undoRedoStack.historyLength);
+                    this.redoLengthSig.set(this.undoRedoStack.redoLength);
                 }
                 original(event);
             };
@@ -355,11 +349,7 @@ let DataGridStateService = class DataGridStateService {
     }
     setSelectionRange(range) {
         const prev = this.selectionRangeSig();
-        if (prev === range)
-            return;
-        if (prev && range &&
-            prev.startRow === range.startRow && prev.endRow === range.endRow &&
-            prev.startCol === range.startCol && prev.endCol === range.endCol)
+        if (rangesEqual(prev, range))
             return;
         this.selectionRangeSig.set(range);
     }
@@ -459,22 +449,7 @@ let DataGridStateService = class DataGridStateService {
         if (range == null)
             return;
         const norm = normalizeSelectionRange(range);
-        const visibleCols = this.visibleCols();
-        const rows = [];
-        for (let r = norm.startRow; r <= norm.endRow; r++) {
-            const cells = [];
-            for (let c = norm.startCol; c <= norm.endCol; c++) {
-                if (r >= p.items.length || c >= visibleCols.length)
-                    break;
-                const item = p.items[r];
-                const col = visibleCols[c];
-                const raw = getCellValue(item, col);
-                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
-                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
-            }
-            rows.push(cells.join('\t'));
-        }
-        const tsv = rows.join('\r\n');
+        const tsv = formatSelectionAsTsv(p.items, this.visibleCols(), norm);
         this.internalClipboard = tsv;
         this.copyRangeSig.set(norm);
         void navigator.clipboard.writeText(tsv).catch(() => { });
@@ -515,10 +490,10 @@ let DataGridStateService = class DataGridStateService {
         const anchorRow = norm ? norm.startRow : 0;
         const anchorCol = norm ? norm.startCol : 0;
         const visibleCols = this.visibleCols();
-        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        const parsedRows = parseTsvClipboard(text);
         this.beginBatch();
-        for (let r = 0; r < lines.length; r++) {
-            const cells = lines[r].split('\t');
+        for (let r = 0; r < parsedRows.length; r++) {
+            const cells = parsedRows[r];
             for (let c = 0; c < cells.length; c++) {
                 const targetRow = anchorRow + r;
                 const targetCol = anchorCol + c;
@@ -566,28 +541,23 @@ let DataGridStateService = class DataGridStateService {
     }
     // --- Undo/Redo ---
     beginBatch() {
-        this.batch = [];
+        this.undoRedoStack.beginBatch();
     }
     endBatch() {
-        const batch = this.batch;
-        this.batch = null;
-        if (!batch || batch.length === 0)
-            return;
-        this.undoHistory = [...this.undoHistory, batch].slice(-100);
-        this.redoStack = [];
-        this.undoLengthSig.set(this.undoHistory.length);
-        this.redoLengthSig.set(0);
+        this.undoRedoStack.endBatch();
+        this.undoLengthSig.set(this.undoRedoStack.historyLength);
+        this.redoLengthSig.set(this.undoRedoStack.redoLength);
     }
     undo() {
         const p = this.props();
         const original = p?.onCellValueChanged;
-        if (!original || this.undoHistory.length === 0)
+        if (!original)
+            return;
+        const lastBatch = this.undoRedoStack.undo();
+        if (!lastBatch)
             return;
-        const lastBatch = this.undoHistory[this.undoHistory.length - 1];
-        this.undoHistory = this.undoHistory.slice(0, -1);
-        this.redoStack = [...this.redoStack, lastBatch];
-        this.undoLengthSig.set(this.undoHistory.length);
-        this.redoLengthSig.set(this.redoStack.length);
+        this.undoLengthSig.set(this.undoRedoStack.historyLength);
+        this.redoLengthSig.set(this.undoRedoStack.redoLength);
         for (let i = lastBatch.length - 1; i >= 0; i--) {
             const ev = lastBatch[i];
             original({ ...ev, oldValue: ev.newValue, newValue: ev.oldValue });
@@ -596,13 +566,13 @@ let DataGridStateService = class DataGridStateService {
     redo() {
         const p = this.props();
         const original = p?.onCellValueChanged;
-        if (!original || this.redoStack.length === 0)
+        if (!original)
             return;
-        const nextBatch = this.redoStack[this.redoStack.length - 1];
-        this.redoStack = this.redoStack.slice(0, -1);
-        this.undoHistory = [...this.undoHistory, nextBatch];
-        this.redoLengthSig.set(this.redoStack.length);
-        this.undoLengthSig.set(this.undoHistory.length);
+        const nextBatch = this.undoRedoStack.redo();
+        if (!nextBatch)
+            return;
+        this.undoLengthSig.set(this.undoRedoStack.historyLength);
+        this.redoLengthSig.set(this.undoRedoStack.redoLength);
         for (const ev of nextBatch) {
             original(ev);
         }
@@ -645,27 +615,7 @@ let DataGridStateService = class DataGridStateService {
             const v = getCellValue(items[r], visibleCols[c]);
             return v == null || v === '';
         };
-        const findCtrlTarget = (pos, edge, step, isEmpty) => {
-            if (pos === edge)
-                return pos;
-            const next = pos + step;
-            if (!isEmpty(pos) && !isEmpty(next)) {
-                let p = next;
-                while (p !== edge) {
-                    if (isEmpty(p + step))
-                        return p;
-                    p += step;
-                }
-                return edge;
-            }
-            let pp = next;
-            while (pp !== edge) {
-                if (!isEmpty(pp))
-                    return pp;
-                pp += step;
-            }
-            return edge;
-        };
+        const findCtrlTarget = findCtrlArrowTarget;
         switch (e.key) {
             case 'c':
                 if (ctrl) {
@@ -779,29 +729,10 @@ let DataGridStateService = class DataGridStateService {
             }
             case 'Tab': {
                 e.preventDefault();
-                let newRowTab = rowIndex;
-                let newColTab = columnIndex;
-                if (e.shiftKey) {
-                    if (columnIndex > colOffset) {
-                        newColTab = columnIndex - 1;
-                    }
-                    else if (rowIndex > 0) {
-                        newRowTab = rowIndex - 1;
-                        newColTab = maxColIndex;
-                    }
-                }
-                else {
-                    if (columnIndex < maxColIndex) {
-                        newColTab = columnIndex + 1;
-                    }
-                    else if (rowIndex < maxRowIndex) {
-                        newRowTab = rowIndex + 1;
-                        newColTab = colOffset;
-                    }
-                }
-                const newDataColTab = newColTab - colOffset;
-                this.setSelectionRange({ startRow: newRowTab, startCol: newDataColTab, endRow: newRowTab, endCol: newDataColTab });
-                this.setActiveCell({ rowIndex: newRowTab, columnIndex: newColTab });
+                const tabResult = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
+                const newDataColTab = tabResult.columnIndex - colOffset;
+                this.setSelectionRange({ startRow: tabResult.rowIndex, startCol: newDataColTab, endRow: tabResult.rowIndex, endCol: newDataColTab });
+                this.setActiveCell({ rowIndex: tabResult.rowIndex, columnIndex: tabResult.columnIndex });
                 break;
             }
             case 'Home': {

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -19,6 +19,10 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly virtualScrollService: VirtualScrollService;
     protected lastMouseShift: boolean;
     readonly columnSizingVersion: import("@angular/core").WritableSignal<number>;
+    /** DOM-measured column widths from the last layout pass.
+     *  Used as a minWidth floor to prevent columns from shrinking
+     *  when new data loads (e.g. server-side pagination). */
+    readonly measuredColumnWidths: import("@angular/core").WritableSignal<Record<string, number>>;
     protected readonly wrapperElSignal: import("@angular/core").WritableSignal<HTMLElement | null>;
     protected readonly tableContainerElSignal: import("@angular/core").WritableSignal<HTMLElement | null>;
     /** Return the IOGridDataGridProps from however the subclass receives them */
@@ -29,6 +33,11 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     protected abstract getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     /** Lifecycle hook — populate element signals from @ViewChild refs */
     ngAfterViewInit(): void;
+    /** Lifecycle hook — re-measure column widths after each view update */
+    ngAfterViewChecked(): void;
+    /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
+     *  Only updates the signal when values actually change, to avoid render loops. */
+    private measureColumnWidths;
     readonly state: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridStateResult<T>>;
     readonly tableContainerEl: import("@angular/core").Signal<HTMLElement | null>;
     readonly allItems: import("@angular/core").Signal<T[]>;
@@ -138,6 +147,26 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
      * (effects need to run inside an injection context).
      */
     protected initBase(): void;
+    /** Lookup effective min-width for a column (includes measured width floor) */
+    getEffectiveMinWidth(col: IColumnDef<T>): number;
+    /**
+     * Returns derived cell interaction metadata (non-event attributes) for use in templates.
+     * Mirrors React's getCellInteractionProps for the Angular view layer.
+     * Event handlers (mousedown, click, dblclick, contextmenu) are still bound inline in templates.
+     */
+    getCellInteractionProps(descriptor: {
+        isActive: boolean;
+        isInRange: boolean;
+        canEditAny: boolean;
+        globalColIndex: number;
+        rowIndex: number;
+    }): {
+        tabIndex: number;
+        dataRowIndex: number;
+        dataColIndex: number;
+        dataInRange: string | null;
+        role: string | null;
+    };
     asColumnDef(colDef: unknown): IColumnDef<T>;
     visibleColIndex(col: IColumnDef<T>): number;
     getColumnWidth(col: IColumnDef<T>): number;

package/dist/types/components/base-inline-cell-editor.component.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter, ElementRef } from '@angular/core';
+import type { IColumnDef } from '@alaarab/ogrid-core';
+/**
+ * Abstract base class for Angular inline cell editors.
+ * Contains all shared signals, lifecycle hooks, keyboard handlers,
+ * dropdown positioning, and display logic.
+ *
+ * Subclasses only need a @Component decorator with selector + template.
+ */
+export declare abstract class BaseInlineCellEditorComponent<T = unknown> {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox' | 'date' | 'richSelect';
+    commit: EventEmitter<unknown>;
+    cancel: EventEmitter<void>;
+    inputEl?: ElementRef<HTMLInputElement | HTMLSelectElement>;
+    selectWrapper?: ElementRef<HTMLDivElement>;
+    selectDropdown?: ElementRef<HTMLDivElement>;
+    richSelectWrapper?: ElementRef<HTMLDivElement>;
+    richSelectInput?: ElementRef<HTMLInputElement>;
+    richSelectDropdown?: ElementRef<HTMLDivElement>;
+    readonly localValue: import("@angular/core").WritableSignal<unknown>;
+    readonly highlightedIndex: import("@angular/core").WritableSignal<number>;
+    readonly selectOptions: import("@angular/core").WritableSignal<unknown[]>;
+    readonly searchText: import("@angular/core").WritableSignal<string>;
+    readonly filteredOptions: import("@angular/core").Signal<unknown[]>;
+    private _initialized;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    private syncFromInputs;
+    ngAfterViewInit(): void;
+    commitValue(value: unknown): void;
+    onTextKeyDown(e: KeyboardEvent): void;
+    getDisplayText(value: unknown): string;
+    onCustomSelectKeyDown(e: KeyboardEvent): void;
+    onRichSelectSearch(text: string): void;
+    onRichSelectKeyDown(e: KeyboardEvent): void;
+    onCheckboxKeyDown(e: KeyboardEvent): void;
+    onTextBlur(): void;
+    getInputStyle(): string;
+    /** Position a dropdown using fixed positioning to escape overflow clipping. */
+    protected positionFixedDropdown(wrapperRef: ElementRef<HTMLDivElement> | undefined, dropdownRef: ElementRef<HTMLDivElement> | undefined): void;
+    /** Scroll the highlighted option into view within a dropdown element. */
+    protected scrollOptionIntoView(dropdownRef: ElementRef<HTMLDivElement> | undefined): void;
+}

package/dist/types/index.d.ts

@@ -23,5 +23,6 @@ export type { IColumnHeaderFilterProps } from './components/base-column-header-f
 export { BaseColumnChooserComponent } from './components/base-column-chooser.component';
 export type { IColumnChooserProps } from './components/base-column-chooser.component';
 export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
+export { BaseInlineCellEditorComponent } from './components/base-inline-cell-editor.component';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './utils';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/types/services/datagrid-state.service.d.ts

@@ -167,9 +167,7 @@ export declare class DataGridStateService<T> {
     private readonly cutRangeSig;
     private readonly copyRangeSig;
     private internalClipboard;
-    private undoHistory;
-    private redoStack;
-    private batch;
+    private readonly undoRedoStack;
     private readonly undoLengthSig;
     private readonly redoLengthSig;
     private fillDragStart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.14"
+    "@alaarab/ogrid-core": "2.0.15"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",