@alaarab/ogrid-js 2.1.3 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,12 +9,12 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     },
     "./styles": "./dist/styles/ogrid.css"
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp styles/ogrid.css dist/styles/ogrid.css",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp styles/ogrid.css dist/styles/ogrid.css",
     "test": "jest"
   },
   "keywords": [
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.3"
+    "@alaarab/ogrid-core": "2.1.4"
   },
   "sideEffects": [
     "**/*.css"

package/dist/esm/OGrid.js

@@ -1,578 +0,0 @@
-import { GridState } from './state/GridState';
-import { TableRenderer } from './renderer/TableRenderer';
-import { PaginationControls } from './components/PaginationControls';
-import { StatusBar } from './components/StatusBar';
-import { ColumnChooser } from './components/ColumnChooser';
-import { SideBarState } from './state/SideBarState';
-import { SideBar } from './components/SideBar';
-import { HeaderFilterState } from './state/HeaderFilterState';
-import { HeaderFilter } from './components/HeaderFilter';
-import { TableLayoutState } from './state/TableLayoutState';
-import { RowSelectionState } from './state/RowSelectionState';
-import { ColumnPinningState } from './state/ColumnPinningState';
-import { VirtualScrollState } from './state/VirtualScrollState';
-import { EventEmitter } from './state/EventEmitter';
-import { flattenColumns, injectGlobalStyles } from '@alaarab/ogrid-core';
-import { OGridEventWiring } from './OGridEventWiring';
-import { OGridRendering } from './OGridRendering';
-/**
- * CSS variable definitions for light and dark themes (injected once per page).
- * NOTE: The dark theme variable block appears twice — once for [data-theme='dark'] and once
- * for @media (prefers-color-scheme: dark). Both blocks must be kept in sync. If you change a
- * dark-theme variable in one block, update the other block too.
- */
-const OGRID_THEME_CSS = `
-.ogrid-drag-target { box-shadow: inset 0 0 0 1px var(--ogrid-accent, #0078d4); }
-:root {
-  --ogrid-bg: #ffffff;
-  --ogrid-fg: rgba(0, 0, 0, 0.87);
-  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
-  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
-  --ogrid-border: rgba(0, 0, 0, 0.12);
-  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
-  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
-  --ogrid-selected-row-bg: #e6f0fb;
-  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
-  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
-  --ogrid-accent: #0078d4;
-  --ogrid-selection-color: #217346;
-  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
-  --ogrid-bg-subtle: #f3f2f1;
-  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
-  --ogrid-bg-selected: #e6f0fb;
-  --ogrid-bg-selected-hover: #dae8f8;
-  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
-  --ogrid-muted: rgba(0, 0, 0, 0.5);
-  --ogrid-selection: #217346;
-  --ogrid-primary: #217346;
-  --ogrid-primary-fg: #fff;
-  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
-  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-}
-[data-theme='dark'] {
-  --ogrid-bg: #1e1e1e;
-  --ogrid-fg: rgba(255, 255, 255, 0.87);
-  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
-  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
-  --ogrid-border: rgba(255, 255, 255, 0.12);
-  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
-  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
-  --ogrid-selected-row-bg: #1a3a5c;
-  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
-  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
-  --ogrid-accent: #4da6ff;
-  --ogrid-selection-color: #2ea043;
-  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-  --ogrid-bg-subtle: #2a2a2a;
-  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
-  --ogrid-bg-selected: #1a3a5c;
-  --ogrid-bg-selected-hover: #1f426b;
-  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
-  --ogrid-muted: rgba(255, 255, 255, 0.5);
-  --ogrid-selection: #2ea043;
-  --ogrid-primary: #2ea043;
-  --ogrid-primary-fg: #fff;
-  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
-  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
-    --ogrid-bg: #1e1e1e;
-    --ogrid-fg: rgba(255, 255, 255, 0.87);
-    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
-    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
-    --ogrid-border: rgba(255, 255, 255, 0.12);
-    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
-    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
-    --ogrid-selected-row-bg: #1a3a5c;
-    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
-    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
-    --ogrid-accent: #4da6ff;
-    --ogrid-selection-color: #2ea043;
-    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-    --ogrid-bg-subtle: #2a2a2a;
-    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
-    --ogrid-bg-selected: #1a3a5c;
-    --ogrid-bg-selected-hover: #1f426b;
-    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
-    --ogrid-muted: rgba(255, 255, 255, 0.5);
-    --ogrid-selection: #2ea043;
-    --ogrid-primary: #2ea043;
-    --ogrid-primary-fg: #fff;
-    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
-    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-  }
-}
-`;
-export class OGrid {
-    constructor(container, options) {
-        // Sidebar
-        this.sideBarState = null;
-        this.sideBarComponent = null;
-        this.sideBarContainer = null;
-        this.filterConfigs = new Map();
-        // Loading overlay
-        this.loadingOverlay = null;
-        // Body area (holds sidebar + table)
-        this.bodyArea = null;
-        // Interaction states
-        this.selectionState = null;
-        this.keyboardNavState = null;
-        this.clipboardState = null;
-        this.undoRedoState = null;
-        this.resizeState = null;
-        this.fillHandleState = null;
-        this.rowSelectionState = null;
-        this.pinningState = null;
-        this.reorderState = null;
-        this.virtualScrollState = null;
-        this.marchingAnts = null;
-        this.cellEditor = null;
-        this.contextMenu = null;
-        this.events = new EventEmitter();
-        this.unsubscribes = [];
-        this.isFullScreen = false;
-        this.fullscreenBtn = null;
-        this.options = options;
-        this.state = new GridState(options);
-        this.api = this.state.getApi();
-        this.eventWiringHelper = new OGridEventWiring();
-        // Inject theme CSS variables (light + dark) once per page
-        injectGlobalStyles('ogrid-theme-vars', OGRID_THEME_CSS);
-        // Build layout
-        this.containerEl = document.createElement('div');
-        this.containerEl.className = 'ogrid-container';
-        // Toolbar
-        this.toolbarEl = document.createElement('div');
-        this.toolbarEl.className = 'ogrid-toolbar';
-        // Left spacer keeps column chooser on the right via justify-content: space-between
-        const toolbarSpacer = document.createElement('div');
-        this.toolbarEl.appendChild(toolbarSpacer);
-        // Fullscreen toggle button
-        if (options.fullScreen) {
-            const toolbarRight = document.createElement('div');
-            toolbarRight.style.display = 'flex';
-            toolbarRight.style.alignItems = 'center';
-            toolbarRight.style.gap = '8px';
-            this.fullscreenBtn = document.createElement('button');
-            this.fullscreenBtn.type = 'button';
-            this.fullscreenBtn.className = 'ogrid-fullscreen-btn';
-            this.fullscreenBtn.title = 'Fullscreen';
-            this.fullscreenBtn.setAttribute('aria-label', 'Fullscreen');
-            this.fullscreenBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="10 2 14 2 14 6"/><polyline points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="10" y2="6"/><line x1="2" y1="14" x2="6" y2="10"/></svg>';
-            this.fullscreenBtn.addEventListener('click', () => this.toggleFullScreen());
-            toolbarRight.appendChild(this.fullscreenBtn);
-            this.toolbarEl.appendChild(toolbarRight);
-            // ESC key to exit fullscreen
-            const handleEscKey = (e) => {
-                if (e.key === 'Escape' && this.isFullScreen)
-                    this.toggleFullScreen();
-            };
-            document.addEventListener('keydown', handleEscKey);
-            this.unsubscribes.push(() => document.removeEventListener('keydown', handleEscKey));
-        }
-        this.containerEl.appendChild(this.toolbarEl);
-        // Body area (holds sidebar + table, side by side)
-        this.bodyArea = document.createElement('div');
-        this.bodyArea.className = 'ogrid-body-area';
-        this.bodyArea.style.display = 'flex';
-        this.bodyArea.style.flex = '1';
-        this.bodyArea.style.overflow = 'hidden';
-        this.containerEl.appendChild(this.bodyArea);
-        // Table container (inside body area)
-        this.tableContainer = document.createElement('div');
-        this.tableContainer.className = 'ogrid-table-container';
-        this.tableContainer.style.flex = '1';
-        this.tableContainer.style.overflow = 'auto';
-        this.tableContainer.style.position = 'relative';
-        this.bodyArea.appendChild(this.tableContainer);
-        // Status bar container
-        this.statusBarContainer = document.createElement('div');
-        this.statusBarContainer.className = 'ogrid-status-bar-container';
-        this.containerEl.appendChild(this.statusBarContainer);
-        // Pagination container
-        this.paginationContainer = document.createElement('div');
-        this.paginationContainer.className = 'ogrid-pagination-container';
-        this.containerEl.appendChild(this.paginationContainer);
-        container.appendChild(this.containerEl);
-        // Create layout state (measures container, tracks column sizing)
-        this.layoutState = new TableLayoutState();
-        this.layoutState.observeContainer(this.tableContainer);
-        // Create sub-components
-        this.renderer = new TableRenderer(this.tableContainer, this.state);
-        this.pagination = new PaginationControls(this.paginationContainer, this.state);
-        this.statusBar = new StatusBar(this.statusBarContainer);
-        this.columnChooser = new ColumnChooser(this.toolbarEl, this.state);
-        // Initialize header filter state
-        this.headerFilterState = new HeaderFilterState((key, value) => {
-            this.state.setFilter(key, value);
-        });
-        this.headerFilterComponent = new HeaderFilter(this.headerFilterState);
-        this.buildFilterConfigs();
-        try {
-            // Pass filter config to renderer for filter icons in headers
-            this.renderer.setHeaderFilterState(this.headerFilterState, this.filterConfigs);
-            this.renderer.setOnFilterIconClick((columnId, headerEl) => {
-                this.handleFilterIconClick(columnId, headerEl);
-            });
-            // Initialize sidebar if configured
-            if (options.sideBar) {
-                this.sideBarState = new SideBarState(options.sideBar);
-                this.sideBarContainer = document.createElement('div');
-                this.sideBarContainer.className = 'ogrid-sidebar-container';
-                this.sideBarComponent = new SideBar(this.sideBarContainer, this.sideBarState);
-                if (this.bodyArea) {
-                    if (this.sideBarState.position === 'left') {
-                        this.bodyArea.insertBefore(this.sideBarContainer, this.tableContainer);
-                    }
-                    else {
-                        this.bodyArea.appendChild(this.sideBarContainer);
-                    }
-                }
-                this.unsubscribes.push(this.sideBarState.onChange(() => {
-                    this.renderingHelper.renderSideBar();
-                }));
-            }
-            // Initialize column pinning (always active, even without interaction)
-            const flatCols = flattenColumns(options.columns);
-            this.pinningState = new ColumnPinningState(options.pinnedColumns, flatCols);
-            // Initialize row selection (always active if rowSelection is set)
-            if (options.rowSelection && options.rowSelection !== 'none') {
-                this.rowSelectionState = new RowSelectionState(options.rowSelection, options.getRowId);
-                // Wire row selection API methods
-                this.api.getSelectedRows = () => {
-                    return Array.from(this.rowSelectionState?.selectedRowIds ?? []);
-                };
-                this.api.selectAll = () => {
-                    const { items } = this.state.getProcessedItems();
-                    this.rowSelectionState?.handleSelectAll(true, items);
-                };
-                this.api.deselectAll = () => {
-                    const { items } = this.state.getProcessedItems();
-                    this.rowSelectionState?.handleSelectAll(false, items);
-                };
-                this.api.setSelectedRows = (rowIds) => {
-                    const { items } = this.state.getProcessedItems();
-                    this.rowSelectionState?.updateSelection(new Set(rowIds), items);
-                };
-                this.unsubscribes.push(this.rowSelectionState.onRowSelectionChange(() => {
-                    this.renderingHelper.updateRendererInteractionState();
-                }));
-            }
-            // Create rendering helper (uses lazy context — state objects populated after interaction init)
-            this.renderingHelper = this.createRenderingHelper();
-            // Initial render (must happen before interaction init so wrapper DOM exists)
-            this.renderer.render();
-            // Initialize interaction features if enabled (default: true for cellSelection)
-            const shouldEnableInteraction = options.cellSelection !== false || options.editable === true;
-            if (shouldEnableInteraction) {
-                const result = this.eventWiringHelper.initializeInteraction(options, this.state, this.renderer, this.tableContainer, this.layoutState, this.rowSelectionState, this.pinningState, {
-                    updateRendererInteractionState: () => this.renderingHelper.updateRendererInteractionState(),
-                    updateDragAttributes: () => this.renderingHelper.updateDragAttributes(),
-                    clearCachedDragCells: () => this.renderingHelper.clearCachedDragCells(),
-                    showContextMenu: (x, y) => this.showContextMenu(x, y),
-                    startCellEdit: (rowId, columnId) => this.startCellEdit(rowId, columnId),
-                });
-                // Store all created state objects
-                this.selectionState = result.selectionState;
-                this.keyboardNavState = result.keyboardNavState;
-                this.clipboardState = result.clipboardState;
-                this.undoRedoState = result.undoRedoState;
-                this.resizeState = result.resizeState;
-                this.fillHandleState = result.fillHandleState;
-                this.reorderState = result.reorderState;
-                this.marchingAnts = result.marchingAnts;
-                this.cellEditor = result.cellEditor;
-                this.contextMenu = result.contextMenu;
-                this.unsubscribes.push(...result.unsubscribes);
-            }
-            // Subscribe to state changes
-            this.unsubscribes.push(this.state.onStateChange(() => {
-                this.renderingHelper.renderAll();
-            }));
-            // Subscribe to pinning changes
-            this.unsubscribes.push(this.pinningState.onPinningChange(() => {
-                this.renderingHelper.updateRendererInteractionState();
-            }));
-            // Subscribe to header filter state changes
-            this.unsubscribes.push(this.headerFilterState.onChange(() => {
-                this.renderingHelper.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.renderingHelper.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.renderingHelper.renderAll();
-        }
-        catch (e) {
-            this.destroy();
-            throw e;
-        }
-    }
-    /** Creates the OGridRenderingContext that bridges OGrid state to the rendering helper. */
-    createRenderingHelper() {
-        const liveGetter = (getter) => ({ get: getter, enumerable: true, configurable: true });
-        const ctx = {
-            options: this.options,
-            state: this.state,
-            renderer: this.renderer,
-            pagination: this.pagination,
-            statusBar: this.statusBar,
-            columnChooser: this.columnChooser,
-            layoutState: this.layoutState,
-            tableContainer: this.tableContainer,
-            headerFilterState: this.headerFilterState,
-            headerFilterComponent: this.headerFilterComponent,
-            filterConfigs: this.filterConfigs,
-            setLoadingOverlay: (el) => { this.loadingOverlay = el; },
-            handleCellClick: (rowIndex, colIndex) => this.handleCellClick(rowIndex, colIndex),
-            handleCellMouseDown: (rowIndex, colIndex, e) => this.handleCellMouseDown(rowIndex, colIndex, e),
-            handleCellContextMenu: (rowIndex, colIndex, e) => this.handleCellContextMenu(rowIndex, colIndex, e),
-            startCellEdit: (rowId, columnId) => this.startCellEdit(rowId, columnId),
-            showContextMenu: (x, y) => this.showContextMenu(x, y),
-        };
-        Object.defineProperties(ctx, {
-            selectionState: liveGetter(() => this.selectionState),
-            keyboardNavState: liveGetter(() => this.keyboardNavState),
-            clipboardState: liveGetter(() => this.clipboardState),
-            undoRedoState: liveGetter(() => this.undoRedoState),
-            resizeState: liveGetter(() => this.resizeState),
-            fillHandleState: liveGetter(() => this.fillHandleState),
-            rowSelectionState: liveGetter(() => this.rowSelectionState),
-            pinningState: liveGetter(() => this.pinningState),
-            reorderState: liveGetter(() => this.reorderState),
-            virtualScrollState: liveGetter(() => this.virtualScrollState),
-            marchingAnts: liveGetter(() => this.marchingAnts),
-            cellEditor: liveGetter(() => this.cellEditor),
-            sideBarState: liveGetter(() => this.sideBarState),
-            sideBarComponent: liveGetter(() => this.sideBarComponent),
-            loadingOverlay: liveGetter(() => this.loadingOverlay),
-        });
-        return new OGridRendering(ctx);
-    }
-    handleCellClick(rowIndex, colIndex) {
-        if (!this.selectionState)
-            return;
-        // setActiveCell also sets a single-cell selectionRange internally.
-        // The selectionChange subscription handles re-rendering.
-        this.selectionState.setActiveCell({ rowIndex, columnIndex: colIndex });
-    }
-    handleCellMouseDown(rowIndex, colIndex, e) {
-        if (!this.selectionState)
-            return;
-        e.preventDefault();
-        this.selectionState.startDrag(rowIndex, colIndex);
-        // Apply drag attributes immediately for instant visual feedback on the initial cell
-        setTimeout(() => this.renderingHelper.updateDragAttributes(), 0);
-    }
-    handleCellContextMenu(rowIndex, colIndex, e) {
-        e.preventDefault();
-        if (!this.contextMenu || !this.selectionState || !this.clipboardState || !this.undoRedoState)
-            return;
-        // Set active cell if not already set
-        if (!this.selectionState.activeCell || this.selectionState.activeCell.rowIndex !== rowIndex || this.selectionState.activeCell.columnIndex !== colIndex) {
-            this.selectionState.setActiveCell({ rowIndex, columnIndex: colIndex });
-            this.renderingHelper.updateRendererInteractionState();
-        }
-        this.showContextMenu(e.clientX, e.clientY);
-    }
-    showContextMenu(x, y) {
-        if (!this.contextMenu || !this.clipboardState || !this.undoRedoState || !this.keyboardNavState || !this.selectionState)
-            return;
-        this.contextMenu.show(x, y, {
-            onCopy: () => this.clipboardState?.handleCopy(),
-            onCut: () => this.clipboardState?.handleCut(),
-            onPaste: () => void this.clipboardState?.handlePaste(),
-            onSelectAll: () => {
-                const { items } = this.state.getProcessedItems();
-                const visibleCols = this.state.visibleColumnDefs;
-                if (items.length > 0 && visibleCols.length > 0) {
-                    this.selectionState?.setSelectionRange({
-                        startRow: 0,
-                        startCol: 0,
-                        endRow: items.length - 1,
-                        endCol: visibleCols.length - 1,
-                    });
-                    this.renderingHelper.updateRendererInteractionState();
-                }
-            },
-            onUndo: () => this.undoRedoState?.undo(),
-            onRedo: () => this.undoRedoState?.redo(),
-        }, this.undoRedoState.canUndo, this.undoRedoState.canRedo, this.selectionState.selectionRange);
-    }
-    startCellEdit(rowId, columnId) {
-        if (!this.cellEditor || !this.undoRedoState)
-            return;
-        const { items } = this.state.getProcessedItems();
-        const visibleCols = this.state.visibleColumnDefs;
-        const item = items.find((it) => this.state.getRowId(it) === rowId);
-        const column = visibleCols.find((col) => col.columnId === columnId);
-        if (!item || !column)
-            return;
-        const wrapper = this.renderer.getWrapperElement();
-        if (!wrapper)
-            return;
-        // Find the row first, then the cell within it
-        const row = wrapper.querySelector(`tr[data-row-id="${rowId}"]`);
-        if (!row)
-            return;
-        const cell = row.querySelector(`td[data-column-id="${columnId}"]`);
-        if (!cell)
-            return;
-        const rowIndex = items.indexOf(item);
-        const onCommit = (_rid, cid, value) => {
-            // Use the already-resolved item and look up the committed column
-            const col = visibleCols.find((c) => c.columnId === cid);
-            if (!col)
-                return;
-            // NOTE: Direct mutation on the item reference. This updates the in-memory data
-            // so subsequent renders reflect the new value before the consumer calls setRowData.
-            const oldValue = item[cid];
-            item[cid] = value;
-            const wrapped = this.undoRedoState?.getWrappedCallback();
-            if (wrapped) {
-                wrapped({
-                    item,
-                    columnId: cid,
-                    oldValue,
-                    newValue: value,
-                    rowIndex,
-                });
-            }
-            this.renderingHelper.updateRendererInteractionState();
-        };
-        const onCancel = () => {
-            this.renderingHelper.updateRendererInteractionState();
-        };
-        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);
-        for (const col of columns) {
-            const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
-            if (filterable && filterable.type) {
-                this.filterConfigs.set(col.columnId, {
-                    columnId: col.columnId,
-                    filterField: filterable.filterField ?? col.columnId,
-                    filterType: filterable.type,
-                });
-            }
-        }
-    }
-    handleFilterIconClick(columnId, headerEl) {
-        const config = this.filterConfigs.get(columnId);
-        if (!config)
-            return;
-        if (this.headerFilterState.openColumnId === columnId) {
-            this.headerFilterState.close();
-            return;
-        }
-        // Create a temporary popover element to pass to HeaderFilterState
-        const tempPopover = document.createElement('div');
-        this.headerFilterState.setFilters(this.state.filters);
-        this.headerFilterState.setFilterOptions(this.state.filterOptions);
-        this.headerFilterState.open(columnId, config, headerEl, tempPopover);
-    }
-    // Rendering methods delegated to OGridRendering helper:
-    // - updateRendererInteractionState() -> this.renderingHelper.updateRendererInteractionState()
-    // - updateDragAttributes()           -> this.renderingHelper.updateDragAttributes()
-    // - renderAll()                      -> this.renderingHelper.renderAll()
-    // - renderHeaderFilterPopover()      -> this.renderingHelper.renderHeaderFilterPopover()
-    // - renderSideBar()                  -> this.renderingHelper.renderSideBar()
-    // - renderLoadingOverlay()           -> this.renderingHelper.renderLoadingOverlay()
-    /** Subscribe to grid events. */
-    on(event, handler) {
-        this.events.on(event, handler);
-    }
-    /** Unsubscribe from grid events. */
-    off(event, handler) {
-        this.events.off(event, handler);
-    }
-    /** Toggle fullscreen mode. */
-    toggleFullScreen() {
-        this.isFullScreen = !this.isFullScreen;
-        if (this.isFullScreen) {
-            this.containerEl.classList.add('ogrid-fullscreen');
-        }
-        else {
-            this.containerEl.classList.remove('ogrid-fullscreen');
-        }
-        // Update button icon + label
-        if (this.fullscreenBtn) {
-            this.fullscreenBtn.title = this.isFullScreen ? 'Exit fullscreen' : 'Fullscreen';
-            this.fullscreenBtn.setAttribute('aria-label', this.isFullScreen ? 'Exit fullscreen' : 'Fullscreen');
-            this.fullscreenBtn.innerHTML = this.isFullScreen
-                ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 10 0 10 0 14"/><polyline points="12 6 16 6 16 2"/><line x1="0" y1="10" x2="4" y2="6"/><line x1="16" y1="6" x2="12" y2="10"/></svg>'
-                : '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="10 2 14 2 14 6"/><polyline points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="10" y2="6"/><line x1="2" y1="14" x2="6" y2="10"/></svg>';
-        }
-    }
-    /** Clean up all event listeners and DOM. */
-    destroy() {
-        this.unsubscribes.forEach((unsub) => unsub());
-        this.renderer.destroy();
-        this.pagination.destroy();
-        this.statusBar.destroy();
-        this.columnChooser.destroy();
-        this.sideBarState?.destroy();
-        this.sideBarComponent?.destroy();
-        this.headerFilterState.destroy();
-        this.headerFilterComponent.destroy();
-        this.state.destroy();
-        this.selectionState?.destroy();
-        this.clipboardState?.destroy();
-        this.undoRedoState?.destroy();
-        this.resizeState?.destroy();
-        this.fillHandleState?.destroy();
-        this.rowSelectionState?.destroy();
-        this.pinningState?.destroy();
-        this.reorderState?.destroy();
-        this.virtualScrollState?.destroy();
-        this.marchingAnts?.destroy();
-        this.layoutState.destroy();
-        this.cellEditor?.closeEditor();
-        this.contextMenu?.close();
-        this.events.removeAllListeners();
-        this.containerEl.remove();
-    }
-}