@alaarab/ogrid-js 2.1.2 → 2.1.4

package/dist/esm/renderer/TableRenderer.js

@@ -1,846 +0,0 @@
-import { getCellValue, buildHeaderRows, isInSelectionRange, ROW_NUMBER_COLUMN_WIDTH, CHECKBOX_COLUMN_WIDTH } from '@alaarab/ogrid-core';
-import { getCellCoordinates } from '../utils/getCellCoordinates';
-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.dropIndicator = null;
-        this.virtualScrollState = null;
-        // Delegated event handlers bound to tbody
-        this._tbodyClickHandler = null;
-        this._tbodyMousedownHandler = null;
-        this._tbodyDblclickHandler = null;
-        this._tbodyContextmenuHandler = null;
-        // Delegated event handlers bound to thead (avoids per-<th> inline listeners)
-        this._theadClickHandler = null;
-        this._theadMousedownHandler = null;
-        // State tracking for incremental DOM patching
-        this.lastActiveCell = null;
-        this.lastSelectionRange = null;
-        this.lastCopyRange = null;
-        this.lastCutRange = null;
-        this.lastEditingCell = null;
-        this.lastColumnWidths = {};
-        this.lastHeaderSignature = '';
-        this.lastRenderedItems = null;
-        this.container = container;
-        this.state = state;
-    }
-    setVirtualScrollState(vs) {
-        this.virtualScrollState = vs;
-    }
-    setHeaderFilterState(state, configs) {
-        this.headerFilterState = state;
-        this.filterConfigs = configs;
-    }
-    setOnFilterIconClick(handler) {
-        this.onFilterIconClick = handler;
-    }
-    setInteractionState(state) {
-        this.interactionState = state;
-    }
-    getCellFromEvent(e) {
-        const target = e.target;
-        const cell = target.closest('td[data-row-index]');
-        if (!cell)
-            return null;
-        const coords = getCellCoordinates(cell);
-        if (!coords)
-            return null;
-        return { el: cell, rowIndex: coords.rowIndex, colIndex: coords.colIndex };
-    }
-    attachBodyDelegation() {
-        if (!this.tbody)
-            return;
-        this._tbodyClickHandler = (e) => {
-            const cell = this.getCellFromEvent(e);
-            if (!cell)
-                return;
-            this.interactionState?.onCellClick?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, event: e });
-        };
-        this._tbodyMousedownHandler = (e) => {
-            // Fill handle mousedown — delegated from per-cell inline listener
-            const target = e.target;
-            if (target.classList.contains('ogrid-fill-handle') || target.getAttribute('data-fill-handle') === 'true') {
-                this.interactionState?.onFillHandleMouseDown?.(e);
-                return;
-            }
-            const cell = this.getCellFromEvent(e);
-            if (!cell)
-                return;
-            this.interactionState?.onCellMouseDown?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, event: e });
-        };
-        this._tbodyDblclickHandler = (e) => {
-            const cell = this.getCellFromEvent(e);
-            if (!cell)
-                return;
-            const columnId = cell.el.getAttribute('data-column-id') ?? '';
-            // Retrieve the typed rowId by looking up the item at the row index (avoids string/number mismatch from data-row-id)
-            const { items } = this.state.getProcessedItems();
-            const item = items[cell.rowIndex];
-            if (!item)
-                return;
-            const rowId = this.state.getRowId(item);
-            this.interactionState?.onCellDoubleClick?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowId, columnId });
-        };
-        this._tbodyContextmenuHandler = (e) => {
-            const cell = this.getCellFromEvent(e);
-            if (!cell)
-                return;
-            this.interactionState?.onCellContextMenu?.({ rowIndex: cell.rowIndex, colIndex: cell.colIndex, event: e });
-        };
-        this.tbody.addEventListener('click', this._tbodyClickHandler, { passive: true });
-        this.tbody.addEventListener('mousedown', this._tbodyMousedownHandler);
-        this.tbody.addEventListener('dblclick', this._tbodyDblclickHandler, { passive: true });
-        this.tbody.addEventListener('contextmenu', this._tbodyContextmenuHandler);
-    }
-    detachBodyDelegation() {
-        if (!this.tbody)
-            return;
-        if (this._tbodyClickHandler)
-            this.tbody.removeEventListener('click', this._tbodyClickHandler);
-        if (this._tbodyMousedownHandler)
-            this.tbody.removeEventListener('mousedown', this._tbodyMousedownHandler);
-        if (this._tbodyDblclickHandler)
-            this.tbody.removeEventListener('dblclick', this._tbodyDblclickHandler);
-        if (this._tbodyContextmenuHandler)
-            this.tbody.removeEventListener('contextmenu', this._tbodyContextmenuHandler);
-        this._tbodyClickHandler = null;
-        this._tbodyMousedownHandler = null;
-        this._tbodyDblclickHandler = null;
-        this._tbodyContextmenuHandler = null;
-    }
-    /** Attach delegated event listeners to <thead> for sort clicks, resize, reorder, and filter icon clicks. */
-    attachHeaderDelegation() {
-        if (!this.thead)
-            return;
-        // Sort clicks and filter icon clicks use inline listeners for stale-reference compatibility
-        // (tests hold references to <th> elements that become detached after header re-render).
-        // Delegation handles resize and column reorder mousedown events only.
-        this._theadClickHandler = null;
-        this._theadMousedownHandler = (e) => {
-            const target = e.target;
-            // Resize handle mousedown
-            if (target.classList.contains('ogrid-resize-handle')) {
-                e.stopPropagation();
-                const th = target.closest('th[data-column-id]');
-                if (!th)
-                    return;
-                const columnId = th.getAttribute('data-column-id');
-                if (columnId) {
-                    const rect = th.getBoundingClientRect();
-                    this.interactionState?.onResizeStart?.(columnId, e.clientX, rect.width);
-                }
-                return;
-            }
-            // Don't start reorder from filter icon
-            if (target.classList.contains('ogrid-filter-icon'))
-                return;
-            // Column reorder mousedown
-            if (this.interactionState?.onColumnReorderStart) {
-                const th = target.closest('th[data-column-id]');
-                if (!th)
-                    return;
-                const columnId = th.getAttribute('data-column-id');
-                if (columnId) {
-                    this.interactionState.onColumnReorderStart(columnId, e);
-                }
-            }
-        };
-        if (this._theadClickHandler)
-            this.thead.addEventListener('click', this._theadClickHandler);
-        this.thead.addEventListener('mousedown', this._theadMousedownHandler);
-    }
-    detachHeaderDelegation() {
-        if (!this.thead)
-            return;
-        if (this._theadClickHandler)
-            this.thead.removeEventListener('click', this._theadClickHandler);
-        if (this._theadMousedownHandler)
-            this.thead.removeEventListener('mousedown', this._theadMousedownHandler);
-        this._theadClickHandler = null;
-        this._theadMousedownHandler = null;
-    }
-    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
-        if (this.state.rowHeight) {
-            wrapper.style.setProperty('--ogrid-row-height', `${this.state.rowHeight}px`);
-        }
-        if (this.state.ariaLabel) {
-            wrapper.setAttribute('aria-label', this.state.ariaLabel);
-        }
-        this.wrapperEl = wrapper;
-        // Create table
-        this.table = document.createElement('table');
-        this.table.className = 'ogrid-table';
-        // Render header
-        this.thead = document.createElement('thead');
-        if (this.state.stickyHeader) {
-            this.thead.classList.add('ogrid-sticky-header');
-        }
-        this.renderHeader();
-        this.attachHeaderDelegation();
-        this.table.appendChild(this.thead);
-        // Render body
-        this.tbody = document.createElement('tbody');
-        this.renderBody();
-        this.attachBodyDelegation();
-        this.table.appendChild(this.tbody);
-        wrapper.appendChild(this.table);
-        // Create drop indicator for column reorder (hidden by default)
-        this.dropIndicator = document.createElement('div');
-        this.dropIndicator.className = 'ogrid-drop-indicator';
-        this.dropIndicator.style.display = 'none';
-        wrapper.appendChild(this.dropIndicator);
-        this.container.appendChild(wrapper);
-        this.snapshotState();
-    }
-    /** Compute a signature string that captures header-affecting state. */
-    computeHeaderSignature() {
-        const cols = this.state.visibleColumnDefs;
-        const is = this.interactionState;
-        const parts = [];
-        for (const col of cols) {
-            parts.push(col.columnId);
-            parts.push(col.name);
-            parts.push(is?.columnWidths[col.columnId]?.toString() ?? '');
-        }
-        // Include sort state
-        const sort = this.state.sort;
-        if (sort)
-            parts.push(`sort:${sort.field}:${sort.direction}`);
-        // Include row selection mode and checkbox header state
-        parts.push(`sel:${is?.rowSelectionMode ?? ''}`);
-        parts.push(`allSel:${is?.allSelected ?? ''}`);
-        parts.push(`someSel:${is?.someSelected ?? ''}`);
-        // Include showRowNumbers
-        parts.push(`rn:${is?.showRowNumbers ?? ''}`);
-        // Include filter active states
-        for (const [colId, config] of this.filterConfigs) {
-            const hasActive = this.headerFilterState?.hasActiveFilter(config);
-            if (hasActive)
-                parts.push(`flt:${colId}`);
-        }
-        return parts.join('|');
-    }
-    /** Save current interaction state for next diff comparison. */
-    snapshotState() {
-        const is = this.interactionState;
-        this.lastActiveCell = is?.activeCell ? { ...is.activeCell } : null;
-        this.lastSelectionRange = is?.selectionRange ? { ...is.selectionRange } : null;
-        this.lastCopyRange = is?.copyRange ? { ...is.copyRange } : null;
-        this.lastCutRange = is?.cutRange ? { ...is.cutRange } : null;
-        this.lastEditingCell = is?.editingCell ? { ...is.editingCell } : null;
-        this.lastColumnWidths = is?.columnWidths ? { ...is.columnWidths } : {};
-        this.lastRowSelectionMode = is?.rowSelectionMode;
-        this.lastSelectedRowIds = is?.selectedRowIds ? new Set(is.selectedRowIds) : undefined;
-        this.lastShowRowNumbers = is?.showRowNumbers;
-        this.lastPinnedColumns = is?.pinnedColumns;
-        this.lastAllSelected = is?.allSelected;
-        this.lastSomeSelected = is?.someSelected;
-        this.lastHeaderSignature = this.computeHeaderSignature();
-        const { items } = this.state.getProcessedItems();
-        this.lastRenderedItems = items;
-    }
-    /** Check if only selection/active-cell/copy/cut ranges changed (no data or header changes). */
-    isSelectionOnlyChange() {
-        if (!this.lastRenderedItems)
-            return false;
-        const is = this.interactionState;
-        const { items } = this.state.getProcessedItems();
-        // If data items changed, need full body rebuild
-        if (items !== this.lastRenderedItems)
-            return false;
-        // If header signature changed, need header rebuild
-        const currentHeaderSig = this.computeHeaderSignature();
-        if (currentHeaderSig !== this.lastHeaderSignature)
-            return false;
-        // If editing cell changed, need body rebuild (visibility toggle on the td)
-        const curEdit = is?.editingCell;
-        const lastEdit = this.lastEditingCell;
-        if (curEdit?.rowId !== lastEdit?.rowId || curEdit?.columnId !== lastEdit?.columnId)
-            return false;
-        // If row selection changed, need body rebuild (checkbox states, row attrs)
-        if (is?.rowSelectionMode !== this.lastRowSelectionMode)
-            return false;
-        if (is?.selectedRowIds !== this.lastSelectedRowIds) {
-            // Compare sets
-            const curIds = is?.selectedRowIds;
-            const lastIds = this.lastSelectedRowIds;
-            if (!curIds && !lastIds) { /* both null, ok */ }
-            else if (!curIds || !lastIds || curIds.size !== lastIds.size)
-                return false;
-            else {
-                for (const id of curIds) {
-                    if (!lastIds.has(id))
-                        return false;
-                }
-            }
-        }
-        // If pinning or row numbers changed
-        if (is?.showRowNumbers !== this.lastShowRowNumbers)
-            return false;
-        if (is?.pinnedColumns !== this.lastPinnedColumns)
-            return false;
-        // Otherwise it's just selection/active-cell/copy/cut changes
-        return true;
-    }
-    /** Patch only CSS classes/styles for selection, active cell, copy/cut ranges without rebuilding DOM. */
-    patchSelectionClasses() {
-        if (!this.tbody || !this.interactionState)
-            return;
-        const is = this.interactionState;
-        const { activeCell, selectionRange, copyRange, cutRange } = is;
-        const lastActive = this.lastActiveCell;
-        const lastSelection = this.lastSelectionRange;
-        const lastCopy = this.lastCopyRange;
-        const lastCut = this.lastCutRange;
-        const cells = this.tbody.querySelectorAll('td[data-row-index][data-col-index]');
-        for (let i = 0; i < cells.length; i++) {
-            const el = cells[i];
-            const coords = getCellCoordinates(el);
-            if (!coords)
-                continue;
-            const rowIndex = coords.rowIndex;
-            const globalColIndex = coords.colIndex;
-            const colOffset = this.getColOffset();
-            const colIndex = globalColIndex - colOffset;
-            // --- Active cell ---
-            const wasActive = lastActive && lastActive.rowIndex === rowIndex && lastActive.columnIndex === globalColIndex;
-            const isActive = activeCell && activeCell.rowIndex === rowIndex && activeCell.columnIndex === globalColIndex;
-            if (wasActive && !isActive) {
-                el.removeAttribute('data-active-cell');
-                el.style.outline = '';
-            }
-            else if (isActive && !wasActive) {
-                el.setAttribute('data-active-cell', 'true');
-                el.style.outline = '2px solid var(--ogrid-accent, #0078d4)';
-            }
-            // --- Selection range ---
-            const wasInRange = lastSelection && isInSelectionRange(lastSelection, rowIndex, colIndex);
-            const isInRange = selectionRange && isInSelectionRange(selectionRange, rowIndex, colIndex);
-            if (wasInRange && !isInRange) {
-                el.removeAttribute('data-in-range');
-                el.style.backgroundColor = '';
-            }
-            else if (isInRange && !wasInRange) {
-                el.setAttribute('data-in-range', 'true');
-                el.style.backgroundColor = 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.12))';
-            }
-            // --- Copy range ---
-            const wasInCopy = lastCopy && isInSelectionRange(lastCopy, rowIndex, colIndex);
-            const isInCopy = copyRange && isInSelectionRange(copyRange, rowIndex, colIndex);
-            if (wasInCopy && !isInCopy) {
-                // Only clear outline if not being set by another range (active/cut)
-                if (!isActive && !(cutRange && isInSelectionRange(cutRange, rowIndex, colIndex))) {
-                    el.style.outline = '';
-                }
-            }
-            else if (isInCopy && !wasInCopy) {
-                el.style.outline = '1px dashed var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5))';
-            }
-            // --- Cut range ---
-            const wasInCut = lastCut && isInSelectionRange(lastCut, rowIndex, colIndex);
-            const isInCut = cutRange && isInSelectionRange(cutRange, rowIndex, colIndex);
-            if (wasInCut && !isInCut) {
-                if (!isActive && !(copyRange && isInSelectionRange(copyRange, rowIndex, colIndex))) {
-                    el.style.outline = '';
-                }
-            }
-            else if (isInCut && !wasInCut) {
-                el.style.outline = '1px dashed var(--ogrid-accent, #0078d4)';
-            }
-            // --- Fill handle ---
-            // Remove old fill handle if it was on a cell no longer at the bottom-right of selection
-            const oldFill = el.querySelector('.ogrid-fill-handle');
-            const shouldHaveFill = selectionRange && is.onFillHandleMouseDown &&
-                rowIndex === Math.max(selectionRange.startRow, selectionRange.endRow) &&
-                colIndex === Math.max(selectionRange.startCol, selectionRange.endCol);
-            const hadFill = !!oldFill;
-            if (hadFill && !shouldHaveFill) {
-                oldFill?.remove();
-            }
-            else if (!hadFill && shouldHaveFill) {
-                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';
-                el.style.position = el.style.position || 'relative';
-                fillHandle.addEventListener('mousedown', (e) => {
-                    this.interactionState?.onFillHandleMouseDown?.(e);
-                });
-                el.appendChild(fillHandle);
-            }
-            // Restore pinned cell background if needed (selection removal may have cleared it)
-            if (!isInRange && is.pinnedColumns) {
-                const columnId = el.getAttribute('data-column-id');
-                if (columnId && is.pinnedColumns[columnId]) {
-                    el.style.backgroundColor = el.style.backgroundColor || 'var(--ogrid-bg, #fff)';
-                }
-            }
-        }
-        this.snapshotState();
-    }
-    /** Re-render body rows and header (after sort/filter/page change). */
-    update() {
-        if (!this.tbody || !this.thead) {
-            this.render();
-            this.snapshotState();
-            return;
-        }
-        // Check if only selection-related state changed — if so, patch CSS only
-        if (this.isSelectionOnlyChange()) {
-            this.patchSelectionClasses();
-            return;
-        }
-        // Check if header needs rebuild
-        const currentHeaderSig = this.computeHeaderSignature();
-        if (currentHeaderSig !== this.lastHeaderSignature) {
-            this.thead.innerHTML = '';
-            this.renderHeader();
-        }
-        // Delegation listeners are on tbody itself — just clear inner HTML, keep listeners
-        this.tbody.innerHTML = '';
-        this.renderBody();
-        this.snapshotState();
-    }
-    hasCheckboxColumn() {
-        const mode = this.interactionState?.rowSelectionMode;
-        return mode === 'single' || mode === 'multiple';
-    }
-    hasRowNumbersColumn() {
-        return !!this.interactionState?.showRowNumbers;
-    }
-    /** The column index offset for data columns (checkbox + row numbers if present). */
-    getColOffset() {
-        let offset = 0;
-        if (this.hasCheckboxColumn())
-            offset++;
-        if (this.hasRowNumbersColumn())
-            offset++;
-        return offset;
-    }
-    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 || 'var(--ogrid-bg, #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_COLUMN_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');
-                        // Sort click also inline for compatibility with tests that hold stale <th> references
-                        th.addEventListener('click', () => {
-                            if (cell.columnDef)
-                                this.state.toggleSort(cell.columnDef.columnId);
-                        });
-                    }
-                    if (!cell.isGroup && cell.columnDef) {
-                        th.setAttribute('data-column-id', cell.columnDef.columnId);
-                        this.applyPinningStyles(th, cell.columnDef.columnId, true);
-                        // Resize, reorder, and filter icon clicks are handled
-                        // via delegated listeners on <thead> (attachHeaderDelegation).
-                    }
-                    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_COLUMN_WIDTH}px`;
-                this.appendSelectAllCheckbox(th);
-                tr.appendChild(th);
-            }
-            // Row numbers header
-            if (this.hasRowNumbersColumn()) {
-                const th = document.createElement('th');
-                th.className = 'ogrid-header-cell ogrid-row-number-header';
-                th.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
-                th.style.textAlign = 'center';
-                th.textContent = '#';
-                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');
-                    // Sort click also inline for compatibility with tests that hold stale <th> references
-                    th.addEventListener('click', () => this.state.toggleSort(col.columnId));
-                }
-                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);
-                // Resize mousedown handled via delegated listener on <thead>
-                // 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);
-                }
-                // Column reorder mousedown handled via delegated listener on <thead>
-                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 hasRowNumbers = this.hasRowNumbersColumn();
-        const colOffset = this.getColOffset();
-        const totalColSpan = visibleCols.length + colOffset;
-        // Calculate row number offset for pagination
-        const rowNumberOffset = hasRowNumbers ? (this.state.page - 1) * this.state.pageSize : 0;
-        if (items.length === 0 && !this.state.isLoading) {
-            const tr = document.createElement('tr');
-            const td = document.createElement('td');
-            td.colSpan = totalColSpan;
-            td.className = 'ogrid-empty-state';
-            td.textContent = 'No data';
-            tr.appendChild(td);
-            this.tbody.appendChild(tr);
-            return;
-        }
-        // Virtual scrolling: determine which rows to render
-        const vs = this.virtualScrollState;
-        const isVirtual = vs?.enabled === true;
-        let startIndex = 0;
-        let endIndex = items.length - 1;
-        if (isVirtual) {
-            const range = vs?.visibleRange;
-            if (!range)
-                return;
-            startIndex = Math.max(0, range.startIndex);
-            endIndex = Math.min(items.length - 1, range.endIndex);
-            // Top spacer row
-            if (range.offsetTop > 0) {
-                const topSpacer = document.createElement('tr');
-                topSpacer.className = 'ogrid-virtual-spacer';
-                const topTd = document.createElement('td');
-                topTd.colSpan = totalColSpan;
-                topTd.style.height = `${range.offsetTop}px`;
-                topTd.style.padding = '0';
-                topTd.style.border = 'none';
-                topSpacer.appendChild(topTd);
-                this.tbody.appendChild(topSpacer);
-            }
-        }
-        for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex++) {
-            const item = items[rowIndex];
-            if (!item)
-                continue;
-            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_COLUMN_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);
-            }
-            // Row numbers column
-            if (hasRowNumbers) {
-                const td = document.createElement('td');
-                td.className = 'ogrid-cell ogrid-row-number-cell';
-                td.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
-                td.style.textAlign = 'center';
-                td.style.color = 'var(--ogrid-fg-muted, #666)';
-                td.style.fontSize = '0.9em';
-                td.textContent = String(rowNumberOffset + rowIndex + 1);
-                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 var(--ogrid-accent, #0078d4)';
-                    }
-                    // Selection range
-                    if (selectionRange && isInSelectionRange(selectionRange, rowIndex, colIndex)) {
-                        td.setAttribute('data-in-range', 'true');
-                        td.style.backgroundColor = 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.12))';
-                    }
-                    // Copy range
-                    if (copyRange && isInSelectionRange(copyRange, rowIndex, colIndex)) {
-                        td.style.outline = '1px dashed var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5))';
-                    }
-                    // Cut range
-                    if (cutRange && isInSelectionRange(cutRange, rowIndex, colIndex)) {
-                        td.style.outline = '1px dashed var(--ogrid-accent, #0078d4)';
-                    }
-                    // Editing cell (hide content, editor overlay will be shown)
-                    if (editingCell && editingCell.rowId === rowId && editingCell.columnId === col.columnId) {
-                        td.style.visibility = 'hidden';
-                    }
-                    // Cell interaction is handled by delegated listeners on tbody
-                }
-                // 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';
-                        // Fill handle mousedown handled via delegated listener on <tbody>
-                        td.appendChild(fillHandle);
-                    }
-                }
-                tr.appendChild(td);
-            }
-            this.tbody.appendChild(tr);
-        }
-        // Virtual scrolling: bottom spacer row
-        if (isVirtual && vs) {
-            const range = vs.visibleRange;
-            if (range.offsetBottom > 0) {
-                const bottomSpacer = document.createElement('tr');
-                bottomSpacer.className = 'ogrid-virtual-spacer';
-                const bottomTd = document.createElement('td');
-                bottomTd.colSpan = totalColSpan;
-                bottomTd.style.height = `${range.offsetBottom}px`;
-                bottomTd.style.padding = '0';
-                bottomTd.style.border = 'none';
-                bottomSpacer.appendChild(bottomTd);
-                this.tbody.appendChild(bottomSpacer);
-            }
-        }
-    }
-    /** Get the table element (used by ColumnReorderState for header cell queries). */
-    getTableElement() {
-        return this.table;
-    }
-    /** Get the current onResizeStart handler from interaction state (avoids bracket notation access). */
-    getOnResizeStart() {
-        return this.interactionState?.onResizeStart;
-    }
-    /** Update the drop indicator position during column reorder. */
-    updateDropIndicator(x, isDragging) {
-        if (!this.dropIndicator || !this.wrapperEl)
-            return;
-        if (!isDragging || x === null) {
-            this.dropIndicator.style.display = 'none';
-            return;
-        }
-        // Convert client X to position relative to the wrapper
-        const wrapperRect = this.wrapperEl.getBoundingClientRect();
-        const relativeX = x - wrapperRect.left + this.wrapperEl.scrollLeft;
-        this.dropIndicator.style.display = 'block';
-        this.dropIndicator.style.left = `${relativeX}px`;
-    }
-    destroy() {
-        this.detachHeaderDelegation();
-        this.detachBodyDelegation();
-        this.container.innerHTML = '';
-        this.table = null;
-        this.thead = null;
-        this.tbody = null;
-        this.dropIndicator = null;
-    }
-}