@alaarab/ogrid-js 2.0.22 → 2.1.0

package/dist/esm/state/HeaderFilterState.js

@@ -39,6 +39,10 @@ export class HeaderFilterState {
     setFilterOptions(options) {
         this._filterOptions = options;
     }
+    /** Allow OGrid to update the popover element reference after rendering (for click-outside detection). */
+    setPopoverEl(el) {
+        this._popoverEl = el;
+    }
     getFilterOptions(filterField) {
         return this._filterOptions[filterField] ?? [];
     }
@@ -107,10 +111,14 @@ export class HeaderFilterState {
             }
         };
         setTimeout(() => {
-            document.addEventListener('mousedown', this._clickOutsideHandler, { passive: true });
+            if (this._clickOutsideHandler) {
+                document.addEventListener('mousedown', this._clickOutsideHandler, { passive: true });
+            }
         }, 0);
-        document.addEventListener('keydown', this._escapeHandler, true);
-        this.emitter.emit('change', undefined);
+        if (this._escapeHandler) {
+            document.addEventListener('keydown', this._escapeHandler, true);
+        }
+        this.emitter.emit('change');
     }
     close() {
         this._openColumnId = null;
@@ -125,24 +133,24 @@ export class HeaderFilterState {
             document.removeEventListener('keydown', this._escapeHandler, true);
             this._escapeHandler = null;
         }
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     // --- Temp state setters ---
     setTempTextValue(v) {
         this._tempTextValue = v;
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     setSearchText(v) {
         this._searchText = v;
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     setTempDateFrom(v) {
         this._tempDateFrom = v;
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     setTempDateTo(v) {
         this._tempDateTo = v;
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     // --- Checkbox handlers ---
     handleCheckboxChange(option, checked) {
@@ -152,15 +160,15 @@ export class HeaderFilterState {
         else
             next.delete(option);
         this._tempSelected = next;
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     handleSelectAll(filterField) {
         this._tempSelected = new Set(this.getFilterOptions(filterField));
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     handleClearSelection() {
         this._tempSelected = new Set();
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     // --- Apply/Clear ---
     applyTextFilter(filterField) {

package/dist/esm/state/KeyboardNavState.js

@@ -1,5 +1,4 @@
-import { normalizeSelectionRange, getCellValue, findCtrlArrowTarget as findCtrlTarget, computeTabNavigation } from '@alaarab/ogrid-core';
-import { parseValue } from '@alaarab/ogrid-core';
+import { getCellValue, computeTabNavigation, computeArrowNavigation, applyCellDeletion } from '@alaarab/ogrid-core';
 export class KeyboardNavState {
     constructor(params, getActiveCell, getSelectionRange, setActiveCell, setSelectionRange) {
         this.wrapperRef = null;
@@ -46,114 +45,23 @@ export class KeyboardNavState {
                         void onPaste?.();
                     }
                     break;
-                case 'ArrowDown': {
-                    e.preventDefault();
-                    const ctrl = e.ctrlKey || e.metaKey;
-                    const newRow = ctrl
-                        ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
-                        : Math.min(rowIndex + 1, maxRowIndex);
-                    this.setActiveCell({ rowIndex: newRow, columnIndex });
-                    if (shift) {
-                        this.setSelectionRange(normalizeSelectionRange({
-                            startRow: selectionRange?.startRow ?? rowIndex,
-                            startCol: selectionRange?.startCol ?? dataColIndex,
-                            endRow: newRow,
-                            endCol: selectionRange?.endCol ?? dataColIndex,
-                        }));
-                    }
-                    else {
-                        this.setSelectionRange({
-                            startRow: newRow,
-                            startCol: dataColIndex,
-                            endRow: newRow,
-                            endCol: dataColIndex,
-                        });
-                    }
-                    break;
-                }
-                case 'ArrowUp': {
-                    e.preventDefault();
-                    const ctrl = e.ctrlKey || e.metaKey;
-                    const newRowUp = ctrl
-                        ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
-                        : Math.max(rowIndex - 1, 0);
-                    this.setActiveCell({ rowIndex: newRowUp, columnIndex });
-                    if (shift) {
-                        this.setSelectionRange(normalizeSelectionRange({
-                            startRow: selectionRange?.startRow ?? rowIndex,
-                            startCol: selectionRange?.startCol ?? dataColIndex,
-                            endRow: newRowUp,
-                            endCol: selectionRange?.endCol ?? dataColIndex,
-                        }));
-                    }
-                    else {
-                        this.setSelectionRange({
-                            startRow: newRowUp,
-                            startCol: dataColIndex,
-                            endRow: newRowUp,
-                            endCol: dataColIndex,
-                        });
-                    }
-                    break;
-                }
-                case 'ArrowRight': {
-                    e.preventDefault();
-                    const ctrl = e.ctrlKey || e.metaKey;
-                    let newCol;
-                    if (ctrl && dataColIndex >= 0) {
-                        newCol = findCtrlTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
-                    }
-                    else {
-                        newCol = Math.min(columnIndex + 1, maxColIndex);
-                    }
-                    const newDataCol = newCol - colOffset;
-                    this.setActiveCell({ rowIndex, columnIndex: newCol });
-                    if (shift) {
-                        this.setSelectionRange(normalizeSelectionRange({
-                            startRow: selectionRange?.startRow ?? rowIndex,
-                            startCol: selectionRange?.startCol ?? dataColIndex,
-                            endRow: selectionRange?.endRow ?? rowIndex,
-                            endCol: newDataCol,
-                        }));
-                    }
-                    else {
-                        this.setSelectionRange({
-                            startRow: rowIndex,
-                            startCol: newDataCol,
-                            endRow: rowIndex,
-                            endCol: newDataCol,
-                        });
-                    }
-                    break;
-                }
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'ArrowRight':
                 case 'ArrowLeft': {
                     e.preventDefault();
-                    const ctrl = e.ctrlKey || e.metaKey;
-                    let newColLeft;
-                    if (ctrl && dataColIndex >= 0) {
-                        newColLeft = findCtrlTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
-                    }
-                    else {
-                        newColLeft = Math.max(columnIndex - 1, colOffset);
-                    }
-                    const newDataColLeft = newColLeft - colOffset;
-                    this.setActiveCell({ rowIndex, columnIndex: newColLeft });
-                    if (shift) {
-                        this.setSelectionRange(normalizeSelectionRange({
-                            startRow: selectionRange?.startRow ?? rowIndex,
-                            startCol: selectionRange?.startCol ?? dataColIndex,
-                            endRow: selectionRange?.endRow ?? rowIndex,
-                            endCol: newDataColLeft,
-                        }));
-                    }
-                    else {
-                        this.setSelectionRange({
-                            startRow: rowIndex,
-                            startCol: newDataColLeft,
-                            endRow: rowIndex,
-                            endCol: newDataColLeft,
-                        });
-                    }
+                    const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
+                        direction: e.key,
+                        rowIndex, columnIndex, dataColIndex, colOffset,
+                        maxRowIndex, maxColIndex,
+                        visibleColCount: visibleCols.length,
+                        isCtrl: e.ctrlKey || e.metaKey,
+                        isShift: shift,
+                        selectionRange,
+                        isEmptyAt,
+                    });
+                    this.setActiveCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
+                    this.setSelectionRange(newRange);
                     break;
                 }
                 case 'Tab': {
@@ -265,30 +173,9 @@ export class KeyboardNavState {
                     if (range == null)
                         break;
                     e.preventDefault();
-                    const norm = normalizeSelectionRange(range);
-                    for (let r = norm.startRow; r <= norm.endRow; r++) {
-                        for (let c = norm.startCol; c <= norm.endCol; c++) {
-                            if (r >= items.length || c >= visibleCols.length)
-                                continue;
-                            const item = items[r];
-                            const col = visibleCols[c];
-                            const colEditable = col.editable === true ||
-                                (typeof col.editable === 'function' && col.editable(item));
-                            if (!colEditable)
-                                continue;
-                            const oldValue = getCellValue(item, col);
-                            const result = parseValue('', oldValue, item, col);
-                            if (!result.valid)
-                                continue;
-                            onCellValueChanged({
-                                item,
-                                columnId: col.columnId,
-                                oldValue,
-                                newValue: result.value,
-                                rowIndex: r,
-                            });
-                        }
-                    }
+                    const deleteEvents = applyCellDeletion(range, items, visibleCols);
+                    for (const evt of deleteEvents)
+                        onCellValueChanged(evt);
                     break;
                 }
                 case 'F10':

package/dist/esm/state/RowSelectionState.js

@@ -1,3 +1,4 @@
+import { applyRangeRowSelection, computeRowSelectionState } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
 /**
  * Manages row selection state for single or multiple selection modes with shift-click range support.
@@ -30,21 +31,12 @@ export class RowSelectionState {
             this._lastClickedRow = rowIndex;
             return;
         }
-        const next = new Set(this._selectedRowIds);
+        let next;
         if (shiftKey && this._lastClickedRow >= 0 && this._lastClickedRow !== rowIndex) {
-            const start = Math.min(this._lastClickedRow, rowIndex);
-            const end = Math.max(this._lastClickedRow, rowIndex);
-            for (let i = start; i <= end; i++) {
-                if (i < items.length) {
-                    const id = this._getRowId(items[i]);
-                    if (checked)
-                        next.add(id);
-                    else
-                        next.delete(id);
-                }
-            }
+            next = applyRangeRowSelection(this._lastClickedRow, rowIndex, checked, items, this._getRowId, this._selectedRowIds);
         }
         else {
+            next = new Set(this._selectedRowIds);
             if (checked)
                 next.add(rowId);
             else
@@ -62,11 +54,10 @@ export class RowSelectionState {
         }
     }
     isAllSelected(items) {
-        return items.length > 0 && items.every((item) => this._selectedRowIds.has(this._getRowId(item)));
+        return computeRowSelectionState(this._selectedRowIds, items, this._getRowId).allSelected;
     }
     isSomeSelected(items) {
-        const allSelected = this.isAllSelected(items);
-        return !allSelected && items.some((item) => this._selectedRowIds.has(this._getRowId(item)));
+        return computeRowSelectionState(this._selectedRowIds, items, this._getRowId).someSelected;
     }
     getSelectedRows(items) {
         return items.filter((item) => this._selectedRowIds.has(this._getRowId(item)));

package/dist/esm/state/SideBarState.js

@@ -23,7 +23,7 @@ export class SideBarState {
     get isOpen() { return this._activePanel !== null; }
     setActivePanel(panel) {
         this._activePanel = panel;
-        this.emitter.emit('change', undefined);
+        this.emitter.emit('change');
     }
     toggle(panel) {
         this.setActivePanel(this._activePanel === panel ? null : panel);

package/dist/esm/state/TableLayoutState.js

@@ -67,11 +67,13 @@ export class TableLayoutState {
     }
     /** Remove overrides for columns that no longer exist. */
     cleanupOverrides(validColumnIds) {
+        const next = {};
         let changed = false;
-        const next = { ...this._columnSizingOverrides };
-        for (const key of Object.keys(next)) {
-            if (!validColumnIds.has(key)) {
-                delete next[key];
+        for (const [key, value] of Object.entries(this._columnSizingOverrides)) {
+            if (validColumnIds.has(key)) {
+                next[key] = value;
+            }
+            else {
                 changed = true;
             }
         }

package/dist/esm/utils/getCellCoordinates.js

@@ -0,0 +1,15 @@
+/**
+ * Extracts row and column indices from a cell element's data attributes.
+ * Returns null if the element lacks the attributes or they are not valid numbers.
+ */
+export function getCellCoordinates(cell) {
+    const rowStr = cell.getAttribute('data-row-index');
+    const colStr = cell.getAttribute('data-col-index');
+    if (rowStr == null || colStr == null)
+        return null;
+    const rowIndex = parseInt(rowStr, 10);
+    const colIndex = parseInt(colStr, 10);
+    if (Number.isNaN(rowIndex) || Number.isNaN(colIndex))
+        return null;
+    return { rowIndex, colIndex };
+}

package/dist/esm/utils/index.js

@@ -1 +1,2 @@
 export { debounce } from './debounce';
+export { getCellCoordinates } from './getCellCoordinates';

package/dist/types/OGrid.d.ts

@@ -1,3 +1,96 @@
+/**
+ * @module OGrid (Vanilla JS)
+ *
+ * Entry point for the vanilla JS data grid. Full feature parity with the React
+ * package, implemented as class-based state objects wired together by EventEmitter.
+ *
+ * ## Architecture
+ *
+ * ```
+ * OGrid (orchestrator)
+ * |
+ * |-- GridState              Core data state (sorting, filtering, pagination, columns)
+ * |     \-- EventEmitter     emits 'stateChange' --> OGrid.renderAll()
+ * |
+ * |-- TableRenderer          DOM rendering (<table>, <thead>, <tbody>, pinning, selection CSS)
+ * |     \-- reads GridState + InteractionState to build/patch DOM
+ * |
+ * +-- Interaction States (created if cellSelection or editable enabled)
+ * |   |-- SelectionState       Active cell + range selection + drag selection (RAF)
+ * |   |-- KeyboardNavState     Arrow/Tab/Home/End/Enter/Delete key handling
+ * |   |-- ClipboardState       Copy/Cut/Paste with TSV clipboard format
+ * |   |-- UndoRedoState        Edit history stack with batch support
+ * |   |-- FillHandleState      Drag-to-fill (Excel-style) with RAF + batch undo
+ * |   |-- RowSelectionState    Checkbox row selection (single/multiple, shift-range)
+ * |   |-- ColumnResizeState    Drag column borders to resize
+ * |   |-- ColumnPinningState   Sticky left/right column positioning
+ * |   |-- ColumnReorderState   Drag-to-reorder columns
+ * |   \-- VirtualScrollState   Windowed row rendering with overscan
+ * |
+ * +-- Layout & Filter States (always active)
+ * |   |-- TableLayoutState     ResizeObserver container measurement, column width overrides
+ * |   |-- HeaderFilterState    Per-column filter popover state (text/multiSelect/date)
+ * |   \-- SideBarState         Panel management (columns, filters), position (left/right)
+ * |
+ * +-- UI Components
+ *     |-- PaginationControls   Page navigation with page size dropdown
+ *     |-- StatusBar            Row count, filtered count
+ *     |-- ColumnChooser        Show/hide columns dropdown in toolbar
+ *     |-- SideBar              Sidebar with columns panel + filters panel
+ *     |-- HeaderFilter         Positioned filter popovers per column
+ *     |-- InlineCellEditor     Text/select/checkbox/date inline editors
+ *     |-- ContextMenu          Right-click menu (copy/cut/paste/undo/redo/select all)
+ *     \-- MarchingAntsOverlay  SVG animated copy/cut selection border
+ * ```
+ *
+ * ## Event Flow
+ *
+ * Each state class owns a private EventEmitter<TEvents>. State mutations emit
+ * typed events that OGrid subscribes to during construction. The general flow:
+ *
+ * ```
+ * User action (click, keydown, drag, etc.)
+ *   --> State class mutates internal state, emits event
+ *     --> OGrid subscription handler fires
+ *       --> updateRendererInteractionState() or renderAll()
+ *         --> TableRenderer.update() rebuilds or patches DOM
+ * ```
+ *
+ * For performance-critical paths (drag selection, fill handle, column resize),
+ * state classes throttle updates via requestAnimationFrame and use cached
+ * querySelectorAll results to avoid repeated DOM queries.
+ *
+ * ## Rendering Pipeline
+ *
+ * TableRenderer has two update paths:
+ *   1. Full rebuild  -- renderHeader() + renderBody() when data, columns, or
+ *      sorting/filtering changes (triggered by GridState 'stateChange').
+ *   2. CSS-only patch -- patchSelectionClasses() when only active cell,
+ *      selection range, copy/cut range, or fill handle position changed.
+ *      Uses a signature-based diff (isSelectionOnlyChange) to skip DOM rebuild.
+ *
+ * ## Lifecycle
+ *
+ *   1. Constructor: build DOM layout (toolbar, body area, table container,
+ *      status bar, pagination). Create GridState + TableRenderer.
+ *   2. Initialize: header filters, sidebar, column pinning, row selection.
+ *   3. Initial render: TableRenderer.render() creates <table>/<thead>/<tbody>.
+ *   4. Interaction init: if cellSelection/editable, create SelectionState,
+ *      KeyboardNavState, ClipboardState, UndoRedoState, FillHandleState,
+ *      ColumnResizeState, ColumnReorderState. Attach global mouse handlers.
+ *   5. Event wiring: subscribe to all state emitters. Each fires renderAll()
+ *      or updateRendererInteractionState() as appropriate.
+ *   6. Destroy: unsubscribe all listeners, destroy all state + components,
+ *      remove container from DOM.
+ *
+ * ## Public API
+ *
+ * - `api: IJsOGridApi<T>` -- imperative grid API (setRowData, getSelectedRows,
+ *   exportToCsv, scrollToRow, etc.), created by GridState.getApi() and
+ *   extended by OGrid for row selection and virtual scroll methods.
+ * - `on(event, handler)` / `off(event, handler)` -- external event subscription.
+ * - `destroy()` -- full cleanup.
+ */
 import type { OGridOptions, OGridEvents, IJsOGridApi } from './types/gridTypes';
 export declare class OGrid<T> {
     private state;
@@ -35,14 +128,13 @@ export declare class OGrid<T> {
     private paginationContainer;
     private statusBarContainer;
     private options;
-    private layoutVersion;
+    private renderingHelper;
+    private eventWiringHelper;
     /** The imperative grid API (extends React's IOGridApi with JS-specific methods). */
     readonly api: IJsOGridApi<T>;
     constructor(container: HTMLElement, options: OGridOptions<T>);
-    private initializeInteraction;
-    private attachGlobalHandlers;
-    private updateRendererInteractionState;
-    private updateDragAttributes;
+    /** Creates the OGridRenderingContext that bridges OGrid state to the rendering helper. */
+    private createRenderingHelper;
     private handleCellClick;
     private handleCellMouseDown;
     private handleCellContextMenu;
@@ -50,10 +142,6 @@ export declare class OGrid<T> {
     private startCellEdit;
     private buildFilterConfigs;
     private handleFilterIconClick;
-    private renderHeaderFilterPopover;
-    private renderSideBar;
-    private renderLoadingOverlay;
-    private renderAll;
     /** Subscribe to grid events. */
     on<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
     /** Unsubscribe from grid events. */

package/dist/types/OGridEventWiring.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Event wiring helper for OGrid (Vanilla JS).
+ *
+ * Extracts event subscription setup from OGrid for modularity:
+ *   - initializeInteraction() — creates interaction states and subscribes events
+ *   - attachGlobalHandlers() — global mouse handlers for resize and drag
+ *
+ * Not exported publicly — instantiated and owned by OGrid.
+ */
+import type { OGridOptions } from './types/gridTypes';
+import type { GridState } from './state/GridState';
+import type { TableRenderer } from './renderer/TableRenderer';
+import { SelectionState } from './state/SelectionState';
+import { KeyboardNavState } from './state/KeyboardNavState';
+import { ClipboardState } from './state/ClipboardState';
+import { UndoRedoState } from './state/UndoRedoState';
+import { ColumnResizeState } from './state/ColumnResizeState';
+import { FillHandleState } from './state/FillHandleState';
+import { ColumnReorderState } from './state/ColumnReorderState';
+import { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
+import { InlineCellEditor } from './components/InlineCellEditor';
+import { ContextMenu } from './components/ContextMenu';
+import type { RowSelectionState } from './state/RowSelectionState';
+import type { TableLayoutState } from './state/TableLayoutState';
+import type { ColumnPinningState } from './state/ColumnPinningState';
+import type { RowId } from '@alaarab/ogrid-core';
+/**
+ * Result of initializeInteraction — the created state objects and subscriptions.
+ */
+export interface InteractionResult<T> {
+    selectionState: SelectionState;
+    keyboardNavState: KeyboardNavState<T>;
+    clipboardState: ClipboardState<T>;
+    undoRedoState: UndoRedoState<T>;
+    resizeState: ColumnResizeState;
+    fillHandleState: FillHandleState<T>;
+    reorderState: ColumnReorderState;
+    marchingAnts: MarchingAntsOverlay | null;
+    cellEditor: InlineCellEditor<T>;
+    contextMenu: ContextMenu;
+    unsubscribes: (() => void)[];
+}
+/**
+ * Callbacks from OGrid needed by the event wiring.
+ */
+export interface EventWiringCallbacks<_T> {
+    updateRendererInteractionState: () => void;
+    updateDragAttributes: () => void;
+    clearCachedDragCells: () => void;
+    showContextMenu: (x: number, y: number) => void;
+    startCellEdit: (rowId: RowId, columnId: string) => void;
+}
+export declare class OGridEventWiring<T> {
+    /**
+     * Creates all interaction states, subscribes to their events, and returns
+     * the state objects so OGrid can store them.
+     */
+    initializeInteraction(options: OGridOptions<T>, state: GridState<T>, renderer: TableRenderer<T>, tableContainer: HTMLElement, layoutState: TableLayoutState, rowSelectionState: RowSelectionState<T> | null, pinningState: ColumnPinningState | null, callbacks: EventWiringCallbacks<T>): InteractionResult<T>;
+    private attachGlobalHandlers;
+}

package/dist/types/OGridRendering.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Rendering helper for OGrid (Vanilla JS).
+ *
+ * Extracts rendering logic from OGrid for modularity:
+ *   - updateRendererInteractionState()
+ *   - updateDragAttributes()
+ *   - renderAll()
+ *   - renderHeaderFilterPopover()
+ *   - renderSideBar()
+ *   - renderLoadingOverlay()
+ *
+ * Not exported publicly — instantiated and owned by OGrid.
+ */
+import type { OGridOptions } from './types/gridTypes';
+import type { GridState } from './state/GridState';
+import type { TableRenderer } from './renderer/TableRenderer';
+import type { PaginationControls } from './components/PaginationControls';
+import type { StatusBar } from './components/StatusBar';
+import type { ColumnChooser } from './components/ColumnChooser';
+import type { SideBarState } from './state/SideBarState';
+import type { SideBar } from './components/SideBar';
+import type { HeaderFilterState, HeaderFilterConfig } from './state/HeaderFilterState';
+import type { HeaderFilter } from './components/HeaderFilter';
+import type { SelectionState } from './state/SelectionState';
+import type { KeyboardNavState } from './state/KeyboardNavState';
+import type { ClipboardState } from './state/ClipboardState';
+import type { UndoRedoState } from './state/UndoRedoState';
+import type { ColumnResizeState } from './state/ColumnResizeState';
+import type { FillHandleState } from './state/FillHandleState';
+import type { RowSelectionState } from './state/RowSelectionState';
+import type { ColumnPinningState } from './state/ColumnPinningState';
+import type { ColumnReorderState } from './state/ColumnReorderState';
+import type { VirtualScrollState } from './state/VirtualScrollState';
+import type { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
+import type { InlineCellEditor } from './components/InlineCellEditor';
+import type { TableLayoutState } from './state/TableLayoutState';
+/**
+ * Context object providing access to OGrid's internal state for rendering.
+ * OGrid populates this once during construction and keeps it current.
+ */
+export interface OGridRenderingContext<T> {
+    options: OGridOptions<T>;
+    state: GridState<T>;
+    renderer: TableRenderer<T>;
+    pagination: PaginationControls<T>;
+    statusBar: StatusBar;
+    columnChooser: ColumnChooser<T>;
+    layoutState: TableLayoutState;
+    tableContainer: HTMLElement;
+    selectionState: SelectionState | null;
+    keyboardNavState: KeyboardNavState<T> | null;
+    clipboardState: ClipboardState<T> | null;
+    undoRedoState: UndoRedoState<T> | null;
+    resizeState: ColumnResizeState | null;
+    fillHandleState: FillHandleState<T> | null;
+    rowSelectionState: RowSelectionState<T> | null;
+    pinningState: ColumnPinningState | null;
+    reorderState: ColumnReorderState | null;
+    virtualScrollState: VirtualScrollState | null;
+    marchingAnts: MarchingAntsOverlay | null;
+    cellEditor: InlineCellEditor<T> | null;
+    sideBarState: SideBarState | null;
+    sideBarComponent: SideBar | null;
+    headerFilterState: HeaderFilterState;
+    headerFilterComponent: HeaderFilter;
+    filterConfigs: Map<string, HeaderFilterConfig>;
+    loadingOverlay: HTMLElement | null;
+    setLoadingOverlay: (el: HTMLElement | null) => void;
+    handleCellClick: (rowIndex: number, colIndex: number) => void;
+    handleCellMouseDown: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
+    handleCellContextMenu: (rowIndex: number, colIndex: number, e: MouseEvent) => void;
+    startCellEdit: (rowId: import('@alaarab/ogrid-core').RowId, columnId: string) => void;
+    showContextMenu: (x: number, y: number) => void;
+}
+export declare class OGridRendering<T> {
+    private ctx;
+    private layoutVersion;
+    /** Cached DOM cells during drag to avoid querySelectorAll on every RAF frame. */
+    private cachedDragCells;
+    constructor(ctx: OGridRenderingContext<T>);
+    /** Increment layout version (e.g., when items, columns, sizing change). */
+    incrementLayoutVersion(): void;
+    /** Clear cached drag cells. */
+    clearCachedDragCells(): void;
+    /** Get current layout version. */
+    getLayoutVersion(): number;
+    updateRendererInteractionState(): void;
+    updateDragAttributes(): void;
+    renderAll(): void;
+    renderHeaderFilterPopover(): void;
+    renderSideBar(): void;
+    renderLoadingOverlay(): void;
+}

package/dist/types/components/ColumnChooser.d.ts

@@ -5,8 +5,13 @@ export declare class ColumnChooser<T> {
     private el;
     private dropdown;
     private isOpen;
+    private initialized;
     constructor(container: HTMLElement, state: GridState<T>);
     render(): void;
+    /** Initial DOM creation — called once. */
+    private createDOM;
+    /** Update checkbox checked states without destroying the dropdown. */
+    private updateDropdownState;
     private toggle;
     private open;
     private close;

package/dist/types/components/InlineCellEditor.d.ts

@@ -17,6 +17,11 @@ export declare class InlineCellEditor<T> {
     } | null;
     closeEditor(): void;
     private createEditor;
+    /**
+     * Shared factory for text/date input editors — both types have identical event handling,
+     * differing only in input.type and initial value formatting.
+     */
+    private createInputEditor;
     private createTextEditor;
     private createCheckboxEditor;
     private createDateEditor;