@alaarab/ogrid-js 2.0.19 → 2.0.22

package/dist/esm/OGrid.js

@@ -405,8 +405,8 @@ export class OGrid {
             document.body.style.cursor = 'col-resize';
             this.resizeState?.startResize(columnId, clientX, currentWidth);
         };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('mousemove', handleMouseMove, { passive: true });
+        document.addEventListener('mouseup', handleMouseUp, { passive: true });
         // Store references for cleanup
         this.unsubscribes.push(() => {
             document.removeEventListener('mousemove', handleMouseMove);
@@ -489,7 +489,8 @@ export class OGrid {
         const minC = norm.startCol;
         const maxC = norm.endCol;
         const cells = wrapper.querySelectorAll('td[data-row-index][data-col-index]');
-        for (const cell of Array.from(cells)) {
+        for (let _i = 0; _i < cells.length; _i++) {
+            const cell = cells[_i];
             const el = cell;
             const rowIndex = parseInt(el.getAttribute('data-row-index') ?? '-1', 10);
             const colIndex = parseInt(el.getAttribute('data-col-index') ?? '-1', 10);
@@ -803,7 +804,7 @@ export class OGrid {
         const { totalCount } = this.state.getProcessedItems();
         // Update virtual scroll with current total row count
         this.virtualScrollState?.setTotalRows(totalCount);
-        this.pagination.render(totalCount);
+        this.pagination.render(totalCount, this.options.pageSizeOptions);
         this.statusBar.render({ totalCount });
         this.columnChooser.render();
         this.renderSideBar();

package/dist/esm/components/ContextMenu.js

@@ -66,13 +66,13 @@ export class ContextMenu {
             else {
                 menuItem.addEventListener('mouseenter', () => {
                     menuItem.style.backgroundColor = 'var(--ogrid-bg-hover, #f5f5f5)';
-                });
+                }, { passive: true });
                 menuItem.addEventListener('mouseleave', () => {
                     menuItem.style.backgroundColor = '';
-                });
+                }, { passive: true });
                 menuItem.addEventListener('click', () => {
                     this.handleItemClick(item.id);
-                });
+                }, { passive: true });
             }
             this.menu.appendChild(menuItem);
         }
@@ -84,7 +84,7 @@ export class ContextMenu {
             }
         };
         setTimeout(() => {
-            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener('mousedown', handleClickOutside, { passive: true });
         }, 0);
     }
     close() {

package/dist/esm/components/InlineCellEditor.js

@@ -267,7 +267,8 @@ export class InlineCellEditor {
         dropdown.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
         wrapper.appendChild(dropdown);
         let highlightedIndex = Math.max(values.findIndex((v) => String(v) === String(value)), 0);
-        const renderOptions = () => {
+        // Build all option elements once
+        const buildOptions = () => {
             dropdown.innerHTML = '';
             for (let i = 0; i < values.length; i++) {
                 const val = values[i];
@@ -291,25 +292,42 @@ export class InlineCellEditor {
                 dropdown.appendChild(option);
             }
         };
+        // Only update CSS class on old/new highlighted item — avoids rebuilding the DOM
+        const updateHighlight = (prevIndex, nextIndex) => {
+            const prev = dropdown.children[prevIndex];
+            const next = dropdown.children[nextIndex];
+            if (prev) {
+                prev.style.background = '';
+                prev.setAttribute('aria-selected', 'false');
+            }
+            if (next) {
+                next.style.background = 'var(--ogrid-bg-hover, #e8f0fe)';
+                next.setAttribute('aria-selected', 'true');
+            }
+        };
         const scrollHighlightedIntoView = () => {
             const highlighted = dropdown.children[highlightedIndex];
             highlighted?.scrollIntoView({ block: 'nearest' });
         };
-        renderOptions();
+        buildOptions();
         wrapper.addEventListener('keydown', (e) => {
             switch (e.key) {
-                case 'ArrowDown':
+                case 'ArrowDown': {
                     e.preventDefault();
+                    const prevDown = highlightedIndex;
                     highlightedIndex = Math.min(highlightedIndex + 1, values.length - 1);
-                    renderOptions();
+                    updateHighlight(prevDown, highlightedIndex);
                     scrollHighlightedIntoView();
                     break;
-                case 'ArrowUp':
+                }
+                case 'ArrowUp': {
                     e.preventDefault();
+                    const prevUp = highlightedIndex;
                     highlightedIndex = Math.max(highlightedIndex - 1, 0);
-                    renderOptions();
+                    updateHighlight(prevUp, highlightedIndex);
                     scrollHighlightedIntoView();
                     break;
+                }
                 case 'Enter':
                     e.preventDefault();
                     e.stopPropagation();
@@ -386,10 +404,10 @@ export class InlineCellEditor {
                 });
                 option.addEventListener('mouseenter', () => {
                     option.style.backgroundColor = 'var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04))';
-                });
+                }, { passive: true });
                 option.addEventListener('mouseleave', () => {
                     option.style.backgroundColor = 'var(--ogrid-bg, #fff)';
-                });
+                }, { passive: true });
                 dropdown.appendChild(option);
             }
         };

