@alaarab/ogrid-angular 2.0.3 → 2.0.5

package/dist/esm/components/grid-context-menu.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, effect, viewChild, DestroyRef, inject } from '@angular/core';
+import { Component, input, output, viewChild, DestroyRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
 let GridContextMenuComponent = class GridContextMenuComponent {
@@ -35,11 +35,9 @@ let GridContextMenuComponent = class GridContextMenuComponent {
             if (e.key === 'Escape')
                 this.close.emit();
         };
-        effect(() => {
-            // Re-register listeners when component renders
-            document.addEventListener('mousedown', this.clickOutsideHandler, true);
-            document.addEventListener('keydown', this.keyDownHandler, true);
-        });
+        // Register listeners once on init (no signal dependencies needed)
+        document.addEventListener('mousedown', this.clickOutsideHandler, true);
+        document.addEventListener('keydown', this.keyDownHandler, true);
         this.destroyRef.onDestroy(() => {
             document.removeEventListener('mousedown', this.clickOutsideHandler, true);
             document.removeEventListener('keydown', this.keyDownHandler, true);

package/dist/esm/components/marching-ants-overlay.component.js

@@ -41,6 +41,7 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
         this.copyRange = input(null);
         this.cutRange = input(null);
         this.colOffset = input(0);
+        this.columnSizingVersion = input(0);
         this.selRect = signal(null);
         this.clipRect = signal(null);
         this.rafId = 0;
@@ -51,6 +52,7 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
             const selRange = this.selectionRange();
             const clipRange = this.copyRange() ?? this.cutRange();
             const colOff = this.colOffset();
+            const _version = this.columnSizingVersion(); // Track column resize changes
             if (this.resizeObserver) {
                 this.resizeObserver.disconnect();
                 this.resizeObserver = null;

package/dist/esm/services/datagrid-state.service.js

@@ -108,9 +108,14 @@ let DataGridStateService = class DataGridStateService {
             const order = p.columnOrder;
             if (!order?.length)
                 return filtered;
+            // Build index map for O(1) lookup instead of repeated O(n) indexOf
+            const orderMap = new Map();
+            for (let i = 0; i < order.length; i++) {
+                orderMap.set(order[i], i);
+            }
             return [...filtered].sort((a, b) => {
-                const ia = order.indexOf(a.columnId);
-                const ib = order.indexOf(b.columnId);
+                const ia = orderMap.get(a.columnId) ?? -1;
+                const ib = orderMap.get(b.columnId) ?? -1;
                 if (ia === -1 && ib === -1)
                     return 0;
                 if (ia === -1)
@@ -122,8 +127,10 @@ let DataGridStateService = class DataGridStateService {
         });
         this.visibleColumnCount = computed(() => this.visibleCols().length);
         this.hasCheckboxCol = computed(() => (this.props()?.rowSelection ?? 'none') === 'multiple');
-        this.totalColCount = computed(() => this.visibleColumnCount() + (this.hasCheckboxCol() ? 1 : 0));
-        this.colOffset = computed(() => this.hasCheckboxCol() ? 1 : 0);
+        this.hasRowNumbersCol = computed(() => !!this.props()?.showRowNumbers);
+        this.specialColsCount = computed(() => (this.hasCheckboxCol() ? 1 : 0) + (this.hasRowNumbersCol() ? 1 : 0));
+        this.totalColCount = computed(() => this.visibleColumnCount() + this.specialColsCount());
+        this.colOffset = computed(() => this.specialColsCount());
         this.rowIndexByRowId = computed(() => {
             const p = this.props();
             if (!p)
@@ -239,14 +246,20 @@ let DataGridStateService = class DataGridStateService {
             this.resizeObserver.observe(el);
             measure();
         });
-        // Cleanup on destroy
+        // Cleanup on destroy — null out refs to prevent accidental reuse after teardown
         this.destroyRef.onDestroy(() => {
-            if (this.rafId)
+            if (this.rafId) {
                 cancelAnimationFrame(this.rafId);
-            if (this.autoScrollInterval)
+                this.rafId = 0;
+            }
+            if (this.autoScrollInterval) {
                 clearInterval(this.autoScrollInterval);
-            if (this.resizeObserver)
+                this.autoScrollInterval = null;
+            }
+            if (this.resizeObserver) {
                 this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
         });
         // Clean up column sizing overrides for removed columns
         effect(() => {
@@ -947,6 +960,7 @@ let DataGridStateService = class DataGridStateService {
             totalColCount: this.totalColCount(),
             colOffset: this.colOffset(),
             hasCheckboxCol: this.hasCheckboxCol(),
+            hasRowNumbersCol: this.hasRowNumbersCol(),
             rowIndexByRowId: this.rowIndexByRowId(),
             containerWidth: this.containerWidthSig(),
             minTableWidth: this.minTableWidth(),

package/dist/esm/services/ogrid.service.js

@@ -529,6 +529,64 @@ let OGridService = class OGridService {
             this.ariaLabelledBy.set(props['aria-labelledby']);
     }
     // --- API ---
+    // --- Column Pinning Methods ---
+    /**
+     * Pin a column to the left or right edge.
+     */
+    pinColumn(columnId, side) {
+        this.pinnedOverrides.update((prev) => ({ ...prev, [columnId]: side }));
+        this.onColumnPinned()?.(columnId, side);
+    }
+    /**
+     * Unpin a column (remove sticky positioning).
+     */
+    unpinColumn(columnId) {
+        this.pinnedOverrides.update((prev) => {
+            const next = { ...prev };
+            delete next[columnId];
+            return next;
+        });
+        this.onColumnPinned()?.(columnId, null);
+    }
+    /**
+     * Check if a column is pinned and which side.
+     */
+    isPinned(columnId) {
+        return this.pinnedOverrides()[columnId];
+    }
+    /**
+     * Compute sticky left offsets for left-pinned columns.
+     * Returns a map of columnId -> left offset in pixels.
+     */
+    computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) {
+        const offsets = {};
+        const pinned = this.pinnedOverrides();
+        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+        for (const col of visibleCols) {
+            if (pinned[col.columnId] === 'left') {
+                offsets[col.columnId] = left;
+                left += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }
+    /**
+     * Compute sticky right offsets for right-pinned columns.
+     * Returns a map of columnId -> right offset in pixels.
+     */
+    computeRightOffsets(visibleCols, columnWidths, defaultWidth) {
+        const offsets = {};
+        const pinned = this.pinnedOverrides();
+        let right = 0;
+        for (let i = visibleCols.length - 1; i >= 0; i--) {
+            const col = visibleCols[i];
+            if (pinned[col.columnId] === 'right') {
+                offsets[col.columnId] = right;
+                right += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }
     getApi() {
         return {
             setRowData: (d) => {

package/dist/types/components/marching-ants-overlay.component.d.ts

@@ -12,6 +12,7 @@ export declare class MarchingAntsOverlayComponent {
     readonly copyRange: import("@angular/core").InputSignal<ISelectionRange | null>;
     readonly cutRange: import("@angular/core").InputSignal<ISelectionRange | null>;
     readonly colOffset: import("@angular/core").InputSignal<number>;
+    readonly columnSizingVersion: import("@angular/core").InputSignal<number>;
     readonly selRect: import("@angular/core").WritableSignal<OverlayRect | null>;
     readonly clipRect: import("@angular/core").WritableSignal<OverlayRect | null>;
     private rafId;

package/dist/types/services/datagrid-state.service.d.ts

@@ -9,6 +9,7 @@ export interface DataGridLayoutState<T> {
     totalColCount: number;
     colOffset: number;
     hasCheckboxCol: boolean;
+    hasRowNumbersCol: boolean;
     rowIndexByRowId: Map<RowId, number>;
     containerWidth: number;
     minTableWidth: number;
@@ -168,8 +169,10 @@ export declare class DataGridStateService<T> {
     readonly visibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
     readonly visibleColumnCount: import("@angular/core").Signal<number>;
     readonly hasCheckboxCol: import("@angular/core").Signal<boolean>;
+    readonly hasRowNumbersCol: import("@angular/core").Signal<boolean>;
+    readonly specialColsCount: import("@angular/core").Signal<number>;
     readonly totalColCount: import("@angular/core").Signal<number>;
-    readonly colOffset: import("@angular/core").Signal<0 | 1>;
+    readonly colOffset: import("@angular/core").Signal<number>;
     readonly rowIndexByRowId: import("@angular/core").Signal<Map<RowId, number>>;
     readonly selectedRowIds: import("@angular/core").Signal<Set<RowId>>;
     readonly allSelected: import("@angular/core").Signal<boolean>;

package/dist/types/services/ogrid.service.d.ts

@@ -184,5 +184,31 @@ export declare class OGridService<T> {
     handleColumnResized(columnId: string, width: number): void;
     handleColumnPinned(columnId: string, pinned: 'left' | 'right' | null): void;
     configure(props: IOGridProps<T>): void;
+    /**
+     * Pin a column to the left or right edge.
+     */
+    pinColumn(columnId: string, side: 'left' | 'right'): void;
+    /**
+     * Unpin a column (remove sticky positioning).
+     */
+    unpinColumn(columnId: string): void;
+    /**
+     * Check if a column is pinned and which side.
+     */
+    isPinned(columnId: string): 'left' | 'right' | undefined;
+    /**
+     * Compute sticky left offsets for left-pinned columns.
+     * Returns a map of columnId -> left offset in pixels.
+     */
+    computeLeftOffsets(visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number): Record<string, number>;
+    /**
+     * Compute sticky right offsets for right-pinned columns.
+     * Returns a map of columnId -> right offset in pixels.
+     */
+    computeRightOffsets(visibleCols: {
+        columnId: string;
+    }[], columnWidths: Record<string, number>, defaultWidth: number): Record<string, number>;
     getApi(): IOGridApi<T>;
 }

package/dist/types/types/dataGridTypes.d.ts

@@ -107,6 +107,9 @@ export interface IOGridDataGridProps<T> {
     rowSelection?: RowSelectionMode;
     selectedRows?: Set<RowId>;
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
+    showRowNumbers?: boolean;
+    currentPage?: number;
+    pageSize?: number;
     statusBar?: IStatusBarProps;
     filters: IFilters;
     onFilterChange: (key: string, value: FilterValue | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.3"
+    "@alaarab/ogrid-core": "2.0.5"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",