@alaarab/ogrid-angular 2.0.6 → 2.0.7

package/dist/esm/components/base-datagrid-table.component.js

@@ -63,6 +63,8 @@ export class BaseDataGridTableComponent {
         this.showEmptyInGrid = computed(() => this.state().viewModels.showEmptyInGrid);
         this.headerFilterInput = computed(() => this.state().viewModels.headerFilterInput);
         this.cellDescriptorInput = computed(() => this.state().viewModels.cellDescriptorInput);
+        // Pinning state
+        this.pinnedColumnsMap = computed(() => this.state().pinning.pinnedColumns);
         this.allowOverflowX = computed(() => {
             const p = this.getProps();
             if (p?.suppressHorizontalScroll)
@@ -287,16 +289,13 @@ export class BaseDataGridTableComponent {
     }
     // --- Column pinning methods ---
     onPinColumn(columnId, side) {
-        const props = this.getProps();
-        props?.onColumnPinned?.(columnId, side);
+        this.state().pinning.pinColumn(columnId, side);
     }
     onUnpinColumn(columnId) {
-        const props = this.getProps();
-        props?.onColumnPinned?.(columnId, null);
+        this.state().pinning.unpinColumn(columnId);
     }
     isPinned(columnId) {
-        const props = this.getProps();
-        return props?.pinnedColumns?.[columnId];
+        return this.state().pinning.isPinned(columnId);
     }
     getPinState(columnId) {
         const pinned = this.isPinned(columnId);

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

@@ -52,7 +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
+            void this.columnSizingVersion(); // Track column resize changes
             if (this.resizeObserver) {
                 this.resizeObserver.disconnect();
                 this.resizeObserver = null;

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

@@ -53,6 +53,10 @@ let DataGridStateService = class DataGridStateService {
         this.autoScrollInterval = null;
         // ResizeObserver
         this.resizeObserver = null;
+        // Header menu state (for column pinning UI)
+        this.headerMenuIsOpenSig = signal(false);
+        this.headerMenuOpenForColumnSig = signal(null);
+        this.headerMenuAnchorElementSig = signal(null);
         // --- Derived computed ---
         this.propsResolved = computed(() => this.props());
         this.cellSelection = computed(() => {
@@ -949,6 +953,59 @@ let DataGridStateService = class DataGridStateService {
         this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
         this.setupFillHandleDrag();
     }
+    // --- Column pinning ---
+    pinColumn(columnId, side) {
+        const props = this.props();
+        props?.onColumnPinned?.(columnId, side);
+    }
+    unpinColumn(columnId) {
+        const props = this.props();
+        props?.onColumnPinned?.(columnId, null);
+    }
+    isPinned(columnId) {
+        const props = this.props();
+        return props?.pinnedColumns?.[columnId];
+    }
+    getPinState(columnId) {
+        const pinned = this.isPinned(columnId);
+        return {
+            canPinLeft: pinned !== 'left',
+            canPinRight: pinned !== 'right',
+            canUnpin: !!pinned,
+        };
+    }
+    // --- Header menu ---
+    openHeaderMenu(columnId, anchorEl) {
+        this.headerMenuOpenForColumnSig.set(columnId);
+        this.headerMenuAnchorElementSig.set(anchorEl);
+        this.headerMenuIsOpenSig.set(true);
+    }
+    closeHeaderMenu() {
+        this.headerMenuIsOpenSig.set(false);
+        this.headerMenuOpenForColumnSig.set(null);
+        this.headerMenuAnchorElementSig.set(null);
+    }
+    headerMenuPinLeft() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col) !== 'left') {
+            this.pinColumn(col, 'left');
+            this.closeHeaderMenu();
+        }
+    }
+    headerMenuPinRight() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col) !== 'right') {
+            this.pinColumn(col, 'right');
+            this.closeHeaderMenu();
+        }
+    }
+    headerMenuUnpin() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col)) {
+            this.unpinColumn(col);
+            this.closeHeaderMenu();
+        }
+    }
     // --- Get state result ---
     getState() {
         const p = this.props();
@@ -1048,7 +1105,29 @@ let DataGridStateService = class DataGridStateService {
             showEmptyInGrid: this.showEmptyInGrid(),
             onCellError: p?.onCellError,
         };
-        return { layout, rowSelection, editing, interaction, contextMenu, viewModels };
+        // --- Pinning ---
+        const openForColumn = this.headerMenuOpenForColumnSig();
+        const currentPinState = openForColumn ? (p?.pinnedColumns?.[openForColumn]) : undefined;
+        const pinning = {
+            pinnedColumns: p?.pinnedColumns ?? {},
+            pinColumn: (columnId, side) => this.pinColumn(columnId, side),
+            unpinColumn: (columnId) => this.unpinColumn(columnId),
+            isPinned: (columnId) => this.isPinned(columnId),
+            headerMenu: {
+                isOpen: this.headerMenuIsOpenSig(),
+                openForColumn,
+                anchorElement: this.headerMenuAnchorElementSig(),
+                open: (columnId, anchorEl) => this.openHeaderMenu(columnId, anchorEl),
+                close: () => this.closeHeaderMenu(),
+                handlePinLeft: () => this.headerMenuPinLeft(),
+                handlePinRight: () => this.headerMenuPinRight(),
+                handleUnpin: () => this.headerMenuUnpin(),
+                canPinLeft: currentPinState !== 'left',
+                canPinRight: currentPinState !== 'right',
+                canUnpin: !!currentPinState,
+            },
+        };
+        return { layout, rowSelection, editing, interaction, contextMenu, viewModels, pinning };
     }
     // --- Private helpers ---
     getEffectiveRange() {

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

@@ -52,6 +52,7 @@ let OGridService = class OGridService {
         this.suppressHorizontalScroll = signal(undefined);
         this.editable = signal(undefined);
         this.cellSelection = signal(undefined);
+        this.density = signal('normal');
         this.onCellValueChanged = signal(undefined);
         this.onUndo = signal(undefined);
         this.onRedo = signal(undefined);
@@ -225,6 +226,7 @@ let OGridService = class OGridService {
             freezeCols: this.freezeCols(),
             editable: this.editable(),
             cellSelection: this.cellSelection(),
+            density: this.density(),
             onCellValueChanged: this.onCellValueChanged(),
             onUndo: this.onUndo(),
             onRedo: this.onRedo(),
@@ -428,7 +430,7 @@ let OGridService = class OGridService {
     handleColumnPinned(columnId, pinned) {
         this.pinnedOverrides.update((prev) => {
             if (pinned === null) {
-                const { [columnId]: _, ...rest } = prev;
+                const { [columnId]: _removed, ...rest } = prev;
                 return rest;
             }
             return { ...prev, [columnId]: pinned };
@@ -487,6 +489,8 @@ let OGridService = class OGridService {
             this.editable.set(props.editable);
         if (props.cellSelection !== undefined)
             this.cellSelection.set(props.cellSelection);
+        if (props.density !== undefined)
+            this.density.set(props.density);
         if (props.onCellValueChanged)
             this.onCellValueChanged.set(props.onCellValueChanged);
         if (props.onUndo)

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -13,7 +13,7 @@ import type { HeaderFilterConfig, CellRenderDescriptor } from '../utils';
  * 2. Call `initBase()` in the constructor (effects require injection context)
  * 3. Implement abstract accessors for propsInput, wrapperRef, and tableContainerRef
  */
-export declare abstract class BaseDataGridTableComponent<T = any> {
+export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly stateService: DataGridStateService<T>;
     readonly columnReorderService: ColumnReorderService<T>;
     readonly virtualScrollService: VirtualScrollService;
@@ -103,6 +103,7 @@ export declare abstract class BaseDataGridTableComponent<T = any> {
         onCellValueChanged?: ((event: import("@alaarab/ogrid-core").ICellValueChangedEvent<T>) => void) | undefined;
         isDragging: boolean;
     }>;
+    readonly pinnedColumnsMap: import("@angular/core").Signal<Record<string, "left" | "right">>;
     readonly allowOverflowX: import("@angular/core").Signal<boolean>;
     readonly selectionCellCount: import("@angular/core").Signal<number | undefined>;
     readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;

package/dist/types/index.d.ts

@@ -6,7 +6,7 @@ export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types
 export { OGridService } from './services/ogrid.service';
 export type { ColumnChooserPlacement, OGridPagination, OGridColumnChooser, OGridFilters, OGridSideBarState, } from './services/ogrid.service';
 export { DataGridStateService } from './services/datagrid-state.service';
-export type { DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridStateResult, } from './services/datagrid-state.service';
+export type { DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, DataGridStateResult, } from './services/datagrid-state.service';
 export { ColumnReorderService } from './services/column-reorder.service';
 export { VirtualScrollService } from './services/virtual-scroll.service';
 export type { IVirtualScrollConfig } from './services/virtual-scroll.service';

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

@@ -115,6 +115,26 @@ export interface DataGridViewModelState<T> {
     showEmptyInGrid: boolean;
     onCellError?: (error: Error) => void;
 }
+/** Column pinning state and column header menu. */
+export interface DataGridPinningState {
+    pinnedColumns: Record<string, 'left' | 'right'>;
+    pinColumn: (columnId: string, side: 'left' | 'right') => void;
+    unpinColumn: (columnId: string) => void;
+    isPinned: (columnId: string) => 'left' | 'right' | undefined;
+    headerMenu: {
+        isOpen: boolean;
+        openForColumn: string | null;
+        anchorElement: HTMLElement | null;
+        open: (columnId: string, anchorEl: HTMLElement) => void;
+        close: () => void;
+        handlePinLeft: () => void;
+        handlePinRight: () => void;
+        handleUnpin: () => void;
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+}
 export interface DataGridStateResult<T> {
     layout: DataGridLayoutState<T>;
     rowSelection: DataGridRowSelectionState;
@@ -122,6 +142,7 @@ export interface DataGridStateResult<T> {
     interaction: DataGridCellInteractionState;
     contextMenu: DataGridContextMenuState;
     viewModels: DataGridViewModelState<T>;
+    pinning: DataGridPinningState;
 }
 /**
  * Single orchestration service for DataGridTable. Takes grid props,
@@ -161,6 +182,9 @@ export declare class DataGridStateService<T> {
     private lastMousePos;
     private autoScrollInterval;
     private resizeObserver;
+    private readonly headerMenuIsOpenSig;
+    private readonly headerMenuOpenForColumnSig;
+    private readonly headerMenuAnchorElementSig;
     private readonly propsResolved;
     readonly cellSelection: import("@angular/core").Signal<boolean>;
     private readonly wrappedOnCellValueChanged;
@@ -227,6 +251,19 @@ export declare class DataGridStateService<T> {
     redo(): void;
     handleGridKeyDown(e: KeyboardEvent): void;
     handleFillHandleMouseDown(e: MouseEvent): void;
+    pinColumn(columnId: string, side: 'left' | 'right'): void;
+    unpinColumn(columnId: string): void;
+    isPinned(columnId: string): 'left' | 'right' | undefined;
+    getPinState(columnId: string): {
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+    openHeaderMenu(columnId: string, anchorEl: HTMLElement): void;
+    closeHeaderMenu(): void;
+    headerMenuPinLeft(): void;
+    headerMenuPinRight(): void;
+    headerMenuUnpin(): void;
     getState(): DataGridStateResult<T>;
     private getEffectiveRange;
     private onWindowMouseMove;

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

@@ -86,6 +86,7 @@ export declare class OGridService<T> {
     readonly suppressHorizontalScroll: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly editable: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly cellSelection: import("@angular/core").WritableSignal<boolean | undefined>;
+    readonly density: import("@angular/core").WritableSignal<"compact" | "normal" | "comfortable">;
     readonly onCellValueChanged: import("@angular/core").WritableSignal<((event: ICellValueChangedEvent<T>) => void) | undefined>;
     readonly onUndo: import("@angular/core").WritableSignal<(() => void) | undefined>;
     readonly onRedo: import("@angular/core").WritableSignal<(() => void) | undefined>;

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

@@ -32,6 +32,7 @@ interface IOGridBaseProps<T> {
     freezeCols?: number;
     editable?: boolean;
     cellSelection?: boolean;
+    density?: 'compact' | 'normal' | 'comfortable';
     onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
     onUndo?: () => void;
     onRedo?: () => void;
@@ -99,6 +100,7 @@ export interface IOGridDataGridProps<T> {
     loadingMessage?: string;
     editable?: boolean;
     cellSelection?: boolean;
+    density?: 'compact' | 'normal' | 'comfortable';
     onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
     onUndo?: () => void;
     onRedo?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "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.6"
+    "@alaarab/ogrid-core": "2.0.7"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",