package/dist/esm/components/PaginationControls.js

@@ -5,10 +5,10 @@ export class PaginationControls {
         this.container = container;
         this.state = state;
     }
-    render(totalCount) {
+    render(totalCount, pageSizeOptions) {
         if (this.el)
             this.el.remove();
-        const vm = getPaginationViewModel(this.state.page, this.state.pageSize, totalCount);
+        const vm = getPaginationViewModel(this.state.page, this.state.pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined);
         if (!vm)
             return; // No pagination if totalCount is 0
         this.el = document.createElement('div');

package/dist/esm/renderer/TableRenderer.js

@@ -12,6 +12,20 @@ export class TableRenderer {
         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;
+        // 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;
     }
@@ -28,6 +42,72 @@ export class TableRenderer {
     setInteractionState(state) {
         this.interactionState = state;
     }
+    getCellFromEvent(e) {
+        const target = e.target;
+        const cell = target.closest('td[data-row-index]');
+        if (!cell)
+            return null;
+        const rowIndex = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+        const colIndex = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+        if (Number.isNaN(rowIndex) || Number.isNaN(colIndex))
+            return null;
+        return { el: cell, rowIndex, colIndex };
+    }
+    attachBodyDelegation() {
+        if (!this.tbody)
+            return;
+        this._tbodyClickHandler = (e) => {
+            const cell = this.getCellFromEvent(e);
+            if (!cell)
+                return;
+            this.interactionState?.onCellClick?.(cell.rowIndex, cell.colIndex, e);
+        };
+        this._tbodyMousedownHandler = (e) => {
+            const cell = this.getCellFromEvent(e);
+            if (!cell)
+                return;
+            this.interactionState?.onCellMouseDown?.(cell.rowIndex, cell.colIndex, 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?.(cell.rowIndex, cell.colIndex, rowId, columnId);
+        };
+        this._tbodyContextmenuHandler = (e) => {
+            const cell = this.getCellFromEvent(e);
+            if (!cell)
+                return;
+            this.interactionState?.onCellContextMenu?.(cell.rowIndex, cell.colIndex, 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;
+    }
     getWrapperElement() {
         return this.wrapperEl;
     }
@@ -41,6 +121,10 @@ export class TableRenderer {
         wrapper.setAttribute('role', 'grid');
         wrapper.setAttribute('tabindex', '0'); // Make focusable for keyboard nav
         wrapper.style.position = 'relative'; // For MarchingAnts absolute positioning
+        const rowHeight = this.state._options?.rowHeight;
+        if (rowHeight) {
+            wrapper.style.setProperty('--ogrid-row-height', `${rowHeight}px`);
+        }
         const ariaLabel = this.state._ariaLabel;
         if (ariaLabel) {
             wrapper.setAttribute('aria-label', ariaLabel);
@@ -56,6 +140,7 @@ export class TableRenderer {
         // 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)
@@ -64,17 +149,220 @@ export class TableRenderer {
         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 rowIndex = parseInt(el.getAttribute('data-row-index'), 10);
+            const globalColIndex = parseInt(el.getAttribute('data-col-index'), 10);
+            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;
         }
-        this.thead.innerHTML = '';
-        this.renderHeader();
+        // 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;
@@ -148,14 +436,6 @@ export class TableRenderer {
                                 this.state.toggleSort(cell.columnDef.columnId);
                             }
                         });
-                        // Sort indicator
-                        const sort = this.state.sort;
-                        if (sort && cell.columnDef && sort.field === cell.columnDef.columnId) {
-                            const indicator = document.createElement('span');
-                            indicator.className = 'ogrid-sort-indicator';
-                            indicator.textContent = sort.direction === 'asc' ? ' \u25B2' : ' \u25BC';
-                            th.appendChild(indicator);
-                        }
                     }
                     if (!cell.isGroup && cell.columnDef) {
                         th.setAttribute('data-column-id', cell.columnDef.columnId);
@@ -211,13 +491,6 @@ export class TableRenderer {
                 if (col.sortable) {
                     th.classList.add('ogrid-sortable');
                     th.addEventListener('click', () => this.state.toggleSort(col.columnId));
-                    const sort = this.state.sort;
-                    if (sort && sort.field === col.columnId) {
-                        const indicator = document.createElement('span');
-                        indicator.className = 'ogrid-sort-indicator';
-                        indicator.textContent = sort.direction === 'asc' ? ' \u25B2' : ' \u25BC';
-                        th.appendChild(indicator);
-                    }
                 }
                 if (col.type === 'numeric') {
                     th.style.textAlign = 'right';
@@ -429,19 +702,7 @@ export class TableRenderer {
                     if (editingCell && editingCell.rowId === rowId && editingCell.columnId === col.columnId) {
                         td.style.visibility = 'hidden';
                     }
-                    // Cell interaction handlers
-                    td.addEventListener('click', (e) => {
-                        this.interactionState?.onCellClick?.(rowIndex, globalColIndex, e);
-                    });
-                    td.addEventListener('mousedown', (e) => {
-                        this.interactionState?.onCellMouseDown?.(rowIndex, globalColIndex, e);
-                    });
-                    td.addEventListener('dblclick', () => {
-                        this.interactionState?.onCellDoubleClick?.(rowIndex, globalColIndex, rowId, col.columnId);
-                    });
-                    td.addEventListener('contextmenu', (e) => {
-                        this.interactionState?.onCellContextMenu?.(rowIndex, globalColIndex, e);
-                    });
+                    // Cell interaction is handled by delegated listeners on tbody
                 }
                 // Custom DOM render
                 if (col.renderCell) {
@@ -531,6 +792,7 @@ export class TableRenderer {
         this.dropIndicator.style.left = `${relativeX}px`;
     }
     destroy() {
+        this.detachBodyDelegation();
         this.container.innerHTML = '';
         this.table = null;
         this.thead = null;

package/dist/esm/state/ColumnReorderState.js

@@ -55,8 +55,8 @@ export class ColumnReorderState {
             this.pinnedColumns = undefined;
         }
         this.draggedPinState = getPinStateForColumn(columnId, this.pinnedColumns);
-        window.addEventListener('mousemove', this.onMoveBound, true);
-        window.addEventListener('mouseup', this.onUpBound, true);
+        window.addEventListener('mousemove', this.onMoveBound, { capture: true, passive: true });
+        window.addEventListener('mouseup', this.onUpBound, { capture: true, passive: true });
         this.emitter.emit('stateChange', { isDragging: true, dropIndicatorX: null });
     }
     handleMouseMove(event) {

package/dist/esm/state/FillHandleState.js

@@ -14,6 +14,7 @@ export class FillHandleState {
         this.rafHandle = 0;
         this.liveFillRange = null;
         this.lastMousePos = null;
+        this.cachedCells = null;
         this.params = params;
         this.getSelectionRange = getSelectionRange;
         this.setSelectionRange = setSelectionRange;
@@ -46,8 +47,10 @@ export class FillHandleState {
         this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
         this.fillDragEnd = { endRow: range.startRow, endCol: range.startCol };
         this.liveFillRange = null;
-        window.addEventListener('mousemove', this.onMoveBound, true);
-        window.addEventListener('mouseup', this.onUpBound, true);
+        // Cache querySelectorAll result once on drag start
+        this.cachedCells = this.wrapperRef ? this.wrapperRef.querySelectorAll('[data-row-index][data-col-index]') : null;
+        window.addEventListener('mousemove', this.onMoveBound, { capture: true, passive: true });
+        window.addEventListener('mouseup', this.onUpBound, { capture: true, passive: true });
     }
     onMouseMove(e) {
         if (!this._isFillDragging || !this.fillDragStart)
@@ -170,15 +173,14 @@ export class FillHandleState {
         });
     }
     applyDragAttrs(range) {
-        const wrapper = this.wrapperRef;
-        if (!wrapper)
+        const cells = this.cachedCells;
+        if (!cells)
             return;
         const colOff = this.params.colOffset;
         const minR = Math.min(range.startRow, range.endRow);
         const maxR = Math.max(range.startRow, range.endRow);
         const minC = Math.min(range.startCol, range.endCol);
         const maxC = Math.max(range.startCol, range.endCol);
-        const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
         for (let i = 0; i < cells.length; i++) {
             const el = cells[i];
             const r = parseInt(el.getAttribute('data-row-index'), 10);
@@ -195,12 +197,12 @@ export class FillHandleState {
         }
     }
     clearDragAttrs() {
-        const wrapper = this.wrapperRef;
-        if (!wrapper)
-            return;
-        const marked = wrapper.querySelectorAll('[data-drag-range]');
-        for (let i = 0; i < marked.length; i++)
-            marked[i].removeAttribute('data-drag-range');
+        const cells = this.cachedCells;
+        if (cells) {
+            for (let i = 0; i < cells.length; i++)
+                cells[i].removeAttribute('data-drag-range');
+        }
+        this.cachedCells = null;
     }
     onFillRangeChange(handler) {
         this.emitter.on('fillRangeChange', handler);

package/dist/esm/state/HeaderFilterState.js

@@ -107,7 +107,7 @@ export class HeaderFilterState {
             }
         };
         setTimeout(() => {
-            document.addEventListener('mousedown', this._clickOutsideHandler);
+            document.addEventListener('mousedown', this._clickOutsideHandler, { passive: true });
         }, 0);
         document.addEventListener('keydown', this._escapeHandler, true);
         this.emitter.emit('change', undefined);

package/dist/esm/state/TableLayoutState.js

@@ -38,7 +38,7 @@ export class TableLayoutState {
     }
     /** Set a column width override (from resize drag). */
     setColumnOverride(columnId, widthPx) {
-        this._columnSizingOverrides = { ...this._columnSizingOverrides, [columnId]: widthPx };
+        this._columnSizingOverrides[columnId] = widthPx;
         this.emitter.emit('layoutChange', { type: 'columnOverride' });
     }
     /** Compute minimum table width from visible columns. */

package/dist/esm/state/UndoRedoState.js

@@ -1,20 +1,14 @@
+import { UndoRedoStack } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
 export class UndoRedoState {
     constructor(onCellValueChanged, maxUndoDepth = 100) {
         this.onCellValueChanged = onCellValueChanged;
         this.emitter = new EventEmitter();
-        this.historyStack = [];
-        this.redoStack = [];
-        this.batch = null;
-        this.maxUndoDepth = maxUndoDepth;
+        this.stack = new UndoRedoStack(maxUndoDepth);
         if (onCellValueChanged) {
             this.wrappedCallback = (event) => {
-                if (this.batch !== null) {
-                    this.batch.push(event);
-                }
-                else {
-                    this.historyStack = [...this.historyStack, [event]].slice(-this.maxUndoDepth);
-                    this.redoStack = [];
+                this.stack.record(event);
+                if (!this.stack.isBatching) {
                     this.emitStackChange();
                 }
                 onCellValueChanged(event);
@@ -22,32 +16,27 @@ export class UndoRedoState {
         }
     }
     get canUndo() {
-        return this.historyStack.length > 0;
+        return this.stack.canUndo;
     }
     get canRedo() {
-        return this.redoStack.length > 0;
+        return this.stack.canRedo;
     }
     getWrappedCallback() {
         return this.wrappedCallback;
     }
     beginBatch() {
-        this.batch = [];
+        this.stack.beginBatch();
     }
     endBatch() {
-        const currentBatch = this.batch;
-        this.batch = null;
-        if (!currentBatch || currentBatch.length === 0)
-            return;
-        this.historyStack = [...this.historyStack, currentBatch].slice(-this.maxUndoDepth);
-        this.redoStack = [];
+        this.stack.endBatch();
         this.emitStackChange();
     }
     undo() {
-        if (!this.onCellValueChanged || this.historyStack.length === 0)
+        if (!this.onCellValueChanged)
+            return;
+        const lastBatch = this.stack.undo();
+        if (!lastBatch)
             return;
-        const lastBatch = this.historyStack[this.historyStack.length - 1];
-        this.historyStack = this.historyStack.slice(0, -1);
-        this.redoStack = [...this.redoStack, lastBatch];
         this.emitStackChange();
         for (let i = lastBatch.length - 1; i >= 0; i--) {
             const ev = lastBatch[i];
@@ -59,11 +48,11 @@ export class UndoRedoState {
         }
     }
     redo() {
-        if (!this.onCellValueChanged || this.redoStack.length === 0)
+        if (!this.onCellValueChanged)
+            return;
+        const nextBatch = this.stack.redo();
+        if (!nextBatch)
             return;
-        const nextBatch = this.redoStack[this.redoStack.length - 1];
-        this.redoStack = this.redoStack.slice(0, -1);
-        this.historyStack = [...this.historyStack, nextBatch];
         this.emitStackChange();
         for (const ev of nextBatch) {
             this.onCellValueChanged(ev);

package/dist/styles/ogrid.css

@@ -177,6 +177,10 @@
   table-layout: auto;
 }
 
+.ogrid-table tbody tr {
+  height: var(--ogrid-row-height, auto);
+}
+
 .ogrid-table th,
 .ogrid-table td {
   min-width: 80px;
@@ -220,12 +224,6 @@
   user-select: none;
 }
 
-.ogrid-sort-indicator {
-  margin-left: 4px;
-  font-size: 12px;
-  color: var(--ogrid-muted, #616161);
-}
-
 .ogrid-group-header {
   text-align: center;
   font-weight: 600;

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

@@ -4,6 +4,6 @@ export declare class PaginationControls<T> {
     private state;
     private el;
     constructor(container: HTMLElement, state: GridState<T>);
-    render(totalCount: number): void;
+    render(totalCount: number, pageSizeOptions?: number[]): void;
     destroy(): void;
 }

package/dist/types/renderer/TableRenderer.d.ts

@@ -44,14 +44,43 @@ export declare class TableRenderer<T> {
     private onFilterIconClick;
     private dropIndicator;
     private virtualScrollState;
+    private _tbodyClickHandler;
+    private _tbodyMousedownHandler;
+    private _tbodyDblclickHandler;
+    private _tbodyContextmenuHandler;
+    private lastActiveCell;
+    private lastSelectionRange;
+    private lastCopyRange;
+    private lastCutRange;
+    private lastEditingCell;
+    private lastColumnWidths;
+    private lastHeaderSignature;
+    private lastRenderedItems;
+    private lastRowSelectionMode;
+    private lastSelectedRowIds;
+    private lastShowRowNumbers;
+    private lastPinnedColumns;
+    private lastAllSelected;
+    private lastSomeSelected;
     constructor(container: HTMLElement, state: GridState<T>);
     setVirtualScrollState(vs: VirtualScrollState): void;
     setHeaderFilterState(state: HeaderFilterState, configs: Map<string, HeaderFilterConfig>): void;
     setOnFilterIconClick(handler: (columnId: string, headerEl: HTMLElement) => void): void;
     setInteractionState(state: TableRendererInteractionState | null): void;
+    private getCellFromEvent;
+    private attachBodyDelegation;
+    private detachBodyDelegation;
     getWrapperElement(): HTMLDivElement | null;
     /** Full render — creates the table structure from scratch. */
     render(): void;
+    /** Compute a signature string that captures header-affecting state. */
+    private computeHeaderSignature;
+    /** Save current interaction state for next diff comparison. */
+    private snapshotState;
+    /** Check if only selection/active-cell/copy/cut ranges changed (no data or header changes). */
+    private isSelectionOnlyChange;
+    /** Patch only CSS classes/styles for selection, active cell, copy/cut ranges without rebuilding DOM. */
+    private patchSelectionClasses;
     /** Re-render body rows and header (after sort/filter/page change). */
     update(): void;
     private hasCheckboxColumn;

package/dist/types/state/FillHandleState.d.ts

@@ -30,6 +30,7 @@ export declare class FillHandleState<T> {
     private rafHandle;
     private liveFillRange;
     private lastMousePos;
+    private cachedCells;
     private onMoveBound;
     private onUpBound;
     constructor(params: FillHandleParams<T>, getSelectionRange: () => ISelectionRange | null, setSelectionRange: (range: ISelectionRange | null) => void, setActiveCell: (cell: IActiveCell | null) => void);

package/dist/types/state/UndoRedoState.d.ts

@@ -8,10 +8,7 @@ interface UndoRedoStateEvents extends Record<string, unknown> {
 export declare class UndoRedoState<T> {
     private onCellValueChanged;
     private emitter;
-    private historyStack;
-    private redoStack;
-    private batch;
-    private maxUndoDepth;
+    private stack;
     private wrappedCallback;
     constructor(onCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined, maxUndoDepth?: number);
     get canUndo(): boolean;

package/dist/types/types/gridTypes.d.ts

@@ -1,5 +1,5 @@
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
-import type { RowId, IFilters, IDataSource, RowSelectionMode, IRowSelectionChangeEvent, IOGridApi, ISideBarDef, IVirtualScrollConfig } from '@alaarab/ogrid-core';
+import type { RowId, IFilters, IDataSource, RowSelectionMode, IRowSelectionChangeEvent, IOGridApi, ISideBarDef, IStatusBarProps, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IOGridApi, } from '@alaarab/ogrid-core';
 /** Extended API for the vanilla JS package (adds methods not in the core IOGridApi). */
 export interface IJsOGridApi<T> extends IOGridApi<T> {
@@ -41,6 +41,10 @@ export interface OGridOptions<T> {
     onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
     /** Show row numbers column. Default: false. */
     showRowNumbers?: boolean;
+    /** Status bar configuration or boolean to enable/disable with defaults. */
+    statusBar?: boolean | IStatusBarProps;
+    /** Plural label for the entity type (e.g. 'items'). Used in status bar and empty state. */
+    entityLabelPlural?: string;
     rowSelection?: RowSelectionMode;
     /** Callback fired when row selection changes. */
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
@@ -55,14 +59,50 @@ export interface OGridOptions<T> {
     emptyMessage?: string;
     /** Accessible label for the grid. */
     'aria-label'?: string;
+    /** Accessible label reference for the grid (ID of a labelling element). */
+    'aria-labelledby'?: string;
     /** Side bar configuration (columns panel + filters panel). */
     sideBar?: boolean | ISideBarDef;
     /** Error callback for server-side data source failures. */
     onError?: (error: unknown) => void;
+    /** Called when a cell editor throws an error. JS alternative: listen to the 'cellError' event. */
+    onCellError?: (error: Error, info: unknown) => void;
+    /** Called when undo is triggered. JS alternative: listen to the 'undo' event. */
+    onUndo?: () => void;
+    /** Called when redo is triggered. JS alternative: listen to the 'redo' event. */
+    onRedo?: () => void;
+    /** Whether there are undo operations available. */
+    canUndo?: boolean;
+    /** Whether there are redo operations available. */
+    canRedo?: boolean;
+    /** Called when the current page changes. JS alternative: listen to the 'pageChange' event. */
+    onPageChange?: (page: number) => void;
+    /** Called when the page size changes. JS alternative: listen to the 'pageSizeChange' event. */
+    onPageSizeChange?: (size: number) => void;
     /** Callback fired when first data is rendered. */
     onFirstDataRendered?: () => void;
     /** Virtual scrolling configuration. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
+    /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
+    density?: 'compact' | 'normal' | 'comfortable';
+    /** Enable column reordering via drag-and-drop on header cells. Default: false. */
+    columnReorder?: boolean;
+    /** Page size options shown in the pagination dropdown. Default: [10, 20, 50, 100]. */
+    pageSizeOptions?: number[];
+    /** Initial column display order (array of column ids). */
+    columnOrder?: string[];
+    /** Callback fired when column order changes. */
+    onColumnOrderChange?: (order: string[]) => void;
+    /** Callback fired when a column is resized. */
+    onColumnResized?: (columnId: string, width: number) => void;
+    /** Callback fired when a column is pinned or unpinned. */
+    onColumnPinned?: (columnId: string, pin: 'left' | 'right' | null) => void;
+    /** Where the column chooser renders. `true` or `'toolbar'` (default): toolbar. `'sidebar'`: sidebar only. `false`: hidden. */
+    columnChooser?: boolean | 'toolbar' | 'sidebar';
+    /** Secondary toolbar row rendered below the primary toolbar. */
+    toolbarBelow?: HTMLElement | null;
 }
 /** Events emitted by the OGrid instance. */
 export interface OGridEvents<T> extends Record<string, unknown> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.0.19",
+  "version": "2.0.22",
   "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",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.19"
+    "@alaarab/ogrid-core": "2.0.22"
   },
   "sideEffects": false,
   "publishConfig": {