@alaarab/ogrid-js 2.0.2 → 2.0.4

package/dist/esm/OGrid.js

@@ -16,6 +16,8 @@ import { TableLayoutState } from './state/TableLayoutState';
 import { FillHandleState } from './state/FillHandleState';
 import { RowSelectionState } from './state/RowSelectionState';
 import { ColumnPinningState } from './state/ColumnPinningState';
+import { ColumnReorderState } from './state/ColumnReorderState';
+import { VirtualScrollState } from './state/VirtualScrollState';
 import { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 import { InlineCellEditor } from './components/InlineCellEditor';
 import { ContextMenu } from './components/ContextMenu';
@@ -41,6 +43,8 @@ export class OGrid {
         this.fillHandleState = null;
         this.rowSelectionState = null;
         this.pinningState = null;
+        this.reorderState = null;
+        this.virtualScrollState = null;
         this.marchingAnts = null;
         this.cellEditor = null;
         this.contextMenu = null;
@@ -159,6 +163,28 @@ export class OGrid {
         this.unsubscribes.push(this.headerFilterState.onChange(() => {
             this.renderHeaderFilterPopover();
         }));
+        // Initialize virtual scrolling if configured
+        if (options.virtualScroll?.enabled) {
+            this.virtualScrollState = new VirtualScrollState(options.virtualScroll);
+            this.virtualScrollState.observeContainer(this.tableContainer);
+            this.renderer.setVirtualScrollState(this.virtualScrollState);
+            // Wire scroll event on the table container
+            const handleScroll = () => {
+                this.virtualScrollState?.handleScroll(this.tableContainer.scrollTop);
+            };
+            this.tableContainer.addEventListener('scroll', handleScroll, { passive: true });
+            this.unsubscribes.push(() => {
+                this.tableContainer.removeEventListener('scroll', handleScroll);
+            });
+            // Re-render when visible range changes
+            this.unsubscribes.push(this.virtualScrollState.onRangeChanged(() => {
+                this.updateRendererInteractionState();
+            }));
+            // Wire scrollToRow API method
+            this.api.scrollToRow = (index, opts) => {
+                this.virtualScrollState?.scrollToRow(index, this.tableContainer, opts?.align);
+            };
+        }
         // Complete initial render (pagination, status bar, column chooser, sidebar, loading)
         this.renderAll();
     }
@@ -225,6 +251,14 @@ export class OGrid {
         this.unsubscribes.push(this.resizeState.onColumnWidthChange(() => {
             this.updateRendererInteractionState();
         }));
+        // Column reorder
+        this.reorderState = new ColumnReorderState();
+        this.unsubscribes.push(this.reorderState.onStateChange(({ isDragging, dropIndicatorX }) => {
+            this.renderer.updateDropIndicator(dropIndicatorX, isDragging);
+        }));
+        this.unsubscribes.push(this.reorderState.onReorder(({ columnOrder }) => {
+            this.state.setColumnOrder(columnOrder);
+        }));
         // Attach keyboard handler to wrapper
         const wrapper = this.renderer.getWrapperElement();
         if (wrapper) {
@@ -307,7 +341,7 @@ export class OGrid {
         const visibleCols = this.state.visibleColumnDefs;
         // Compute pinning offsets
         const columnWidths = this.layoutState.getAllColumnWidths();
-        const leftOffsets = this.pinningState?.computeLeftOffsets(visibleCols, columnWidths, 120, !!this.rowSelectionState, 40) ?? {};
+        const leftOffsets = this.pinningState?.computeLeftOffsets(visibleCols, columnWidths, 120, !!this.rowSelectionState, 40, !!this.options.showRowNumbers) ?? {};
         const rightOffsets = this.pinningState?.computeRightOffsets(visibleCols, columnWidths, 120) ?? {};
         this.renderer.setInteractionState({
             activeCell: this.selectionState.activeCell,
@@ -334,10 +368,19 @@ export class OGrid {
             },
             allSelected: this.rowSelectionState?.isAllSelected(items),
             someSelected: this.rowSelectionState?.isSomeSelected(items),
+            // Row numbers
+            showRowNumbers: this.options.showRowNumbers,
             // Column pinning
             pinnedColumns: this.pinningState?.pinnedColumns,
             leftOffsets,
             rightOffsets,
+            // Column reorder
+            onColumnReorderStart: this.reorderState ? (columnId, event) => {
+                const tableEl = this.renderer.getTableElement();
+                if (!tableEl)
+                    return;
+                this.reorderState?.startDrag(columnId, event, visibleCols, this.state.columnOrder, this.pinningState?.pinnedColumns, tableEl);
+            } : undefined,
         });
         this.renderer.update();
         // Update marching ants overlay
@@ -351,15 +394,43 @@ export class OGrid {
         if (!range)
             return;
         const norm = normalizeSelectionRange(range);
+        const anchor = this.selectionState.dragAnchor;
+        const minR = norm.startRow;
+        const maxR = norm.endRow;
+        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)) {
-            const rowIndex = parseInt(cell.getAttribute('data-row-index') ?? '-1', 10);
-            const colIndex = parseInt(cell.getAttribute('data-col-index') ?? '-1', 10);
+            const el = cell;
+            const rowIndex = parseInt(el.getAttribute('data-row-index') ?? '-1', 10);
+            const colIndex = parseInt(el.getAttribute('data-col-index') ?? '-1', 10);
             if (isInSelectionRange(norm, rowIndex, colIndex)) {
-                cell.setAttribute('data-drag-range', 'true');
+                el.setAttribute('data-drag-range', 'true');
+                // Anchor cell (white background)
+                const isAnchor = anchor && rowIndex === anchor.rowIndex && colIndex === anchor.columnIndex;
+                if (isAnchor) {
+                    el.setAttribute('data-drag-anchor', '');
+                }
+                else {
+                    el.removeAttribute('data-drag-anchor');
+                }
+                // Edge borders via inset box-shadow
+                const shadows = [];
+                if (rowIndex === minR)
+                    shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
+                if (rowIndex === maxR)
+                    shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
+                if (colIndex === minC)
+                    shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
+                if (colIndex === maxC)
+                    shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
+                el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
             }
             else {
-                cell.removeAttribute('data-drag-range');
+                el.removeAttribute('data-drag-range');
+                el.removeAttribute('data-drag-anchor');
+                if (el.style.boxShadow)
+                    el.style.boxShadow = '';
             }
         }
     }
@@ -375,6 +446,8 @@ export class OGrid {
             return;
         e.preventDefault();
         this.selectionState.startDrag(rowIndex, colIndex);
+        // Apply drag attributes immediately for instant visual feedback on the initial cell
+        setTimeout(() => this.updateDragAttributes(), 0);
     }
     handleCellContextMenu(rowIndex, colIndex, e) {
         e.preventDefault();
@@ -452,7 +525,29 @@ export class OGrid {
         const onCancel = () => {
             this.updateRendererInteractionState();
         };
-        this.cellEditor.startEdit(rowId, columnId, item, column, cell, onCommit, onCancel);
+        const onAfterCommit = () => {
+            // After Enter-commit, move the active cell down one row (Excel-style behavior)
+            if (this.selectionState) {
+                const ac = this.selectionState.activeCell;
+                if (ac) {
+                    const { items: currentItems } = this.state.getProcessedItems();
+                    const newRow = Math.min(ac.rowIndex + 1, currentItems.length - 1);
+                    this.selectionState.setActiveCell({ rowIndex: newRow, columnIndex: ac.columnIndex });
+                    const colOffset = this.renderer.getColOffset();
+                    const dataCol = ac.columnIndex - colOffset;
+                    this.selectionState.setSelectionRange({
+                        startRow: newRow,
+                        startCol: dataCol,
+                        endRow: newRow,
+                        endCol: dataCol,
+                    });
+                }
+            }
+            // Re-focus the grid wrapper so keyboard nav continues working
+            const wrapper = this.renderer.getWrapperElement();
+            wrapper?.focus();
+        };
+        this.cellEditor.startEdit(rowId, columnId, item, column, cell, onCommit, onCancel, onAfterCommit);
     }
     buildFilterConfigs() {
         const columns = flattenColumns(this.options.columns);
@@ -611,6 +706,8 @@ export class OGrid {
             this.renderer.update();
         }
         const { totalCount } = this.state.getProcessedItems();
+        // Update virtual scroll with current total row count
+        this.virtualScrollState?.setTotalRows(totalCount);
         this.pagination.render(totalCount);
         this.statusBar.render({ totalCount });
         this.columnChooser.render();
@@ -644,6 +741,8 @@ export class OGrid {
         this.fillHandleState?.destroy();
         this.rowSelectionState?.destroy();
         this.pinningState?.destroy();
+        this.reorderState?.destroy();
+        this.virtualScrollState?.destroy();
         this.marchingAnts?.destroy();
         this.layoutState.destroy();
         this.cellEditor?.closeEditor();

package/dist/esm/components/ContextMenu.js

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

package/dist/esm/components/InlineCellEditor.js

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

package/dist/esm/index.js

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

package/dist/esm/renderer/TableRenderer.js

@@ -1,4 +1,4 @@
-import { getCellValue, buildHeaderRows, isInSelectionRange } from '@alaarab/ogrid-core';
+import { getCellValue, buildHeaderRows, isInSelectionRange, ROW_NUMBER_COLUMN_WIDTH } from '@alaarab/ogrid-core';
 const CHECKBOX_COL_WIDTH = 40;
 export class TableRenderer {
     constructor(container, state) {
@@ -10,9 +10,14 @@ export class TableRenderer {
         this.headerFilterState = null;
         this.filterConfigs = new Map();
         this.onFilterIconClick = null;
+        this.dropIndicator = null;
+        this.virtualScrollState = null;
         this.container = container;
         this.state = state;
     }
+    setVirtualScrollState(vs) {
+        this.virtualScrollState = vs;
+    }
     setHeaderFilterState(state, configs) {
         this.headerFilterState = state;
         this.filterConfigs = configs;
@@ -53,6 +58,11 @@ export class TableRenderer {
         this.renderBody();
         this.table.appendChild(this.tbody);
         wrapper.appendChild(this.table);
+        // Create drop indicator for column reorder (hidden by default)
+        this.dropIndicator = document.createElement('div');
+        this.dropIndicator.className = 'ogrid-drop-indicator';
+        this.dropIndicator.style.display = 'none';
+        wrapper.appendChild(this.dropIndicator);
         this.container.appendChild(wrapper);
     }
     /** Re-render body rows and header (after sort/filter/page change). */
@@ -70,9 +80,17 @@ export class TableRenderer {
         const mode = this.interactionState?.rowSelectionMode;
         return mode === 'single' || mode === 'multiple';
     }
-    /** The column index offset for data columns (1 if checkbox column present, else 0). */
+    hasRowNumbersColumn() {
+        return !!this.interactionState?.showRowNumbers;
+    }
+    /** The column index offset for data columns (checkbox + row numbers if present). */
     getColOffset() {
-        return this.hasCheckboxColumn() ? 1 : 0;
+        let offset = 0;
+        if (this.hasCheckboxColumn())
+            offset++;
+        if (this.hasRowNumbersColumn())
+            offset++;
+        return offset;
     }
     applyPinningStyles(el, columnId, isHeader) {
         const is = this.interactionState;
@@ -140,7 +158,21 @@ export class TableRenderer {
                         }
                     }
                     if (!cell.isGroup && cell.columnDef) {
+                        th.setAttribute('data-column-id', cell.columnDef.columnId);
                         this.applyPinningStyles(th, cell.columnDef.columnId, true);
+                        // Column reorder in grouped headers
+                        if (this.interactionState?.onColumnReorderStart) {
+                            th.addEventListener('mousedown', (e) => {
+                                const target = e.target;
+                                if (target.classList.contains('ogrid-resize-handle') ||
+                                    target.classList.contains('ogrid-filter-icon')) {
+                                    return;
+                                }
+                                if (cell.columnDef) {
+                                    this.interactionState?.onColumnReorderStart?.(cell.columnDef.columnId, e);
+                                }
+                            });
+                        }
                     }
                     tr.appendChild(th);
                 }
@@ -158,6 +190,15 @@ export class TableRenderer {
                 this.appendSelectAllCheckbox(th);
                 tr.appendChild(th);
             }
+            // Row numbers header
+            if (this.hasRowNumbersColumn()) {
+                const th = document.createElement('th');
+                th.className = 'ogrid-header-cell ogrid-row-number-header';
+                th.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
+                th.style.textAlign = 'center';
+                th.textContent = '#';
+                tr.appendChild(th);
+            }
             for (let colIdx = 0; colIdx < visibleCols.length; colIdx++) {
                 const col = visibleCols[colIdx];
                 const th = document.createElement('th');
@@ -232,6 +273,18 @@ export class TableRenderer {
                     });
                     th.appendChild(filterBtn);
                 }
+                // Column reorder: mousedown on header starts drag
+                if (this.interactionState?.onColumnReorderStart) {
+                    th.addEventListener('mousedown', (e) => {
+                        // Don't start reorder if clicking resize handle or filter button
+                        const target = e.target;
+                        if (target.classList.contains('ogrid-resize-handle') ||
+                            target.classList.contains('ogrid-filter-icon')) {
+                            return;
+                        }
+                        this.interactionState?.onColumnReorderStart?.(col.columnId, e);
+                    });
+                }
                 tr.appendChild(th);
             }
             this.thead.appendChild(tr);
@@ -258,19 +311,47 @@ export class TableRenderer {
         const visibleCols = this.state.visibleColumnDefs;
         const { items } = this.state.getProcessedItems();
         const hasCheckbox = this.hasCheckboxColumn();
+        const hasRowNumbers = this.hasRowNumbersColumn();
         const colOffset = this.getColOffset();
+        const totalColSpan = visibleCols.length + colOffset;
+        // Calculate row number offset for pagination
+        const rowNumberOffset = hasRowNumbers ? (this.state.page - 1) * this.state.pageSize : 0;
         if (items.length === 0 && !this.state.isLoading) {
             const tr = document.createElement('tr');
             const td = document.createElement('td');
-            td.colSpan = visibleCols.length + colOffset;
+            td.colSpan = totalColSpan;
             td.className = 'ogrid-empty-state';
             td.textContent = 'No data';
             tr.appendChild(td);
             this.tbody.appendChild(tr);
             return;
         }
-        for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
+        // Virtual scrolling: determine which rows to render
+        const vs = this.virtualScrollState;
+        const isVirtual = vs?.enabled === true;
+        let startIndex = 0;
+        let endIndex = items.length - 1;
+        if (isVirtual) {
+            const range = vs.visibleRange;
+            startIndex = Math.max(0, range.startIndex);
+            endIndex = Math.min(items.length - 1, range.endIndex);
+            // Top spacer row
+            if (range.offsetTop > 0) {
+                const topSpacer = document.createElement('tr');
+                topSpacer.className = 'ogrid-virtual-spacer';
+                const topTd = document.createElement('td');
+                topTd.colSpan = totalColSpan;
+                topTd.style.height = `${range.offsetTop}px`;
+                topTd.style.padding = '0';
+                topTd.style.border = 'none';
+                topSpacer.appendChild(topTd);
+                this.tbody.appendChild(topSpacer);
+            }
+        }
+        for (let rowIndex = startIndex; rowIndex <= endIndex; rowIndex++) {
             const item = items[rowIndex];
+            if (!item)
+                continue;
             const rowId = this.state.getRowId(item);
             const tr = document.createElement('tr');
             tr.className = 'ogrid-row';
@@ -298,6 +379,17 @@ export class TableRenderer {
                 td.appendChild(checkbox);
                 tr.appendChild(td);
             }
+            // Row numbers column
+            if (hasRowNumbers) {
+                const td = document.createElement('td');
+                td.className = 'ogrid-cell ogrid-row-number-cell';
+                td.style.width = `${ROW_NUMBER_COLUMN_WIDTH}px`;
+                td.style.textAlign = 'center';
+                td.style.color = 'var(--ogrid-fg-muted, #666)';
+                td.style.fontSize = '0.9em';
+                td.textContent = String(rowNumberOffset + rowIndex + 1);
+                tr.appendChild(td);
+            }
             for (let colIndex = 0; colIndex < visibleCols.length; colIndex++) {
                 const col = visibleCols[colIndex];
                 const globalColIndex = colIndex + colOffset;
@@ -404,11 +496,45 @@ export class TableRenderer {
             }
             this.tbody.appendChild(tr);
         }
+        // Virtual scrolling: bottom spacer row
+        if (isVirtual) {
+            const range = vs.visibleRange;
+            if (range.offsetBottom > 0) {
+                const bottomSpacer = document.createElement('tr');
+                bottomSpacer.className = 'ogrid-virtual-spacer';
+                const bottomTd = document.createElement('td');
+                bottomTd.colSpan = totalColSpan;
+                bottomTd.style.height = `${range.offsetBottom}px`;
+                bottomTd.style.padding = '0';
+                bottomTd.style.border = 'none';
+                bottomSpacer.appendChild(bottomTd);
+                this.tbody.appendChild(bottomSpacer);
+            }
+        }
+    }
+    /** Get the table element (used by ColumnReorderState for header cell queries). */
+    getTableElement() {
+        return this.table;
+    }
+    /** Update the drop indicator position during column reorder. */
+    updateDropIndicator(x, isDragging) {
+        if (!this.dropIndicator || !this.wrapperEl)
+            return;
+        if (!isDragging || x === null) {
+            this.dropIndicator.style.display = 'none';
+            return;
+        }
+        // Convert client X to position relative to the wrapper
+        const wrapperRect = this.wrapperEl.getBoundingClientRect();
+        const relativeX = x - wrapperRect.left + this.wrapperEl.scrollLeft;
+        this.dropIndicator.style.display = 'block';
+        this.dropIndicator.style.left = `${relativeX}px`;
     }
     destroy() {
         this.container.innerHTML = '';
         this.table = null;
         this.thead = null;
         this.tbody = null;
+        this.dropIndicator = null;
     }
 }

package/dist/esm/state/ColumnPinningState.js

@@ -1,3 +1,4 @@
+import { ROW_NUMBER_COLUMN_WIDTH } from '@alaarab/ogrid-core';
 import { EventEmitter } from './EventEmitter';
 /**
  * Manages column pinning state — tracks which columns are pinned left/right.
@@ -40,9 +41,13 @@ export class ColumnPinningState {
      * Compute sticky left offsets for left-pinned columns.
      * Returns a map of columnId -> left offset in pixels.
      */
-    computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) {
+    computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth, hasRowNumbersColumn) {
         const offsets = {};
-        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+        let left = 0;
+        if (hasCheckboxColumn)
+            left += checkboxColumnWidth;
+        if (hasRowNumbersColumn)
+            left += ROW_NUMBER_COLUMN_WIDTH;
         for (const col of visibleCols) {
             if (this._pinnedColumns[col.columnId] === 'left') {
                 offsets[col.columnId] = left;