@alaarab/ogrid-js 2.0.2 → 2.0.3

package/dist/esm/OGrid.js

@@ -16,6 +16,8 @@ import { TableLayoutState } from './state/TableLayoutState';
 import { FillHandleState } from './state/FillHandleState';
 import { RowSelectionState } from './state/RowSelectionState';
 import { ColumnPinningState } from './state/ColumnPinningState';
+import { ColumnReorderState } from './state/ColumnReorderState';
+import { VirtualScrollState } from './state/VirtualScrollState';
 import { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 import { InlineCellEditor } from './components/InlineCellEditor';
 import { ContextMenu } from './components/ContextMenu';
@@ -41,6 +43,8 @@ export class OGrid {
         this.fillHandleState = null;
         this.rowSelectionState = null;
         this.pinningState = null;
+        this.reorderState = null;
+        this.virtualScrollState = null;
         this.marchingAnts = null;
         this.cellEditor = null;
         this.contextMenu = null;
@@ -159,6 +163,28 @@ export class OGrid {
         this.unsubscribes.push(this.headerFilterState.onChange(() => {
             this.renderHeaderFilterPopover();
         }));
+        // Initialize virtual scrolling if configured
+        if (options.virtualScroll?.enabled) {
+            this.virtualScrollState = new VirtualScrollState(options.virtualScroll);
+            this.virtualScrollState.observeContainer(this.tableContainer);
+            this.renderer.setVirtualScrollState(this.virtualScrollState);
+            // Wire scroll event on the table container
+            const handleScroll = () => {
+                this.virtualScrollState?.handleScroll(this.tableContainer.scrollTop);
+            };
+            this.tableContainer.addEventListener('scroll', handleScroll, { passive: true });
+            this.unsubscribes.push(() => {
+                this.tableContainer.removeEventListener('scroll', handleScroll);
+            });
+            // Re-render when visible range changes
+            this.unsubscribes.push(this.virtualScrollState.onRangeChanged(() => {
+                this.updateRendererInteractionState();
+            }));
+            // Wire scrollToRow API method
+            this.api.scrollToRow = (index, opts) => {
+                this.virtualScrollState?.scrollToRow(index, this.tableContainer, opts?.align);
+            };
+        }
         // Complete initial render (pagination, status bar, column chooser, sidebar, loading)
         this.renderAll();
     }
@@ -225,6 +251,14 @@ export class OGrid {
         this.unsubscribes.push(this.resizeState.onColumnWidthChange(() => {
             this.updateRendererInteractionState();
         }));
+        // Column reorder
+        this.reorderState = new ColumnReorderState();
+        this.unsubscribes.push(this.reorderState.onStateChange(({ isDragging, dropIndicatorX }) => {
+            this.renderer.updateDropIndicator(dropIndicatorX, isDragging);
+        }));
+        this.unsubscribes.push(this.reorderState.onReorder(({ columnOrder }) => {
+            this.state.setColumnOrder(columnOrder);
+        }));
         // Attach keyboard handler to wrapper
         const wrapper = this.renderer.getWrapperElement();
         if (wrapper) {
@@ -338,6 +372,13 @@ export class OGrid {
             pinnedColumns: this.pinningState?.pinnedColumns,
             leftOffsets,
             rightOffsets,
+            // Column reorder
+            onColumnReorderStart: this.reorderState ? (columnId, event) => {
+                const tableEl = this.renderer.getTableElement();
+                if (!tableEl)
+                    return;
+                this.reorderState?.startDrag(columnId, event, visibleCols, this.state.columnOrder, this.pinningState?.pinnedColumns, tableEl);
+            } : undefined,
         });
         this.renderer.update();
         // Update marching ants overlay
@@ -452,7 +493,29 @@ export class OGrid {
         const onCancel = () => {
             this.updateRendererInteractionState();
         };
-        this.cellEditor.startEdit(rowId, columnId, item, column, cell, onCommit, onCancel);
+        const onAfterCommit = () => {
+            // After Enter-commit, move the active cell down one row (Excel-style behavior)
+            if (this.selectionState) {
+                const ac = this.selectionState.activeCell;
+                if (ac) {
+                    const { items: currentItems } = this.state.getProcessedItems();
+                    const newRow = Math.min(ac.rowIndex + 1, currentItems.length - 1);
+                    this.selectionState.setActiveCell({ rowIndex: newRow, columnIndex: ac.columnIndex });
+                    const colOffset = this.renderer.getColOffset();
+                    const dataCol = ac.columnIndex - colOffset;
+                    this.selectionState.setSelectionRange({
+                        startRow: newRow,
+                        startCol: dataCol,
+                        endRow: newRow,
+                        endCol: dataCol,
+                    });
+                }
+            }
+            // Re-focus the grid wrapper so keyboard nav continues working
+            const wrapper = this.renderer.getWrapperElement();
+            wrapper?.focus();
+        };
+        this.cellEditor.startEdit(rowId, columnId, item, column, cell, onCommit, onCancel, onAfterCommit);
     }
     buildFilterConfigs() {
         const columns = flattenColumns(this.options.columns);
@@ -611,6 +674,8 @@ export class OGrid {
             this.renderer.update();
         }
         const { totalCount } = this.state.getProcessedItems();
+        // Update virtual scroll with current total row count
+        this.virtualScrollState?.setTotalRows(totalCount);
         this.pagination.render(totalCount);
         this.statusBar.render({ totalCount });
         this.columnChooser.render();
@@ -644,6 +709,8 @@ export class OGrid {
         this.fillHandleState?.destroy();
         this.rowSelectionState?.destroy();
         this.pinningState?.destroy();
+        this.reorderState?.destroy();
+        this.virtualScrollState?.destroy();
         this.marchingAnts?.destroy();
         this.layoutState.destroy();
         this.cellEditor?.closeEditor();

package/dist/esm/components/ContextMenu.js

@@ -1,14 +1,16 @@
 import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
 const MENU_STYLE = {
     position: 'fixed',
-    backgroundColor: 'white',
-    border: '1px solid #ccc',
-    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+    backgroundColor: 'var(--ogrid-bg, #fff)',
+    border: '1px solid var(--ogrid-border, #e0e0e0)',
+    boxShadow: 'var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12))',
+    borderRadius: '6px',
     zIndex: '10000',
     minWidth: '180px',
     padding: '4px 0',
     fontFamily: 'system-ui, -apple-system, sans-serif',
     fontSize: '14px',
+    color: 'var(--ogrid-fg, #242424)',
 };
 const ITEM_STYLE = {
     padding: '6px 12px',
@@ -19,7 +21,7 @@ const ITEM_STYLE = {
 };
 const DIVIDER_STYLE = {
     height: '1px',
-    backgroundColor: '#e0e0e0',
+    backgroundColor: 'var(--ogrid-border, #e0e0e0)',
     margin: '4px 0',
 };
 export class ContextMenu {
@@ -49,7 +51,7 @@ export class ContextMenu {
                 const shortcut = document.createElement('span');
                 shortcut.textContent = formatShortcut(item.shortcut);
                 shortcut.style.marginLeft = '20px';
-                shortcut.style.color = '#666';
+                shortcut.style.color = 'var(--ogrid-muted, #666)';
                 shortcut.style.fontSize = '12px';
                 menuItem.appendChild(shortcut);
             }
@@ -57,15 +59,16 @@ export class ContextMenu {
                 (item.id === 'redo' && !canRedo) ||
                 (item.disabledWhenNoSelection && selectionRange == null);
             if (isDisabled) {
-                menuItem.style.color = '#aaa';
+                menuItem.style.color = 'var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4))';
+                menuItem.style.opacity = '0.5';
                 menuItem.style.cursor = 'not-allowed';
             }
             else {
                 menuItem.addEventListener('mouseenter', () => {
-                    menuItem.style.backgroundColor = '#f0f0f0';
+                    menuItem.style.backgroundColor = 'var(--ogrid-bg-hover, #f5f5f5)';
                 });
                 menuItem.addEventListener('mouseleave', () => {
-                    menuItem.style.backgroundColor = 'white';
+                    menuItem.style.backgroundColor = '';
                 });
                 menuItem.addEventListener('click', () => {
                     this.handleItemClick(item.id);

package/dist/esm/components/InlineCellEditor.js

@@ -3,7 +3,9 @@ const EDITOR_STYLE = {
     position: 'absolute',
     zIndex: '1000',
     boxSizing: 'border-box',
-    border: '2px solid #0078d4',
+    border: '2px solid var(--ogrid-selection, #217346)',
+    background: 'var(--ogrid-bg, #fff)',
+    color: 'var(--ogrid-fg, #242424)',
     outline: 'none',
     fontFamily: 'inherit',
     fontSize: 'inherit',
@@ -12,15 +14,19 @@ export class InlineCellEditor {
     constructor(container) {
         this.editor = null;
         this.editingCell = null;
+        this.editingCellElement = null;
         this.onCommit = null;
         this.onCancel = null;
+        this.onAfterCommit = null;
         this.container = container;
     }
-    startEdit(rowId, columnId, item, column, cell, onCommit, onCancel) {
+    startEdit(rowId, columnId, item, column, cell, onCommit, onCancel, onAfterCommit) {
         this.closeEditor();
         this.editingCell = { rowId, columnId };
+        this.editingCellElement = cell;
         this.onCommit = onCommit;
         this.onCancel = onCancel;
+        this.onAfterCommit = onAfterCommit ?? null;
         const value = getCellValue(item, column);
         const rect = cell.getBoundingClientRect();
         const containerRect = this.container.getBoundingClientRect();
@@ -39,6 +45,26 @@ export class InlineCellEditor {
         return this.editingCell;
     }
     closeEditor() {
+        // Reset visibility on the cell that was being edited (Bug 1 & 2 fix:
+        // the renderer sets visibility:hidden on the editing cell, and it may
+        // not re-render before the next click lands, so we clear it explicitly).
+        // Look up the cell by data attributes since the original element reference
+        // may have been replaced by a re-render.
+        if (this.editingCell) {
+            const { rowId, columnId } = this.editingCell;
+            const row = this.container.querySelector(`tr[data-row-id="${rowId}"]`);
+            if (row) {
+                const td = row.querySelector(`td[data-column-id="${columnId}"]`);
+                if (td) {
+                    td.style.visibility = '';
+                }
+            }
+        }
+        if (this.editingCellElement) {
+            // Also reset the original element in case it's still in the DOM
+            this.editingCellElement.style.visibility = '';
+            this.editingCellElement = null;
+        }
         if (this.editor) {
             this.editor.remove();
             this.editor = null;
@@ -46,6 +72,7 @@ export class InlineCellEditor {
         this.editingCell = null;
         this.onCommit = null;
         this.onCancel = null;
+        this.onAfterCommit = null;
     }
     createEditor(column, item, value, cell) {
         const editorType = column.cellEditor;
@@ -93,13 +120,17 @@ export class InlineCellEditor {
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter') {
                 e.preventDefault();
+                e.stopPropagation(); // Prevent grid wrapper from re-opening the editor
                 if (this.editingCell) {
                     this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
                 }
+                const afterCommit = this.onAfterCommit;
                 this.closeEditor();
+                afterCommit?.(); // Move active cell down after closing
             }
             else if (e.key === 'Escape') {
                 e.preventDefault();
+                e.stopPropagation();
                 this.onCancel?.();
                 this.closeEditor();
             }
@@ -129,6 +160,7 @@ export class InlineCellEditor {
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault();
+                e.stopPropagation();
                 this.onCancel?.();
                 this.closeEditor();
             }
@@ -148,13 +180,17 @@ export class InlineCellEditor {
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter') {
                 e.preventDefault();
+                e.stopPropagation(); // Prevent grid wrapper from re-opening the editor
                 if (this.editingCell) {
                     this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
                 }
+                const afterCommit = this.onAfterCommit;
                 this.closeEditor();
+                afterCommit?.(); // Move active cell down after closing
             }
             else if (e.key === 'Escape') {
                 e.preventDefault();
+                e.stopPropagation();
                 this.onCancel?.();
                 this.closeEditor();
             }
@@ -187,6 +223,7 @@ export class InlineCellEditor {
         select.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault();
+                e.stopPropagation();
                 this.onCancel?.();
                 this.closeEditor();
             }
@@ -249,24 +286,30 @@ export class InlineCellEditor {
         input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter') {
                 e.preventDefault();
+                e.stopPropagation(); // Prevent grid wrapper from re-opening the editor
                 if (this.editingCell) {
                     this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
                 }
+                const afterCommit = this.onAfterCommit;
                 this.closeEditor();
+                afterCommit?.(); // Move active cell down after closing
             }
             else if (e.key === 'Escape') {
                 e.preventDefault();
+                e.stopPropagation();
                 this.onCancel?.();
                 this.closeEditor();
             }
         });
-        input.addEventListener('blur', () => {
-            setTimeout(() => {
-                if (this.editingCell) {
-                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-                }
-                this.closeEditor();
-            }, 200);
+        input.addEventListener('blur', (e) => {
+            const related = e.relatedTarget;
+            if (related && this.editor?.contains(related)) {
+                return; // Focus moved within the editor (e.g., to dropdown), don't close
+            }
+            if (this.editingCell) {
+                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
+            }
+            this.closeEditor();
         });
         renderOptions('');
         setTimeout(() => input.select(), 0);

package/dist/esm/index.js

@@ -1,5 +1,7 @@
 // Re-export core types + utils
 export * from '@alaarab/ogrid-core';
+// Utils
+export { debounce } from './utils';
 // Classes
 export { OGrid } from './OGrid';
 export { GridState } from './state/GridState';
@@ -19,6 +21,8 @@ export { ContextMenu } from './components/ContextMenu';
 export { FillHandleState } from './state/FillHandleState';
 export { RowSelectionState } from './state/RowSelectionState';
 export { ColumnPinningState } from './state/ColumnPinningState';
+export { ColumnReorderState } from './state/ColumnReorderState';
+export { VirtualScrollState } from './state/VirtualScrollState';
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBarState } from './state/SideBarState';
 export { HeaderFilterState } from './state/HeaderFilterState';

package/dist/esm/renderer/TableRenderer.js

@@ -10,9 +10,14 @@ export class TableRenderer {
         this.headerFilterState = null;
         this.filterConfigs = new Map();
         this.onFilterIconClick = null;
+        this.dropIndicator = null;
+        this.virtualScrollState = null;
         this.container = container;
         this.state = state;
     }
+    setVirtualScrollState(vs) {
+        this.virtualScrollState = vs;
+    }
     setHeaderFilterState(state, configs) {
         this.headerFilterState = state;
         this.filterConfigs = configs;
@@ -53,6 +58,11 @@ export class TableRenderer {
         this.renderBody();
         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);
     }
     /** Re-render body rows and header (after sort/filter/page change). */
@@ -140,7 +150,21 @@ export class TableRenderer {
                         }
                     }
                     if (!cell.isGroup && cell.columnDef) {
+                        th.setAttribute('data-column-id', cell.columnDef.columnId);
                         this.applyPinningStyles(th, cell.columnDef.columnId, true);
+                        // Column reorder in grouped headers
+                        if (this.interactionState?.onColumnReorderStart) {
+                            th.addEventListener('mousedown', (e) => {
+                                const target = e.target;
+                                if (target.classList.contains('ogrid-resize-handle') ||
+                                    target.classList.contains('ogrid-filter-icon')) {
+                                    return;
+                                }
+                                if (cell.columnDef) {
+                                    this.interactionState?.onColumnReorderStart?.(cell.columnDef.columnId, e);
+                                }
+                            });
+                        }
                     }
                     tr.appendChild(th);
                 }
@@ -232,6 +256,18 @@ export class TableRenderer {
                     });
                     th.appendChild(filterBtn);
                 }
+                // Column reorder: mousedown on header starts drag
+                if (this.interactionState?.onColumnReorderStart) {
+                    th.addEventListener('mousedown', (e) => {
+                        // Don't start reorder if clicking resize handle or filter button
+                        const target = e.target;
+                        if (target.classList.contains('ogrid-resize-handle') ||
+                            target.classList.contains('ogrid-filter-icon')) {
+                            return;
+                        }
+                        this.interactionState?.onColumnReorderStart?.(col.columnId, e);
+                    });
+                }
                 tr.appendChild(th);
             }
             this.thead.appendChild(tr);
@@ -259,18 +295,43 @@ export class TableRenderer {
         const { items } = this.state.getProcessedItems();
         const hasCheckbox = this.hasCheckboxColumn();
         const colOffset = this.getColOffset();
+        const totalColSpan = visibleCols.length + colOffset;
         if (items.length === 0 && !this.state.isLoading) {
             const tr = document.createElement('tr');
             const td = document.createElement('td');
-            td.colSpan = visibleCols.length + colOffset;
+            td.colSpan = totalColSpan;
             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++) {
+        // 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;
+            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';
@@ -404,11 +465,45 @@ export class TableRenderer {
             }
             this.tbody.appendChild(tr);
         }
+        // Virtual scrolling: bottom spacer row
+        if (isVirtual) {
+            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;
+    }
+    /** 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.container.innerHTML = '';
         this.table = null;
         this.thead = null;
         this.tbody = null;
+        this.dropIndicator = null;
     }
 }

package/dist/esm/state/ColumnReorderState.js

@@ -0,0 +1,128 @@
+import { calculateDropTarget, reorderColumnArray, getPinStateForColumn } from '@alaarab/ogrid-core';
+import { EventEmitter } from './EventEmitter';
+/**
+ * Manages column drag-to-reorder for the vanilla JS grid.
+ * Follows the EventEmitter + RAF pattern from FillHandleState/SelectionState.
+ */
+export class ColumnReorderState {
+    constructor() {
+        this.emitter = new EventEmitter();
+        this._isDragging = false;
+        this._draggedColumnId = null;
+        this._dropIndicatorX = null;
+        this._dropTargetIndex = null;
+        this.rafId = 0;
+        this.columnOrder = [];
+        this.draggedPinState = 'unpinned';
+        this.tableElement = null;
+        this.onMoveBound = this.handleMouseMove.bind(this);
+        this.onUpBound = this.handleMouseUp.bind(this);
+    }
+    get isDragging() {
+        return this._isDragging;
+    }
+    get dropIndicatorX() {
+        return this._dropIndicatorX;
+    }
+    /**
+     * Begin a column drag operation.
+     * Called from mousedown on a header cell.
+     */
+    startDrag(columnId, event, columns, columnOrder, pinnedColumns, tableElement) {
+        event.preventDefault();
+        this._isDragging = true;
+        this._draggedColumnId = columnId;
+        this._dropIndicatorX = null;
+        this._dropTargetIndex = null;
+        this.tableElement = tableElement;
+        // Use provided column order, or derive from columns array
+        this.columnOrder = columnOrder.length > 0
+            ? [...columnOrder]
+            : columns.map(c => c.columnId);
+        // Convert Record<string, 'left' | 'right'> to { left?: string[]; right?: string[] }
+        if (pinnedColumns) {
+            const left = [];
+            const right = [];
+            for (const [id, side] of Object.entries(pinnedColumns)) {
+                if (side === 'left')
+                    left.push(id);
+                else if (side === 'right')
+                    right.push(id);
+            }
+            this.pinnedColumns = { left, right };
+        }
+        else {
+            this.pinnedColumns = undefined;
+        }
+        this.draggedPinState = getPinStateForColumn(columnId, this.pinnedColumns);
+        window.addEventListener('mousemove', this.onMoveBound, true);
+        window.addEventListener('mouseup', this.onUpBound, true);
+        this.emitter.emit('stateChange', { isDragging: true, dropIndicatorX: null });
+    }
+    handleMouseMove(event) {
+        if (!this._isDragging || !this._draggedColumnId || !this.tableElement)
+            return;
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        const mouseX = event.clientX;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = 0;
+            if (!this._draggedColumnId || !this.tableElement)
+                return;
+            const result = calculateDropTarget(mouseX, this.columnOrder, this._draggedColumnId, this.draggedPinState, this.tableElement, this.pinnedColumns);
+            if (!result)
+                return;
+            const prevX = this._dropIndicatorX;
+            const prevIdx = this._dropTargetIndex;
+            this._dropTargetIndex = result.targetIndex;
+            this._dropIndicatorX = result.indicatorX;
+            // Only emit if something changed
+            if (prevX !== result.indicatorX || prevIdx !== result.targetIndex) {
+                this.emitter.emit('stateChange', {
+                    isDragging: true,
+                    dropIndicatorX: result.indicatorX,
+                });
+            }
+        });
+    }
+    handleMouseUp() {
+        window.removeEventListener('mousemove', this.onMoveBound, true);
+        window.removeEventListener('mouseup', this.onUpBound, true);
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        // Commit reorder if we have a valid drop target that isn't a no-op
+        if (this._isDragging &&
+            this._draggedColumnId &&
+            this._dropTargetIndex !== null &&
+            this._dropIndicatorX !== null // null indicatorX means no-op (same position)
+        ) {
+            const newOrder = reorderColumnArray(this.columnOrder, this._draggedColumnId, this._dropTargetIndex);
+            this.emitter.emit('reorder', { columnOrder: newOrder });
+        }
+        this._isDragging = false;
+        this._draggedColumnId = null;
+        this._dropIndicatorX = null;
+        this._dropTargetIndex = null;
+        this.tableElement = null;
+        this.emitter.emit('stateChange', { isDragging: false, dropIndicatorX: null });
+    }
+    onStateChange(handler) {
+        this.emitter.on('stateChange', handler);
+        return () => this.emitter.off('stateChange', handler);
+    }
+    onReorder(handler) {
+        this.emitter.on('reorder', handler);
+        return () => this.emitter.off('reorder', handler);
+    }
+    destroy() {
+        if (this._isDragging) {
+            window.removeEventListener('mousemove', this.onMoveBound, true);
+            window.removeEventListener('mouseup', this.onUpBound, true);
+        }
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.emitter.removeAllListeners();
+    }
+}