@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/renderer/TableRenderer.js

@@ -0,0 +1,414 @@
+import { getCellValue, buildHeaderRows, isInSelectionRange } from '@alaarab/ogrid-core';
+const CHECKBOX_COL_WIDTH = 40;
+export class TableRenderer {
+    constructor(container, state) {
+        this.table = null;
+        this.thead = null;
+        this.tbody = null;
+        this.interactionState = null;
+        this.wrapperEl = null;
+        this.headerFilterState = null;
+        this.filterConfigs = new Map();
+        this.onFilterIconClick = null;
+        this.container = container;
+        this.state = state;
+    }
+    setHeaderFilterState(state, configs) {
+        this.headerFilterState = state;
+        this.filterConfigs = configs;
+    }
+    setOnFilterIconClick(handler) {
+        this.onFilterIconClick = handler;
+    }
+    setInteractionState(state) {
+        this.interactionState = state;
+    }
+    getWrapperElement() {
+        return this.wrapperEl;
+    }
+    /** Full render — creates the table structure from scratch. */
+    render() {
+        // Clear container
+        this.container.innerHTML = '';
+        // Create wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'ogrid-wrapper';
+        wrapper.setAttribute('role', 'grid');
+        wrapper.setAttribute('tabindex', '0'); // Make focusable for keyboard nav
+        wrapper.style.position = 'relative'; // For MarchingAnts absolute positioning
+        const ariaLabel = this.state._ariaLabel;
+        if (ariaLabel) {
+            wrapper.setAttribute('aria-label', ariaLabel);
+        }
+        this.wrapperEl = wrapper;
+        // Create table
+        this.table = document.createElement('table');
+        this.table.className = 'ogrid-table';
+        // Render header
+        this.thead = document.createElement('thead');
+        this.renderHeader();
+        this.table.appendChild(this.thead);
+        // Render body
+        this.tbody = document.createElement('tbody');
+        this.renderBody();
+        this.table.appendChild(this.tbody);
+        wrapper.appendChild(this.table);
+        this.container.appendChild(wrapper);
+    }
+    /** Re-render body rows and header (after sort/filter/page change). */
+    update() {
+        if (!this.tbody || !this.thead) {
+            this.render();
+            return;
+        }
+        this.thead.innerHTML = '';
+        this.renderHeader();
+        this.tbody.innerHTML = '';
+        this.renderBody();
+    }
+    hasCheckboxColumn() {
+        const mode = this.interactionState?.rowSelectionMode;
+        return mode === 'single' || mode === 'multiple';
+    }
+    /** The column index offset for data columns (1 if checkbox column present, else 0). */
+    getColOffset() {
+        return this.hasCheckboxColumn() ? 1 : 0;
+    }
+    applyPinningStyles(el, columnId, isHeader) {
+        const is = this.interactionState;
+        if (!is?.pinnedColumns)
+            return;
+        const side = is.pinnedColumns[columnId];
+        if (!side)
+            return;
+        el.style.position = 'sticky';
+        el.style.zIndex = isHeader ? '3' : '1';
+        el.setAttribute('data-pinned', side);
+        if (side === 'left' && is.leftOffsets) {
+            el.style.left = `${is.leftOffsets[columnId] ?? 0}px`;
+        }
+        else if (side === 'right' && is.rightOffsets) {
+            el.style.right = `${is.rightOffsets[columnId] ?? 0}px`;
+        }
+        // Background must be set on pinned cells to avoid showing content underneath
+        if (!isHeader) {
+            el.style.backgroundColor = el.style.backgroundColor || '#fff';
+        }
+    }
+    renderHeader() {
+        if (!this.thead)
+            return;
+        this.thead.innerHTML = '';
+        const visibleCols = this.state.visibleColumnDefs;
+        const hasCheckbox = this.hasCheckboxColumn();
+        // buildHeaderRows expects core column types - cast through unknown
+        const headerRows = buildHeaderRows(this.state.allColumns, this.state.visibleColumns);
+        // If we have grouped headers (more than 1 row), render all rows
+        if (headerRows.length > 1) {
+            for (const row of headerRows) {
+                const tr = document.createElement('tr');
+                if (hasCheckbox) {
+                    const th = document.createElement('th');
+                    th.className = 'ogrid-header-cell ogrid-checkbox-header';
+                    th.style.width = `${CHECKBOX_COL_WIDTH}px`;
+                    // Select-all checkbox only on last header row
+                    if (row === headerRows[headerRows.length - 1]) {
+                        this.appendSelectAllCheckbox(th);
+                    }
+                    tr.appendChild(th);
+                }
+                for (const cell of row) {
+                    const th = document.createElement('th');
+                    th.textContent = cell.label;
+                    th.className = cell.isGroup ? 'ogrid-group-header' : 'ogrid-header-cell';
+                    if (cell.colSpan > 1)
+                        th.colSpan = cell.colSpan;
+                    if (!cell.isGroup && cell.columnDef?.sortable) {
+                        th.classList.add('ogrid-sortable');
+                        th.addEventListener('click', () => {
+                            if (cell.columnDef) {
+                                this.state.toggleSort(cell.columnDef.columnId);
+                            }
+                        });
+                        // Sort indicator
+                        const sort = this.state.sort;
+                        if (sort && cell.columnDef && sort.field === cell.columnDef.columnId) {
+                            const indicator = document.createElement('span');
+                            indicator.className = 'ogrid-sort-indicator';
+                            indicator.textContent = sort.direction === 'asc' ? ' \u25B2' : ' \u25BC';
+                            th.appendChild(indicator);
+                        }
+                    }
+                    if (!cell.isGroup && cell.columnDef) {
+                        this.applyPinningStyles(th, cell.columnDef.columnId, true);
+                    }
+                    tr.appendChild(th);
+                }
+                this.thead.appendChild(tr);
+            }
+        }
+        else {
+            // Single row header
+            const tr = document.createElement('tr');
+            // Checkbox header
+            if (hasCheckbox) {
+                const th = document.createElement('th');
+                th.className = 'ogrid-header-cell ogrid-checkbox-header';
+                th.style.width = `${CHECKBOX_COL_WIDTH}px`;
+                this.appendSelectAllCheckbox(th);
+                tr.appendChild(th);
+            }
+            for (let colIdx = 0; colIdx < visibleCols.length; colIdx++) {
+                const col = visibleCols[colIdx];
+                const th = document.createElement('th');
+                th.className = 'ogrid-header-cell';
+                th.setAttribute('data-column-id', col.columnId);
+                // Text container
+                const textSpan = document.createElement('span');
+                textSpan.textContent = col.name;
+                th.appendChild(textSpan);
+                if (col.sortable) {
+                    th.classList.add('ogrid-sortable');
+                    th.addEventListener('click', () => this.state.toggleSort(col.columnId));
+                    const sort = this.state.sort;
+                    if (sort && sort.field === col.columnId) {
+                        const indicator = document.createElement('span');
+                        indicator.className = 'ogrid-sort-indicator';
+                        indicator.textContent = sort.direction === 'asc' ? ' \u25B2' : ' \u25BC';
+                        th.appendChild(indicator);
+                    }
+                }
+                if (col.type === 'numeric') {
+                    th.style.textAlign = 'right';
+                }
+                // Apply column width from resize state
+                if (this.interactionState?.columnWidths[col.columnId]) {
+                    th.style.width = `${this.interactionState.columnWidths[col.columnId]}px`;
+                }
+                // Column pinning
+                this.applyPinningStyles(th, col.columnId, true);
+                // Add resize handle
+                const resizeHandle = document.createElement('div');
+                resizeHandle.className = 'ogrid-resize-handle';
+                resizeHandle.style.position = 'absolute';
+                resizeHandle.style.right = '0';
+                resizeHandle.style.top = '0';
+                resizeHandle.style.bottom = '0';
+                resizeHandle.style.width = '4px';
+                resizeHandle.style.cursor = 'col-resize';
+                resizeHandle.style.userSelect = 'none';
+                th.style.position = th.style.position || 'relative';
+                th.appendChild(resizeHandle);
+                resizeHandle.addEventListener('mousedown', (e) => {
+                    e.stopPropagation();
+                    const rect = th.getBoundingClientRect();
+                    this.interactionState?.onResizeStart?.(col.columnId, e.clientX, rect.width);
+                });
+                // Filter icon (if column is filterable)
+                const filterConfig = this.filterConfigs.get(col.columnId);
+                if (filterConfig && this.onFilterIconClick) {
+                    const filterBtn = document.createElement('button');
+                    filterBtn.className = 'ogrid-filter-icon';
+                    filterBtn.setAttribute('aria-label', `Filter ${col.name}`);
+                    filterBtn.style.border = 'none';
+                    filterBtn.style.background = 'transparent';
+                    filterBtn.style.cursor = 'pointer';
+                    filterBtn.style.fontSize = '10px';
+                    filterBtn.style.padding = '0 2px';
+                    filterBtn.style.marginLeft = '4px';
+                    filterBtn.style.color = 'var(--ogrid-fg, #242424)';
+                    filterBtn.style.opacity = '0.6';
+                    // Show active filter indicator
+                    const hasActive = this.headerFilterState?.hasActiveFilter(filterConfig);
+                    filterBtn.textContent = hasActive ? '\u25BC' : '\u25BD';
+                    if (hasActive) {
+                        filterBtn.style.opacity = '1';
+                        filterBtn.style.color = 'var(--ogrid-selection, #217346)';
+                    }
+                    filterBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        this.onFilterIconClick?.(col.columnId, th);
+                    });
+                    th.appendChild(filterBtn);
+                }
+                tr.appendChild(th);
+            }
+            this.thead.appendChild(tr);
+        }
+    }
+    appendSelectAllCheckbox(th) {
+        const is = this.interactionState;
+        if (is?.rowSelectionMode !== 'multiple')
+            return;
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = 'ogrid-select-all-checkbox';
+        checkbox.checked = is?.allSelected === true;
+        checkbox.indeterminate = is?.someSelected === true;
+        checkbox.setAttribute('aria-label', 'Select all rows');
+        checkbox.addEventListener('change', () => {
+            is?.onSelectAll?.(checkbox.checked);
+        });
+        th.appendChild(checkbox);
+    }
+    renderBody() {
+        if (!this.tbody)
+            return;
+        const visibleCols = this.state.visibleColumnDefs;
+        const { items } = this.state.getProcessedItems();
+        const hasCheckbox = this.hasCheckboxColumn();
+        const colOffset = this.getColOffset();
+        if (items.length === 0 && !this.state.isLoading) {
+            const tr = document.createElement('tr');
+            const td = document.createElement('td');
+            td.colSpan = visibleCols.length + colOffset;
+            td.className = 'ogrid-empty-state';
+            td.textContent = 'No data';
+            tr.appendChild(td);
+            this.tbody.appendChild(tr);
+            return;
+        }
+        for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
+            const item = items[rowIndex];
+            const rowId = this.state.getRowId(item);
+            const tr = document.createElement('tr');
+            tr.className = 'ogrid-row';
+            tr.setAttribute('data-row-id', String(rowId));
+            // Row selection state
+            const isRowSelected = this.interactionState?.selectedRowIds?.has(rowId) === true;
+            if (isRowSelected) {
+                tr.setAttribute('data-row-selected', 'true');
+            }
+            // Checkbox column
+            if (hasCheckbox) {
+                const td = document.createElement('td');
+                td.className = 'ogrid-cell ogrid-checkbox-cell';
+                td.style.width = `${CHECKBOX_COL_WIDTH}px`;
+                td.style.textAlign = 'center';
+                const checkbox = document.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.className = 'ogrid-row-checkbox';
+                checkbox.checked = isRowSelected;
+                checkbox.setAttribute('aria-label', `Select row ${rowId}`);
+                checkbox.addEventListener('click', (e) => {
+                    e.stopPropagation(); // Don't trigger cell click
+                    this.interactionState?.onRowCheckboxChange?.(rowId, checkbox.checked, rowIndex, e.shiftKey);
+                });
+                td.appendChild(checkbox);
+                tr.appendChild(td);
+            }
+            for (let colIndex = 0; colIndex < visibleCols.length; colIndex++) {
+                const col = visibleCols[colIndex];
+                const globalColIndex = colIndex + colOffset;
+                const td = document.createElement('td');
+                td.className = 'ogrid-cell';
+                td.setAttribute('data-column-id', col.columnId);
+                td.setAttribute('data-row-index', String(rowIndex));
+                td.setAttribute('data-col-index', String(globalColIndex));
+                td.setAttribute('tabindex', '-1'); // Make focusable
+                if (col.type === 'numeric') {
+                    td.style.textAlign = 'right';
+                }
+                // Column pinning
+                this.applyPinningStyles(td, col.columnId, false);
+                // Apply interaction state
+                if (this.interactionState) {
+                    const { activeCell, selectionRange, copyRange, cutRange, editingCell } = this.interactionState;
+                    // Active cell
+                    if (activeCell && activeCell.rowIndex === rowIndex && activeCell.columnIndex === globalColIndex) {
+                        td.setAttribute('data-active-cell', 'true');
+                        td.style.outline = '2px solid #0078d4';
+                    }
+                    // Selection range
+                    if (selectionRange && isInSelectionRange(selectionRange, rowIndex, colIndex)) {
+                        td.setAttribute('data-in-range', 'true');
+                        td.style.backgroundColor = '#e3f2fd';
+                    }
+                    // Copy range
+                    if (copyRange && isInSelectionRange(copyRange, rowIndex, colIndex)) {
+                        td.style.outline = '1px dashed #666';
+                    }
+                    // Cut range
+                    if (cutRange && isInSelectionRange(cutRange, rowIndex, colIndex)) {
+                        td.style.outline = '1px dashed #d32f2f';
+                    }
+                    // Editing cell (hide content, editor overlay will be shown)
+                    if (editingCell && editingCell.rowId === rowId && editingCell.columnId === col.columnId) {
+                        td.style.visibility = 'hidden';
+                    }
+                    // Cell interaction handlers
+                    td.addEventListener('click', (e) => {
+                        this.interactionState?.onCellClick?.(rowIndex, globalColIndex, e);
+                    });
+                    td.addEventListener('mousedown', (e) => {
+                        this.interactionState?.onCellMouseDown?.(rowIndex, globalColIndex, e);
+                    });
+                    td.addEventListener('dblclick', () => {
+                        this.interactionState?.onCellDoubleClick?.(rowIndex, globalColIndex, rowId, col.columnId);
+                    });
+                    td.addEventListener('contextmenu', (e) => {
+                        this.interactionState?.onCellContextMenu?.(rowIndex, globalColIndex, e);
+                    });
+                }
+                // Custom DOM render
+                if (col.renderCell) {
+                    // Cast col to unknown first to work around structural differences
+                    const value = getCellValue(item, col);
+                    col.renderCell(td, item, value);
+                }
+                else {
+                    // Default: text content via valueFormatter or toString
+                    const value = getCellValue(item, col);
+                    if (col.valueFormatter) {
+                        td.textContent = col.valueFormatter(value, item);
+                    }
+                    else if (value != null) {
+                        td.textContent = String(value);
+                    }
+                }
+                // Apply cell styles
+                if (col.cellStyle) {
+                    const styles = typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
+                    if (styles) {
+                        Object.assign(td.style, styles);
+                    }
+                }
+                // Fill handle: render on the bottom-right cell of the selection range
+                // Must be AFTER cell content (td.textContent removes child nodes)
+                if (this.interactionState) {
+                    const { selectionRange } = this.interactionState;
+                    if (selectionRange &&
+                        this.interactionState.onFillHandleMouseDown &&
+                        rowIndex === Math.max(selectionRange.startRow, selectionRange.endRow) &&
+                        colIndex === Math.max(selectionRange.startCol, selectionRange.endCol)) {
+                        const fillHandle = document.createElement('div');
+                        fillHandle.className = 'ogrid-fill-handle';
+                        fillHandle.setAttribute('data-fill-handle', 'true');
+                        fillHandle.style.position = 'absolute';
+                        fillHandle.style.right = '-3px';
+                        fillHandle.style.bottom = '-3px';
+                        fillHandle.style.width = '6px';
+                        fillHandle.style.height = '6px';
+                        fillHandle.style.backgroundColor = 'var(--ogrid-selection, #217346)';
+                        fillHandle.style.cursor = 'crosshair';
+                        fillHandle.style.zIndex = '5';
+                        td.style.position = td.style.position || 'relative';
+                        fillHandle.addEventListener('mousedown', (e) => {
+                            this.interactionState?.onFillHandleMouseDown?.(e);
+                        });
+                        td.appendChild(fillHandle);
+                    }
+                }
+                tr.appendChild(td);
+            }
+            this.tbody.appendChild(tr);
+        }
+    }
+    destroy() {
+        this.container.innerHTML = '';
+        this.table = null;
+        this.thead = null;
+        this.tbody = null;
+    }
+}

