@alaarab/ogrid-js 2.0.3 → 2.0.5

package/dist/esm/OGrid.js

@@ -341,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,
@@ -368,6 +368,8 @@ 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,
@@ -392,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 = '';
             }
         }
     }
@@ -416,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();

package/dist/esm/components/InlineCellEditor.js

@@ -201,6 +201,7 @@ export class InlineCellEditor {
             }
             this.closeEditor();
         });
+        setTimeout(() => input.select(), 0);
         return input;
     }
     createSelectEditor(value, column) {

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) {
@@ -80,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;
@@ -182,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');
@@ -294,8 +311,11 @@ 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');
@@ -359,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;

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;

package/dist/esm/state/SelectionState.js

@@ -22,6 +22,9 @@ export class SelectionState {
     get activeCell() {
         return this._activeCell;
     }
+    get dragAnchor() {
+        return this.dragStartCell;
+    }
     get selectionRange() {
         return this._selectionRange;
     }

package/dist/styles/ogrid.css

@@ -328,6 +328,10 @@
   background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
 }
 
+[data-drag-anchor] {
+  background: var(--ogrid-bg, #fff) !important;
+}
+
 /* ── Fill Handle ── */
 
 .ogrid-fill-handle {

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

@@ -25,6 +25,7 @@ export interface TableRendererInteractionState {
     onSelectAll?: (checked: boolean) => void;
     allSelected?: boolean;
     someSelected?: boolean;
+    showRowNumbers?: boolean;
     pinnedColumns?: Record<string, 'left' | 'right'>;
     leftOffsets?: Record<string, number>;
     rightOffsets?: Record<string, number>;
@@ -54,7 +55,8 @@ export declare class TableRenderer<T> {
     /** Re-render body rows and header (after sort/filter/page change). */
     update(): void;
     private hasCheckboxColumn;
-    /** The column index offset for data columns (1 if checkbox column present, else 0). */
+    private hasRowNumbersColumn;
+    /** The column index offset for data columns (checkbox + row numbers if present). */
     getColOffset(): number;
     private applyPinningStyles;
     private renderHeader;

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

@@ -22,7 +22,7 @@ export declare class ColumnPinningState {
      */
     computeLeftOffsets(visibleCols: {
         columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number): Record<string, number>;
+    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number, hasRowNumbersColumn?: boolean): Record<string, number>;
     /**
      * Compute sticky right offsets for right-pinned columns.
      * Returns a map of columnId -> right offset in pixels.

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

@@ -18,6 +18,7 @@ export declare class SelectionState {
     private rafHandle;
     private pendingRange;
     get activeCell(): IActiveCell | null;
+    get dragAnchor(): IActiveCell | null;
     get selectionRange(): ISelectionRange | null;
     get selectedRowIds(): Set<RowId>;
     get isDragging(): boolean;

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

@@ -39,6 +39,8 @@ export interface OGridOptions<T> {
     cellSelection?: boolean;
     /** Callback fired when a cell value is changed via editing. */
     onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
+    /** Show row numbers column. Default: false. */
+    showRowNumbers?: boolean;
     rowSelection?: RowSelectionMode;
     /** Callback fired when row selection changes. */
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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",
@@ -23,7 +23,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.3"
+    "@alaarab/ogrid-core": "2.0.5"
   },
   "publishConfig": { "access": "public" }
 }