@alaarab/ogrid-angular 2.0.3 → 2.0.4

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

@@ -122,8 +122,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)
@@ -947,6 +949,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.4",
   "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.4"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",