package/dist/esm/state/ClipboardState.js

@@ -0,0 +1,171 @@
+import { normalizeSelectionRange, getCellValue } from '@alaarab/ogrid-core';
+import { parseValue } from '@alaarab/ogrid-core';
+import { EventEmitter } from './EventEmitter';
+export class ClipboardState {
+    constructor(params, getActiveCell, getSelectionRange) {
+        this.emitter = new EventEmitter();
+        this._cutRange = null;
+        this._copyRange = null;
+        this.internalClipboard = null;
+        this.params = params;
+        this.getActiveCell = getActiveCell;
+        this.getSelectionRange = getSelectionRange;
+    }
+    updateParams(params) {
+        this.params = params;
+    }
+    get cutRange() {
+        return this._cutRange;
+    }
+    get copyRange() {
+        return this._copyRange;
+    }
+    getEffectiveRange() {
+        const sel = this.getSelectionRange();
+        const ac = this.getActiveCell();
+        return sel ?? (ac != null
+            ? { startRow: ac.rowIndex, startCol: ac.columnIndex - this.params.colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - this.params.colOffset }
+            : null);
+    }
+    handleCopy() {
+        const range = this.getEffectiveRange();
+        if (range == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const { items, visibleCols } = this.params;
+        const rows = [];
+        for (let r = norm.startRow; r <= norm.endRow; r++) {
+            const cells = [];
+            for (let c = norm.startCol; c <= norm.endCol; c++) {
+                if (r >= items.length || c >= visibleCols.length)
+                    break;
+                const item = 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');
+        this.internalClipboard = tsv;
+        this._copyRange = norm;
+        this._cutRange = null;
+        this.emitter.emit('rangesChange', { copyRange: this._copyRange, cutRange: null });
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            void navigator.clipboard.writeText(tsv).catch(() => { });
+        }
+    }
+    handleCut() {
+        if (this.params.editable === false)
+            return;
+        const range = this.getEffectiveRange();
+        if (range == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        this._cutRange = norm;
+        this._copyRange = null;
+        this.handleCopy();
+        // handleCopy sets copyRange — override it back since this is a cut
+        this._copyRange = null;
+        this._cutRange = norm;
+        this.emitter.emit('rangesChange', { copyRange: null, cutRange: this._cutRange });
+    }
+    async handlePaste() {
+        if (this.params.editable === false)
+            return;
+        const { onCellValueChanged } = this.params;
+        let text;
+        try {
+            if (typeof navigator !== 'undefined' && navigator.clipboard) {
+                text = await navigator.clipboard.readText();
+            }
+            else {
+                text = '';
+            }
+        }
+        catch {
+            text = '';
+        }
+        if (!text.trim() && this.internalClipboard != null) {
+            text = this.internalClipboard;
+        }
+        if (!text.trim())
+            return;
+        if (onCellValueChanged == null)
+            return;
+        const norm = this.getEffectiveRange();
+        const anchorRow = norm ? norm.startRow : 0;
+        const anchorCol = norm ? norm.startCol : 0;
+        const { items, visibleCols } = this.params;
+        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        for (let r = 0; r < lines.length; r++) {
+            const cells = lines[r].split('\t');
+            for (let c = 0; c < cells.length; c++) {
+                const targetRow = anchorRow + r;
+                const targetCol = anchorCol + c;
+                if (targetRow >= items.length || targetCol >= visibleCols.length)
+                    continue;
+                const item = items[targetRow];
+                const col = visibleCols[targetCol];
+                const colEditable = col.editable === true ||
+                    (typeof col.editable === 'function' && col.editable(item));
+                if (!colEditable)
+                    continue;
+                const rawValue = cells[c] ?? '';
+                const oldValue = getCellValue(item, col);
+                const result = parseValue(rawValue, oldValue, item, col);
+                if (!result.valid)
+                    continue;
+                onCellValueChanged({
+                    item,
+                    columnId: col.columnId,
+                    oldValue,
+                    newValue: result.value,
+                    rowIndex: targetRow,
+                });
+            }
+        }
+        if (this._cutRange) {
+            const cut = this._cutRange;
+            for (let r = cut.startRow; r <= cut.endRow; r++) {
+                for (let c = cut.startCol; c <= cut.endCol; c++) {
+                    if (r >= items.length || c >= visibleCols.length)
+                        continue;
+                    const item = items[r];
+                    const col = visibleCols[c];
+                    const colEditable = col.editable === true ||
+                        (typeof col.editable === 'function' && col.editable(item));
+                    if (!colEditable)
+                        continue;
+                    const oldValue = getCellValue(item, col);
+                    const result = parseValue('', oldValue, item, col);
+                    if (!result.valid)
+                        continue;
+                    onCellValueChanged({
+                        item,
+                        columnId: col.columnId,
+                        oldValue,
+                        newValue: result.value,
+                        rowIndex: r,
+                    });
+                }
+            }
+            this._cutRange = null;
+        }
+        this._copyRange = null;
+        this.emitter.emit('rangesChange', { copyRange: null, cutRange: null });
+    }
+    clearClipboardRanges() {
+        this._copyRange = null;
+        this._cutRange = null;
+        this.emitter.emit('rangesChange', { copyRange: null, cutRange: null });
+    }
+    onRangesChange(handler) {
+        this.emitter.on('rangesChange', handler);
+        return () => this.emitter.off('rangesChange', handler);
+    }
+    destroy() {
+        this.emitter.removeAllListeners();
+    }
+}

package/dist/esm/state/ColumnPinningState.js

@@ -0,0 +1,78 @@
+import { EventEmitter } from './EventEmitter';
+/**
+ * Manages column pinning state — tracks which columns are pinned left/right.
+ * Computes sticky offsets for the renderer.
+ */
+export class ColumnPinningState {
+    constructor(pinnedColumns, columns) {
+        this.emitter = new EventEmitter();
+        this._pinnedColumns = {};
+        // Initialize from explicit pinnedColumns prop
+        if (pinnedColumns) {
+            this._pinnedColumns = { ...pinnedColumns };
+        }
+        // Also pick up pinned from column definitions
+        if (columns) {
+            for (const col of columns) {
+                if (col.pinned && !(col.columnId in this._pinnedColumns)) {
+                    this._pinnedColumns[col.columnId] = col.pinned;
+                }
+            }
+        }
+    }
+    get pinnedColumns() {
+        return this._pinnedColumns;
+    }
+    pinColumn(columnId, side) {
+        this._pinnedColumns = { ...this._pinnedColumns, [columnId]: side };
+        this.emitter.emit('pinningChange', { pinnedColumns: this._pinnedColumns });
+    }
+    unpinColumn(columnId) {
+        const next = { ...this._pinnedColumns };
+        delete next[columnId];
+        this._pinnedColumns = next;
+        this.emitter.emit('pinningChange', { pinnedColumns: this._pinnedColumns });
+    }
+    isPinned(columnId) {
+        return this._pinnedColumns[columnId];
+    }
+    /**
+     * Compute sticky left offsets for left-pinned columns.
+     * Returns a map of columnId -> left offset in pixels.
+     */
+    computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) {
+        const offsets = {};
+        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+        for (const col of visibleCols) {
+            if (this._pinnedColumns[col.columnId] === 'left') {
+                offsets[col.columnId] = left;
+                left += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }
+    /**
+     * Compute sticky right offsets for right-pinned columns.
+     * Returns a map of columnId -> right offset in pixels.
+     */
+    computeRightOffsets(visibleCols, columnWidths, defaultWidth) {
+        const offsets = {};
+        let right = 0;
+        // Walk right-pinned columns from the end
+        for (let i = visibleCols.length - 1; i >= 0; i--) {
+            const col = visibleCols[i];
+            if (this._pinnedColumns[col.columnId] === 'right') {
+                offsets[col.columnId] = right;
+                right += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }
+    onPinningChange(handler) {
+        this.emitter.on('pinningChange', handler);
+        return () => this.emitter.off('pinningChange', handler);
+    }
+    destroy() {
+        this.emitter.removeAllListeners();
+    }
+}