@alaarab/ogrid-angular 2.1.3 → 2.1.5

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

@@ -1,648 +0,0 @@
-import { signal, computed, effect, inject } from '@angular/core';
-import { DataGridStateService } from '../services/datagrid-state.service';
-import { ColumnReorderService } from '../services/column-reorder.service';
-import { VirtualScrollService } from '../services/virtual-scroll.service';
-import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, measureColumnContentWidth, } from '@alaarab/ogrid-core';
-import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, } from '../utils';
-/**
- * Abstract base class containing all shared TypeScript logic for DataGridTable components.
- * Framework-specific UI packages extend this with their templates and style overrides.
- *
- * Subclasses must:
- * 1. Provide a @Component decorator with template and styles
- * 2. Call `initBase()` in the constructor (effects require injection context)
- * 3. Implement abstract accessors for propsInput, wrapperRef, and tableContainerRef
- */
-export class BaseDataGridTableComponent {
-    constructor() {
-        this.stateService = inject(DataGridStateService);
-        this.columnReorderService = inject(ColumnReorderService);
-        this.virtualScrollService = inject(VirtualScrollService);
-        this.lastMouseShift = false;
-        this.columnSizingVersion = signal(0);
-        /** Dirty flag — set when column layout changes, cleared after measurement. */
-        this.measureDirty = signal(true);
-        /** 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.
-        this.wrapperElSignal = signal(null);
-        this.tableContainerElSignal = signal(null);
-        // --- Delegated state ---
-        this.state = computed(() => this.stateService.getState());
-        // Intermediate computed signals — narrow slices of state() so leaf computeds
-        // only recompute when their specific sub-state changes.
-        this.layoutState = computed(() => this.state().layout);
-        this.rowSelectionState = computed(() => this.state().rowSelection);
-        this.editingState = computed(() => this.state().editing);
-        this.interactionState = computed(() => this.state().interaction);
-        this.contextMenuState = computed(() => this.state().contextMenu);
-        this.viewModelsState = computed(() => this.state().viewModels);
-        this.pinningState = computed(() => this.state().pinning);
-        this.tableContainerEl = computed(() => this.tableContainerElSignal());
-        this.items = computed(() => this.getProps()?.items ?? []);
-        this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item['id']));
-        this.isLoading = computed(() => this.getProps()?.isLoading ?? false);
-        this.loadingMessage = computed(() => 'Loading\u2026');
-        this.layoutModeFit = computed(() => (this.getProps()?.layoutMode ?? 'fill') === 'content');
-        this.rowHeightCssVar = computed(() => {
-            const rh = this.getProps()?.rowHeight;
-            return rh ? `${rh}px` : null;
-        });
-        this.ariaLabel = computed(() => this.getProps()?.['aria-label'] ?? 'Data grid');
-        this.ariaLabelledBy = computed(() => this.getProps()?.['aria-labelledby']);
-        this.stickyHeader = computed(() => this.getProps()?.stickyHeader ?? true);
-        this.emptyState = computed(() => this.getProps()?.emptyState);
-        this.currentPage = computed(() => this.getProps()?.currentPage ?? 1);
-        this.pageSize = computed(() => this.getProps()?.pageSize ?? 25);
-        this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0);
-        this.propsVisibleColumns = computed(() => this.getProps()?.visibleColumns);
-        this.propsColumnOrder = computed(() => this.getProps()?.columnOrder);
-        // State service outputs — read from narrow intermediate signals
-        this.visibleCols = computed(() => this.layoutState().visibleCols);
-        this.hasCheckboxCol = computed(() => this.layoutState().hasCheckboxCol);
-        this.hasRowNumbersCol = computed(() => this.layoutState().hasRowNumbersCol);
-        this.colOffset = computed(() => this.layoutState().colOffset);
-        this.containerWidth = computed(() => this.layoutState().containerWidth);
-        this.minTableWidth = computed(() => this.layoutState().minTableWidth);
-        this.desiredTableWidth = computed(() => this.layoutState().desiredTableWidth);
-        this.columnSizingOverrides = computed(() => this.layoutState().columnSizingOverrides);
-        this.selectedRowIds = computed(() => this.rowSelectionState().selectedRowIds);
-        this.allSelected = computed(() => this.rowSelectionState().allSelected);
-        this.someSelected = computed(() => this.rowSelectionState().someSelected);
-        this.editingCell = computed(() => this.editingState().editingCell);
-        this.pendingEditorValue = computed(() => this.editingState().pendingEditorValue);
-        this.activeCell = computed(() => this.interactionState().activeCell);
-        this.selectionRange = computed(() => this.interactionState().selectionRange);
-        this.hasCellSelection = computed(() => this.interactionState().hasCellSelection);
-        this.cutRange = computed(() => this.interactionState().cutRange);
-        this.copyRange = computed(() => this.interactionState().copyRange);
-        this.canUndo = computed(() => this.interactionState().canUndo);
-        this.canRedo = computed(() => this.interactionState().canRedo);
-        this.isDragging = computed(() => this.interactionState().isDragging);
-        this.menuPosition = computed(() => this.contextMenuState().menuPosition);
-        this.statusBarConfig = computed(() => this.viewModelsState().statusBarConfig);
-        this.showEmptyInGrid = computed(() => this.viewModelsState().showEmptyInGrid);
-        this.headerFilterInput = computed(() => this.viewModelsState().headerFilterInput);
-        this.cellDescriptorInput = computed(() => this.viewModelsState().cellDescriptorInput);
-        // Pinning state
-        this.pinnedColumnsMap = computed(() => this.pinningState().pinnedColumns);
-        // Virtual scrolling
-        this.vsEnabled = computed(() => this.virtualScrollService.isActive());
-        this.vsVisibleRange = computed(() => this.virtualScrollService.visibleRange());
-        this.vsTopSpacerHeight = computed(() => {
-            if (!this.vsEnabled())
-                return 0;
-            return this.vsVisibleRange().offsetTop;
-        });
-        this.vsBottomSpacerHeight = computed(() => {
-            if (!this.vsEnabled())
-                return 0;
-            return this.vsVisibleRange().offsetBottom;
-        });
-        this.vsVisibleItems = computed(() => {
-            const items = this.items();
-            if (!this.vsEnabled())
-                return items;
-            const range = this.vsVisibleRange();
-            return items.slice(range.startIndex, Math.min(range.endIndex + 1, items.length));
-        });
-        this.vsStartIndex = computed(() => {
-            if (!this.vsEnabled())
-                return 0;
-            return this.vsVisibleRange().startIndex;
-        });
-        // Popover editing
-        this.popoverAnchorEl = computed(() => this.editingState().popoverAnchorEl);
-        this.pendingEditorValueForPopover = computed(() => this.editingState().pendingEditorValue);
-        this.allowOverflowX = computed(() => {
-            const p = this.getProps();
-            if (p?.suppressHorizontalScroll)
-                return false;
-            const cw = this.containerWidth();
-            const mtw = this.minTableWidth();
-            const dtw = this.desiredTableWidth();
-            return cw > 0 && (mtw > cw || dtw > cw);
-        });
-        this.selectionCellCount = computed(() => {
-            const sr = this.selectionRange();
-            if (!sr)
-                return undefined;
-            return (Math.abs(sr.endRow - sr.startRow) + 1) * (Math.abs(sr.endCol - sr.startCol) + 1);
-        });
-        // Header rows from column definition
-        this.headerRows = computed(() => {
-            const p = this.getProps();
-            if (!p)
-                return [];
-            return buildHeaderRows(p.columns, p.visibleColumns);
-        });
-        // Pre-computed column layouts
-        this.columnLayouts = computed(() => {
-            const cols = this.visibleCols();
-            const props = this.getProps();
-            const pinnedCols = props?.pinnedColumns ?? {};
-            const measuredWidths = this.measuredColumnWidths();
-            const sizingOverrides = this.columnSizingOverrides();
-            return cols.map((col) => {
-                const runtimePinned = pinnedCols[col.columnId];
-                const pinnedLeft = runtimePinned === 'left' || col.pinned === 'left';
-                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: effectiveMinWidth,
-                    width: w,
-                };
-            });
-        });
-        // Compute sticky offsets for pinned columns (single pass from both ends)
-        this.pinningOffsets = computed(() => {
-            const layouts = this.columnLayouts();
-            const leftOffsets = {};
-            const rightOffsets = {};
-            let leftAcc = 0;
-            if (this.hasCheckboxCol())
-                leftAcc += CHECKBOX_COLUMN_WIDTH;
-            if (this.hasRowNumbersCol())
-                leftAcc += ROW_NUMBER_COLUMN_WIDTH;
-            let rightAcc = 0;
-            const len = layouts.length;
-            for (let i = 0; i < len; i++) {
-                // Left-pinned: walk forward
-                const leftLayout = layouts[i];
-                if (leftLayout.pinnedLeft) {
-                    leftOffsets[leftLayout.col.columnId] = leftAcc;
-                    leftAcc += leftLayout.width + CELL_PADDING;
-                }
-                // Right-pinned: walk backward
-                const ri = len - 1 - i;
-                const rightLayout = layouts[ri];
-                if (rightLayout.pinnedRight) {
-                    rightOffsets[rightLayout.col.columnId] = rightAcc;
-                    rightAcc += rightLayout.width + CELL_PADDING;
-                }
-            }
-            return { leftOffsets, rightOffsets };
-        });
-        /** Memoized column menu handlers — avoids recreating objects on every CD cycle */
-        this.columnMenuHandlersMap = computed(() => {
-            const cols = this.visibleCols();
-            const map = new Map();
-            for (const col of cols) {
-                map.set(col.columnId, this.buildColumnMenuHandlers(col.columnId));
-            }
-            return map;
-        });
-    }
-    /** Lifecycle hook — populate element signals from @ViewChild refs */
-    ngAfterViewInit() {
-        const wrapper = this.getWrapperRef()?.nativeElement ?? null;
-        const tableContainer = this.getTableContainerRef()?.nativeElement ?? null;
-        if (wrapper)
-            this.wrapperElSignal.set(wrapper);
-        if (tableContainer)
-            this.tableContainerElSignal.set(tableContainer);
-        this.measureColumnWidths();
-    }
-    /** Lifecycle hook — re-measure column widths only when layout changed */
-    ngAfterViewChecked() {
-        if (this.measureDirty()) {
-            this.measureDirty.set(false);
-            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.
-     *
-     * **Timing:** Angular requires `effect()` to be created inside an injection
-     * context (constructor or field initializer). On the first run, signals like
-     * `wrapperElSignal()` return `null` because the DOM hasn't been created yet.
-     * After `ngAfterViewInit` sets these signals, Angular's signal graph
-     * automatically re-runs each effect. The null guards inside each effect body
-     * ensure the first (null) run is a safe no-op.
-     *
-     * Sequence:
-     *   1. Constructor → `initBase()` → effects created, first run (signals null → no-ops)
-     *   2. `ngAfterViewInit` → `wrapperElSignal.set(el)` → effects re-run with real values
-     */
-    initBase() {
-        // Wire props to state service
-        effect(() => {
-            const p = this.getProps();
-            if (p)
-                this.stateService.props.set(p);
-        });
-        // Wire wrapper element (reads from signal populated by ngAfterViewInit)
-        effect(() => {
-            const el = this.wrapperElSignal();
-            if (el) {
-                this.stateService.wrapperEl.set(el);
-                this.columnReorderService.wrapperEl.set(el);
-            }
-        });
-        // Wire column reorder service inputs
-        effect(() => {
-            const p = this.getProps();
-            if (p) {
-                const cols = this.visibleCols();
-                this.columnReorderService.columns.set(cols);
-                this.columnReorderService.columnOrder.set(p.columnOrder);
-                this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
-                this.columnReorderService.enabled.set(p.columnReorder === true);
-            }
-        });
-        // Mark measurement dirty when column layout changes
-        effect(() => {
-            // Track signals that affect column layout
-            this.visibleCols();
-            this.columnSizingOverrides();
-            this.columnSizingVersion();
-            this.measureDirty.set(true);
-        });
-        // Wire virtual scroll service inputs
-        effect(() => {
-            const p = this.getProps();
-            if (p) {
-                this.virtualScrollService.totalRows.set(p.items.length);
-                if (p.virtualScroll) {
-                    this.virtualScrollService.updateConfig({
-                        enabled: p.virtualScroll.enabled,
-                        rowHeight: p.virtualScroll.rowHeight,
-                        overscan: p.virtualScroll.overscan,
-                    });
-                }
-            }
-        });
-        // Wire wrapper element to virtual scroll for scroll events + container height
-        effect(() => {
-            const el = this.wrapperElSignal();
-            if (el) {
-                this.virtualScrollService.setContainer(el);
-                this.virtualScrollService.containerHeight.set(el.clientHeight);
-            }
-        });
-    }
-    // --- 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;
-    }
-    visibleColIndex(col) {
-        return this.visibleCols().indexOf(col);
-    }
-    getColumnWidth(col) {
-        const overrides = this.columnSizingOverrides();
-        const override = overrides[col.columnId];
-        if (override)
-            return override.widthPx;
-        return col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-    }
-    getFilterConfig(col) {
-        return getHeaderFilterConfig(col, this.headerFilterInput());
-    }
-    /** Build column menu handler object for a single column */
-    buildColumnMenuHandlers(columnId) {
-        return {
-            onPinLeft: () => this.onPinColumn(columnId, 'left'),
-            onPinRight: () => this.onPinColumn(columnId, 'right'),
-            onUnpin: () => this.onUnpinColumn(columnId),
-            onSortAsc: () => this.onSortAsc(columnId),
-            onSortDesc: () => this.onSortDesc(columnId),
-            onClearSort: () => this.onClearSort(columnId),
-            onAutosizeThis: () => this.onAutosizeColumn(columnId),
-            onAutosizeAll: () => this.onAutosizeAllColumns(),
-            onClose: () => { }
-        };
-    }
-    /** Get memoized handlers for a column */
-    getColumnMenuHandlersMemoized(columnId) {
-        return this.columnMenuHandlersMap().get(columnId) ?? this.buildColumnMenuHandlers(columnId);
-    }
-    getCellDescriptor(item, col, rowIndex, colIdx) {
-        return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
-    }
-    resolveCellContent(col, item, displayValue) {
-        return resolveCellDisplayContent(col, item, displayValue);
-    }
-    resolveCellStyleFn(col, item) {
-        return resolveCellStyle(col, item);
-    }
-    buildPopoverEditorProps(item, col, descriptor) {
-        return buildPopoverEditorProps(item, col, descriptor, this.pendingEditorValue(), {
-            setPendingEditorValue: (value) => this.setPendingEditorValue(value),
-            commitCellEdit: (item, columnId, oldValue, newValue, rowIndex, globalColIndex) => this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex),
-            cancelPopoverEdit: () => this.cancelPopoverEdit(),
-        });
-    }
-    /** Check if a specific cell is the active cell (PrimeNG inline template helper). */
-    isActiveCell(rowIndex, colIdx) {
-        const ac = this.activeCell();
-        if (!ac)
-            return false;
-        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.colOffset();
-    }
-    /** Check if a cell is within the current selection range (PrimeNG inline template helper). */
-    isInSelectionRange(rowIndex, colIdx) {
-        const range = this.selectionRange();
-        if (!range)
-            return false;
-        const minR = Math.min(range.startRow, range.endRow);
-        const maxR = Math.max(range.startRow, range.endRow);
-        const minC = Math.min(range.startCol, range.endCol);
-        const maxC = Math.max(range.startCol, range.endCol);
-        return rowIndex >= minR && rowIndex <= maxR && colIdx >= minC && colIdx <= maxC;
-    }
-    /** Check if a cell is the selection end cell for fill handle display. */
-    isSelectionEndCell(rowIndex, colIdx) {
-        const range = this.selectionRange();
-        if (!range || this.isDragging() || this.copyRange() || this.cutRange())
-            return false;
-        return rowIndex === range.endRow && colIdx === range.endCol;
-    }
-    /** Get cell background color based on selection state. */
-    getCellBackground(rowIndex, colIdx) {
-        if (this.isInSelectionRange(rowIndex, colIdx))
-            return 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))';
-        return null;
-    }
-    /** Resolve editor type from column definition. */
-    getEditorType(col, _item) {
-        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'date' || col.cellEditor === 'richSelect') {
-            return col.cellEditor;
-        }
-        if (col.type === 'date')
-            return 'date';
-        if (col.type === 'boolean')
-            return 'checkbox';
-        return 'text';
-    }
-    getSelectValues(col) {
-        const params = col.cellEditorParams;
-        if (params && typeof params === 'object' && 'values' in params) {
-            return params.values.map(String);
-        }
-        return [];
-    }
-    formatDateForInput(value) {
-        if (!value)
-            return '';
-        const d = new Date(String(value));
-        if (Number.isNaN(d.getTime()))
-            return '';
-        return d.toISOString().split('T')[0];
-    }
-    getPinnedLeftOffset(columnId) {
-        const offsets = this.pinningOffsets();
-        return offsets.leftOffsets[columnId] ?? null;
-    }
-    getPinnedRightOffset(columnId) {
-        const offsets = this.pinningOffsets();
-        return offsets.rightOffsets[columnId] ?? null;
-    }
-    // --- Virtual scroll event handler ---
-    onWrapperScroll(event) {
-        this.virtualScrollService.onScroll(event);
-    }
-    // --- Popover editor helpers ---
-    setPopoverAnchorEl(el) {
-        this.state().editing.setPopoverAnchorEl(el);
-    }
-    setPendingEditorValue(value) {
-        this.state().editing.setPendingEditorValue(value);
-    }
-    cancelPopoverEdit() {
-        this.state().editing.cancelPopoverEdit();
-    }
-    commitPopoverEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
-        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
-    }
-    // --- Event handlers ---
-    onWrapperMouseDown(event) {
-        this.lastMouseShift = event.shiftKey;
-    }
-    onGridKeyDown(event) {
-        this.state().interaction.handleGridKeyDown(event);
-    }
-    onCellMouseDown(event, rowIndex, globalColIndex) {
-        this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
-    }
-    onCellClick(rowIndex, globalColIndex) {
-        this.state().interaction.setActiveCell?.({ rowIndex, columnIndex: globalColIndex });
-    }
-    onCellContextMenu(event) {
-        this.state().contextMenu.handleCellContextMenu(event);
-    }
-    onCellDblClick(rowId, columnId) {
-        this.state().editing.setEditingCell({ rowId, columnId });
-    }
-    onFillHandleMouseDown(event) {
-        this.state().interaction.handleFillHandleMouseDown?.(event);
-    }
-    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;
-        const onMove = (e) => {
-            const delta = e.clientX - startX;
-            const newWidth = Math.max(minWidth, startWidth + delta);
-            const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
-            this.state().layout.setColumnSizingOverrides(overrides);
-            this.columnSizingVersion.update(v => v + 1);
-        };
-        const onUp = () => {
-            window.removeEventListener('mousemove', onMove);
-            window.removeEventListener('mouseup', onUp);
-            const finalWidth = this.getColumnWidth(col);
-            this.state().layout.onColumnResized?.(col.columnId, finalWidth);
-        };
-        window.addEventListener('mousemove', onMove);
-        window.addEventListener('mouseup', onUp);
-    }
-    onSelectAllChange(event) {
-        const checked = event.target.checked;
-        this.state().rowSelection.handleSelectAll(!!checked);
-    }
-    onRowClick(event, rowId) {
-        const p = this.getProps();
-        if (p?.rowSelection !== 'single')
-            return;
-        const ids = this.selectedRowIds();
-        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
-    }
-    onRowCheckboxChange(rowId, event, rowIndex) {
-        const checked = event.target.checked;
-        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
-    }
-    commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
-        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
-    }
-    cancelEdit() {
-        this.state().editing.setEditingCell(null);
-    }
-    onEditorKeydown(event, item, columnId, oldValue, rowIndex, globalColIndex) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const newValue = event.target.value;
-            this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
-        }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            this.cancelEdit();
-        }
-    }
-    closeContextMenu() {
-        this.state().contextMenu.closeContextMenu();
-    }
-    handleCopy() {
-        this.state().interaction.handleCopy();
-    }
-    handleCut() {
-        this.state().interaction.handleCut();
-    }
-    handlePaste() {
-        void this.state().interaction.handlePaste();
-    }
-    handleSelectAllCells() {
-        this.state().interaction.handleSelectAllCells();
-    }
-    onUndo() {
-        this.state().interaction.onUndo?.();
-    }
-    onRedo() {
-        this.state().interaction.onRedo?.();
-    }
-    onHeaderMouseDown(columnId, event) {
-        this.columnReorderService.handleHeaderMouseDown(columnId, event);
-    }
-    // --- Column pinning methods ---
-    onPinColumn(columnId, side) {
-        this.state().pinning.pinColumn(columnId, side);
-    }
-    onUnpinColumn(columnId) {
-        this.state().pinning.unpinColumn(columnId);
-    }
-    isPinned(columnId) {
-        return this.state().pinning.isPinned(columnId);
-    }
-    getPinState(columnId) {
-        const pinned = this.isPinned(columnId);
-        return {
-            canPinLeft: pinned !== 'left',
-            canPinRight: pinned !== 'right',
-            canUnpin: !!pinned,
-        };
-    }
-    // --- Column sorting methods ---
-    onSortAsc(columnId) {
-        const props = this.getProps();
-        props?.onColumnSort?.(columnId, 'asc');
-    }
-    onSortDesc(columnId) {
-        const props = this.getProps();
-        props?.onColumnSort?.(columnId, 'desc');
-    }
-    onClearSort(columnId) {
-        const props = this.getProps();
-        const col = columnId ?? props?.sortBy;
-        if (col) {
-            props?.onColumnSort?.(col, null);
-        }
-    }
-    getSortState(columnId) {
-        const props = this.getProps();
-        if (props?.sortBy === columnId) {
-            return props.sortDirection ?? 'asc';
-        }
-        return null;
-    }
-    // --- Column autosize methods ---
-    onAutosizeColumn(columnId) {
-        const col = this.visibleCols().find((c) => c.columnId === columnId);
-        if (!col)
-            return;
-        const width = measureColumnContentWidth(columnId, col.minWidth, this.tableContainerEl() ?? undefined);
-        this.state().layout.setColumnSizingOverrides({
-            ...this.columnSizingOverrides(),
-            [columnId]: { widthPx: width },
-        });
-        (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(columnId, width);
-    }
-    onAutosizeAllColumns() {
-        const tableEl = this.tableContainerEl() ?? undefined;
-        const overrides = {};
-        for (const col of this.visibleCols()) {
-            const width = measureColumnContentWidth(col.columnId, col.minWidth, tableEl);
-            overrides[col.columnId] = { widthPx: width };
-            (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(col.columnId, width);
-        }
-        this.state().layout.setColumnSizingOverrides({
-            ...this.columnSizingOverrides(),
-            ...overrides,
-        });
-    }
-}