npm - @alaarab/ogrid-angular-material - Versions diffs - 2.0.2 → 2.0.4 - Mend

@alaarab/ogrid-angular-material 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/esm/column-header-menu/column-header-menu.component.js ADDED Viewed

@@ -0,0 +1,122 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, EventEmitter, ViewChild } from '@angular/core';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
+/**
+ * Column header dropdown menu for pin/unpin actions.
+ * Uses Angular Material MatMenu.
+ */
+let ColumnHeaderMenuComponent = class ColumnHeaderMenuComponent {
+    constructor() {
+        this.canPinLeft = true;
+        this.canPinRight = true;
+        this.canUnpin = false;
+        this.pinLeft = new EventEmitter();
+        this.pinRight = new EventEmitter();
+        this.unpin = new EventEmitter();
+        this.menuItems = COLUMN_HEADER_MENU_ITEMS;
+    }
+    handlePinLeft() {
+        if (this.canPinLeft) {
+            this.pinLeft.emit();
+        }
+    }
+    handlePinRight() {
+        if (this.canPinRight) {
+            this.pinRight.emit();
+        }
+    }
+    handleUnpin() {
+        if (this.canUnpin) {
+            this.unpin.emit();
+        }
+    }
+};
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "columnId", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "canPinLeft", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "canPinRight", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "canUnpin", void 0);
+__decorate([
+    Output()
+], ColumnHeaderMenuComponent.prototype, "pinLeft", void 0);
+__decorate([
+    Output()
+], ColumnHeaderMenuComponent.prototype, "pinRight", void 0);
+__decorate([
+    Output()
+], ColumnHeaderMenuComponent.prototype, "unpin", void 0);
+__decorate([
+    ViewChild(MatMenuTrigger)
+], ColumnHeaderMenuComponent.prototype, "menuTrigger", void 0);
+ColumnHeaderMenuComponent = __decorate([
+    Component({
+        selector: 'column-header-menu',
+        standalone: true,
+        imports: [MatMenuModule, MatButtonModule, MatIconModule],
+        template: `
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      class="column-header-menu-trigger"
+      [attr.aria-label]="'Column options for ' + columnId"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        [disabled]="!canPinLeft"
+        (click)="handlePinLeft()"
+      >
+        {{ menuItems[0].label }}
+      </button>
+      <button
+        mat-menu-item
+        [disabled]="!canPinRight"
+        (click)="handlePinRight()"
+      >
+        {{ menuItems[1].label }}
+      </button>
+      <button
+        mat-menu-item
+        [disabled]="!canUnpin"
+        (click)="handleUnpin()"
+      >
+        {{ menuItems[2].label }}
+      </button>
+    </mat-menu>
+  `,
+        styles: [`
+    .column-header-menu-trigger {
+      opacity: 0;
+      transition: opacity 0.15s;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      padding: 0;
+    }
+    :host:hover .column-header-menu-trigger,
+    .column-header-menu-trigger:focus {
+      opacity: 1;
+    }
+  `],
+    })
+], ColumnHeaderMenuComponent);
+export { ColumnHeaderMenuComponent };

package/dist/esm/datagrid-table/datagrid-table.component.js CHANGED Viewed

@@ -4,116 +4,10 @@ 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, computed, effect, ChangeDetectionStrategy, viewChild, } from '@angular/core';
-import { DataGridStateService, buildHeaderRows, getCellValue, isInSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
+import { Component, input, signal, computed, effect, ChangeDetectionStrategy, viewChild, } from '@angular/core';
+import { DataGridStateService, ColumnReorderService, VirtualScrollService, MarchingAntsOverlayComponent, buildHeaderRows, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
-function getHeaderFilterConfig(col, input) {
-    const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
-    const filterType = (filterable?.type ?? 'none');
-    const filterField = filterable?.filterField ?? col.columnId;
-    const sortable = col.sortable !== false;
-    const filterValue = input.filters[filterField];
-    const base = {
-        columnKey: col.columnId,
-        columnName: col.name,
-        filterType,
-        isSorted: input.sortBy === col.columnId,
-        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
-        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
-    };
-    if (filterType === 'text') {
-        return {
-            ...base,
-            textValue: filterValue?.type === 'text' ? filterValue.value : '',
-            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
-        };
-    }
-    if (filterType === 'people') {
-        return {
-            ...base,
-            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
-            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
-            peopleSearch: input.peopleSearch,
-        };
-    }
-    if (filterType === 'multiSelect') {
-        return {
-            ...base,
-            options: input.filterOptions[filterField] ?? [],
-            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
-            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
-            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
-        };
-    }
-    if (filterType === 'date') {
-        return {
-            ...base,
-            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
-            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
-        };
-    }
-    return base;
-}
-function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
-    const rowId = input.getRowId(item);
-    const globalColIndex = colIdx + input.colOffset;
-    const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
-    const canEditInline = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== 'function';
-    const canEditPopup = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor === 'function';
-    const canEditAny = canEditInline || canEditPopup;
-    const isEditing = input.editingCell?.rowId === rowId && input.editingCell?.columnId === col.columnId;
-    const isActive = input.activeCell?.rowIndex === rowIndex && input.activeCell?.columnIndex === globalColIndex;
-    const inRange = input.selectionRange != null && isInSelectionRange(input.selectionRange, rowIndex, colIdx);
-    const isInCutRange = input.cutRange != null && isInSelectionRange(input.cutRange, rowIndex, colIdx);
-    const isSelectionEndCell = !input.isDragging && input.copyRange == null && input.cutRange == null &&
-        input.selectionRange != null && rowIndex === input.selectionRange.endRow && colIdx === input.selectionRange.endCol;
-    let mode = 'display';
-    let editorType;
-    const value = getCellValue(item, col);
-    if (isEditing && canEditInline) {
-        mode = 'editing-inline';
-        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'richSelect' || col.cellEditor === 'date') {
-            editorType = col.cellEditor;
-        }
-        else if (col.type === 'date')
-            editorType = 'date';
-        else if (col.type === 'boolean')
-            editorType = 'checkbox';
-        else
-            editorType = 'text';
-    }
-    else if (isEditing && canEditPopup) {
-        mode = 'editing-popover';
-    }
-    return {
-        mode, editorType, value,
-        isActive, isInRange: inRange, isInCutRange, isSelectionEndCell,
-        canEditAny, globalColIndex, rowId, rowIndex, displayValue: value,
-    };
-}
-function resolveCellDisplayContent(col, item, displayValue) {
-    if (col.renderCell && typeof col.renderCell === 'function') {
-        const result = col.renderCell(item);
-        return result != null ? String(result) : '';
-    }
-    if (col.valueFormatter)
-        return String(col.valueFormatter(displayValue, item) ?? '');
-    if (displayValue == null)
-        return '';
-    if (col.type === 'date') {
-        const d = new Date(String(displayValue));
-        if (!Number.isNaN(d.getTime()))
-            return d.toLocaleDateString();
-    }
-    if (col.type === 'boolean')
-        return displayValue ? 'True' : 'False';
-    return String(displayValue);
-}
-function resolveCellStyle(col, item) {
-    if (!col.cellStyle)
-        return undefined;
-    return typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
-}
+import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
  * Standalone component — this is the workhorse of the grid.
@@ -124,7 +18,10 @@ let DataGridTableComponent = class DataGridTableComponent {
         this.wrapperRef = viewChild('wrapperEl');
         this.tableContainerRef = viewChild('tableContainerEl');
         this.stateService = new DataGridStateService();
+        this.columnReorderService = new ColumnReorderService();
+        this.virtualScrollService = new VirtualScrollService();
         this.lastMouseShift = false;
+        this.columnSizingVersion = signal(0);
         // --- Delegated state ---
         this.state = computed(() => this.stateService.getState());
         this.items = computed(() => this.propsInput()?.items ?? []);
@@ -137,9 +34,13 @@ let DataGridTableComponent = class DataGridTableComponent {
         this.ariaLabel = computed(() => this.propsInput()?.['aria-label'] ?? 'Data grid');
         this.ariaLabelledBy = computed(() => this.propsInput()?.['aria-labelledby']);
         this.emptyState = computed(() => this.propsInput()?.emptyState);
+        this.currentPage = computed(() => this.propsInput()?.currentPage ?? 1);
+        this.pageSize = computed(() => this.propsInput()?.pageSize ?? 25);
+        this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0);
         // State service outputs
         this.visibleCols = computed(() => this.state().layout.visibleCols);
         this.hasCheckboxCol = computed(() => this.state().layout.hasCheckboxCol);
+        this.hasRowNumbersCol = computed(() => this.state().layout.hasRowNumbersCol);
         this.colOffset = computed(() => this.state().layout.colOffset);
         this.containerWidth = computed(() => this.state().layout.containerWidth);
         this.minTableWidth = computed(() => this.state().layout.minTableWidth);
@@ -189,10 +90,13 @@ let DataGridTableComponent = class DataGridTableComponent {
         this.columnLayouts = computed(() => {
             const cols = this.visibleCols();
             const fc = this.freezeCols();
+            const props = this.propsInput();
+            const pinnedCols = props?.pinnedColumns ?? {};
             return cols.map((col, colIdx) => {
                 const isFreezeCol = fc != null && fc >= 1 && colIdx < fc;
-                const pinnedLeft = col.pinned === 'left' || (isFreezeCol && colIdx === 0);
-                const pinnedRight = col.pinned === 'right';
+                const runtimePinned = pinnedCols[col.columnId];
+                const pinnedLeft = runtimePinned === 'left' || (isFreezeCol && colIdx === 0);
+                const pinnedRight = runtimePinned === 'right';
                 const w = this.getColumnWidth(col);
                 return {
                     col,
@@ -211,8 +115,28 @@ let DataGridTableComponent = class DataGridTableComponent {
         });
         effect(() => {
             const el = this.wrapperRef()?.nativeElement;
-            if (el)
+            if (el) {
                 this.stateService.wrapperEl.set(el);
+                this.columnReorderService.wrapperEl.set(el);
+            }
+        });
+        // Wire column reorder service inputs
+        effect(() => {
+            const p = this.propsInput();
+            if (p) {
+                const cols = this.visibleCols();
+                this.columnReorderService.columns.set(cols);
+                this.columnReorderService.columnOrder.set(p.columnOrder);
+                this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
+                this.columnReorderService.enabled.set(!!p.onColumnOrderChange);
+            }
+        });
+        // Wire virtual scroll service inputs
+        effect(() => {
+            const p = this.propsInput();
+            if (p) {
+                this.virtualScrollService.totalRows.set(p.items.length);
+            }
         });
     }
     // --- Helper methods ---
@@ -288,6 +212,7 @@ let DataGridTableComponent = class DataGridTableComponent {
             const newWidth = Math.max(minWidth, startWidth + delta);
             const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
             this.state().layout.setColumnSizingOverrides(overrides);
+            this.columnSizingVersion.update(v => v + 1);
         };
         const onUp = () => {
             window.removeEventListener('mousemove', onMove);
@@ -351,12 +276,36 @@ let DataGridTableComponent = class DataGridTableComponent {
     onRedo() {
         this.state().interaction.onRedo?.();
     }
+    onHeaderMouseDown(columnId, event) {
+        this.columnReorderService.handleHeaderMouseDown(columnId, event);
+    }
+    // --- Column pinning methods ---
+    onPinColumn(columnId, side) {
+        const props = this.propsInput();
+        props?.onColumnPinned?.(columnId, side);
+    }
+    onUnpinColumn(columnId) {
+        const props = this.propsInput();
+        props?.onColumnPinned?.(columnId, null);
+    }
+    isPinned(columnId) {
+        const props = this.propsInput();
+        return props?.pinnedColumns?.[columnId];
+    }
+    getPinState(columnId) {
+        const pinned = this.isPinned(columnId);
+        return {
+            canPinLeft: pinned !== 'left',
+            canPinRight: pinned !== 'right',
+            canUnpin: !!pinned,
+        };
+    }
 };
 DataGridTableComponent = __decorate([
     Component({
         selector: 'ogrid-datagrid-table',
         standalone: true,
-        imports: [ColumnHeaderFilterComponent],
+        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, MarchingAntsOverlayComponent],
         providers: [DataGridStateService],
         changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
@@ -401,6 +350,14 @@ DataGridTableComponent = __decorate([
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
                         <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" style="width: 48px; min-width: 48px; padding: 0;"></th>
                       }
+                      @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
+                        <th class="ogrid-datagrid-th ogrid-row-number-header" [attr.rowSpan]="headerRows().length > 1 ? 1 : null">
+                          <div class="ogrid-row-number-header-content">#</div>
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" [style.width.px]="50" [style.min-width.px]="50" style="padding: 0;"></th>
+                      }
                       @for (cell of row; track $index; let cellIdx = $index) {
                         @if (cell.isGroup) {
                           <th [attr.colSpan]="cell.colSpan" scope="colgroup" class="ogrid-datagrid-th ogrid-datagrid-group-header">
@@ -411,34 +368,52 @@ DataGridTableComponent = __decorate([
                           @let colIdx = visibleColIndex(col);
                           @let isFreezeCol = freezeCols() != null && (freezeCols() ?? 0) >= 1 && colIdx < (freezeCols() ?? 0);
                           @let colW = getColumnWidth(col);
+                          @let pinned = isPinned(col.columnId);
+                          @let pinnedLeft = pinned === 'left' || (isFreezeCol && colIdx === 0);
+                          @let pinnedRight = pinned === 'right';
                           <th scope="col"
                             class="ogrid-datagrid-th"
-                            [class.ogrid-datagrid-th--pinned-left]="col.pinned === 'left' || (isFreezeCol && colIdx === 0)"
-                            [class.ogrid-datagrid-th--pinned-right]="col.pinned === 'right'"
+                            [class.ogrid-datagrid-th--pinned-left]="pinnedLeft"
+                            [class.ogrid-datagrid-th--pinned-right]="pinnedRight"
                             [attr.rowSpan]="headerRows().length > 1 ? headerRows().length - rowIdx : null"
+                            [attr.data-column-id]="col.columnId"
                             [style.minWidth.px]="col.minWidth ?? 80"
                             [style.width.px]="colW"
                             [style.maxWidth.px]="colW"
+                            [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
-                            <ogrid-column-header-filter
-                              [columnKey]="col.columnId"
-                              [columnName]="col.name"
-                              [filterType]="getFilterConfig(col).filterType"
-                              [isSorted]="getFilterConfig(col).isSorted"
-                              [isSortedDescending]="getFilterConfig(col).isSortedDescending"
-                              [onSort]="getFilterConfig(col).onSort"
-                              [selectedValues]="getFilterConfig(col).selectedValues"
-                              [onFilterChange]="getFilterConfig(col).onFilterChange"
-                              [options]="getFilterConfig(col).options"
-                              [isLoadingOptions]="getFilterConfig(col).isLoadingOptions ?? false"
-                              [textValue]="getFilterConfig(col).textValue ?? ''"
-                              [onTextChange]="getFilterConfig(col).onTextChange"
-                              [selectedUser]="getFilterConfig(col).selectedUser"
-                              [onUserChange]="getFilterConfig(col).onUserChange"
-                              [peopleSearch]="getFilterConfig(col).peopleSearch"
-                              [dateValue]="getFilterConfig(col).dateValue"
-                              [onDateChange]="getFilterConfig(col).onDateChange"
-                            />
+                            <div style="display:flex;align-items:center;gap:4px;">
+                              <ogrid-column-header-filter
+                                [columnKey]="col.columnId"
+                                [columnName]="col.name"
+                                [filterType]="getFilterConfig(col).filterType"
+                                [isSorted]="getFilterConfig(col).isSorted"
+                                [isSortedDescending]="getFilterConfig(col).isSortedDescending"
+                                [onSort]="getFilterConfig(col).onSort"
+                                [selectedValues]="getFilterConfig(col).selectedValues"
+                                [onFilterChange]="getFilterConfig(col).onFilterChange"
+                                [options]="getFilterConfig(col).options"
+                                [isLoadingOptions]="getFilterConfig(col).isLoadingOptions ?? false"
+                                [textValue]="getFilterConfig(col).textValue ?? ''"
+                                [onTextChange]="getFilterConfig(col).onTextChange"
+                                [selectedUser]="getFilterConfig(col).selectedUser"
+                                [onUserChange]="getFilterConfig(col).onUserChange"
+                                [peopleSearch]="getFilterConfig(col).peopleSearch"
+                                [dateValue]="getFilterConfig(col).dateValue"
+                                [onDateChange]="getFilterConfig(col).onDateChange"
+                              />
+                              @let pinState = getPinState(col.columnId);
+                              <column-header-menu
+                                [columnId]="col.columnId"
+                                [onPinLeft]="() => onPinColumn(col.columnId, 'left')"
+                                [onPinRight]="() => onPinColumn(col.columnId, 'right')"
+                                [onUnpin]="() => onUnpinColumn(col.columnId)"
+                                [canPinLeft]="pinState.canPinLeft"
+                                [canPinRight]="pinState.canPinRight"
+                                [canUnpin]="pinState.canUnpin"
+                              />
+                            </div>
                             <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeStart($event, col)"></div>
                           </th>
                         }
@@ -474,6 +449,13 @@ DataGridTableComponent = __decorate([
                             </div>
                           </td>
                         }
+                        @if (hasRowNumbersCol()) {
+                          <td class="ogrid-datagrid-td ogrid-row-number-cell">
+                            <div class="ogrid-row-number-cell-content">
+                              {{ rowNumberOffset() + rowIndex + 1 }}
+                            </div>
+                          </td>
+                        }
                         @for (colLayout of columnLayouts(); track colLayout.col.columnId; let colIdx = $index) {
                           <td
                             class="ogrid-datagrid-td"
@@ -566,6 +548,15 @@ DataGridTableComponent = __decorate([
                 }
               </table>
+              <ogrid-marching-ants-overlay
+                [containerEl]="tableContainerEl()"
+                [selectionRange]="state().interaction.selectionRange"
+                [copyRange]="state().interaction.copyRange"
+                [cutRange]="state().interaction.cutRange"
+                [colOffset]="state().layout.colOffset"
+                [columnSizingVersion]="columnSizingVersion()"
+              ></ogrid-marching-ants-overlay>
               @if (showEmptyInGrid() && emptyState()) {
                 <div class="ogrid-datagrid-empty">
                   <div class="ogrid-datagrid-empty__title">No results found</div>
@@ -586,6 +577,10 @@ DataGridTableComponent = __decorate([
           </div>
         </div>
+        @if (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
+          <div class="ogrid-datagrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
+        }
         @if (menuPosition()) {
           <div
             class="ogrid-datagrid-context-menu-overlay"
@@ -658,9 +653,11 @@ DataGridTableComponent = __decorate([
     }
     .ogrid-datagrid-th--pinned-left {
       position: sticky; left: 0; z-index: 9; background: rgba(0,0,0,0.04); will-change: transform;
+      border-left: 2px solid var(--mat-sys-primary, #1976d2);
     }
     .ogrid-datagrid-th--pinned-right {
       position: sticky; right: 0; z-index: 9; background: rgba(0,0,0,0.04); will-change: transform;
+      border-right: 2px solid var(--mat-sys-primary, #1976d2);
     }
     .ogrid-datagrid-group-header {
       text-align: center; font-weight: 600; border-bottom: 2px solid rgba(0,0,0,0.12); padding: 6px;
@@ -670,15 +667,28 @@ DataGridTableComponent = __decorate([
       max-width: ${CHECKBOX_COLUMN_WIDTH}px; text-align: center;
     }
     .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }
+    .ogrid-row-number-header, .ogrid-row-number-cell {
+      width: ${ROW_NUMBER_COLUMN_WIDTH}px; min-width: ${ROW_NUMBER_COLUMN_WIDTH}px;
+      max-width: ${ROW_NUMBER_COLUMN_WIDTH}px; text-align: center;
+      background: rgba(0,0,0,0.04); font-weight: 600;
+      font-variant-numeric: tabular-nums; color: rgba(0,0,0,0.6);
+      position: sticky; left: 0; z-index: 3;
+    }
+    .ogrid-row-number-header { z-index: 4; }
+    .ogrid-row-number-header-content, .ogrid-row-number-cell-content {
+      display: flex; align-items: center; justify-content: center;
+    }
     .ogrid-datagrid-row { }
     .ogrid-datagrid-row:hover { background: rgba(0,0,0,0.04); }
     .ogrid-datagrid-row--selected { background: rgba(25,118,210,0.08); }
     .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.06); }
     .ogrid-datagrid-td--pinned-left {
       position: sticky; left: 0; z-index: 6; background: #fff; will-change: transform;
+      border-left: 2px solid var(--mat-sys-primary, #1976d2);
     }
     .ogrid-datagrid-td--pinned-right {
       position: sticky; right: 0; z-index: 6; background: #fff; will-change: transform;
+      border-right: 2px solid var(--mat-sys-primary, #1976d2);
     }
     .ogrid-datagrid-cell {
       width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
@@ -698,7 +708,10 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-cell--editing { padding: 0; }
     .ogrid-datagrid-editor-input {
       width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection, #217346);
-      box-sizing: border-box; font-size: 14px; outline: none;
+      box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;
+    }
+    .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {
+      text-align: right;
     }
     .ogrid-datagrid-editor-select {
       width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection, #217346);
@@ -744,6 +757,11 @@ DataGridTableComponent = __decorate([
       border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;
     }
     @keyframes ogrid-spin { to { transform: rotate(360deg); } }
+    .ogrid-datagrid-drop-indicator {
+      position: absolute; top: 0; bottom: 0; width: 3px;
+      background: var(--ogrid-primary, #217346);
+      pointer-events: none; z-index: 100; transition: left 0.05s;
+    }
     .ogrid-datagrid-context-menu-overlay {
       position: fixed; inset: 0; z-index: 1000;
     }

package/dist/esm/index.js CHANGED Viewed

@@ -6,3 +6,4 @@ export { DataGridTableComponent } from './datagrid-table/datagrid-table.componen
 export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
 export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
+export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';

package/dist/types/column-header-menu/column-header-menu.component.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { EventEmitter } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+/**
+ * Column header dropdown menu for pin/unpin actions.
+ * Uses Angular Material MatMenu.
+ */
+export declare class ColumnHeaderMenuComponent {
+    columnId: string;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+    pinLeft: EventEmitter<void>;
+    pinRight: EventEmitter<void>;
+    unpin: EventEmitter<void>;
+    menuTrigger?: MatMenuTrigger;
+    readonly menuItems: import("@alaarab/ogrid-core").IColumnHeaderMenuItem[];
+    handlePinLeft(): void;
+    handlePinRight(): void;
+    handleUnpin(): void;
+}

package/dist/types/datagrid-table/datagrid-table.component.d.ts CHANGED Viewed

@@ -1,38 +1,5 @@
-import type { IOGridDataGridProps, IColumnDef, RowId, ColumnFilterType, IDateFilterValue, UserLike, IFilters, FilterValue } from '@alaarab/ogrid-angular';
-type CellRenderMode = 'editing-inline' | 'editing-popover' | 'display';
-interface CellRenderDescriptor {
-    mode: CellRenderMode;
-    editorType?: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
-    value?: unknown;
-    isActive: boolean;
-    isInRange: boolean;
-    isInCutRange: boolean;
-    isSelectionEndCell: boolean;
-    canEditAny: boolean;
-    globalColIndex: number;
-    rowId: RowId;
-    rowIndex: number;
-    displayValue?: unknown;
-}
-interface HeaderFilterConfig {
-    columnKey: string;
-    columnName: string;
-    filterType: ColumnFilterType;
-    isSorted: boolean;
-    isSortedDescending: boolean;
-    onSort: (() => void) | undefined;
-    selectedValues?: string[];
-    onFilterChange?: (values: string[]) => void;
-    options?: string[];
-    isLoadingOptions?: boolean;
-    textValue?: string;
-    onTextChange?: (value: string) => void;
-    selectedUser?: UserLike;
-    onUserChange?: (user: UserLike | undefined) => void;
-    peopleSearch?: (query: string) => Promise<UserLike[]>;
-    dateValue?: IDateFilterValue;
-    onDateChange?: (value: IDateFilterValue | undefined) => void;
-}
+import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
+import type { IOGridDataGridProps, IColumnDef, RowId, CellRenderDescriptor, HeaderFilterConfig } from '@alaarab/ogrid-angular';
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
  * Standalone component — this is the workhorse of the grid.
@@ -42,7 +9,10 @@ export declare class DataGridTableComponent<T> {
     private readonly wrapperRef;
     private readonly tableContainerRef;
     private readonly stateService;
+    readonly columnReorderService: ColumnReorderService<T>;
+    readonly virtualScrollService: VirtualScrollService;
     private lastMouseShift;
+    private columnSizingVersion;
     constructor();
     private readonly state;
     readonly items: import("@angular/core").Signal<T[]>;
@@ -60,8 +30,12 @@ export declare class DataGridTableComponent<T> {
         message?: string;
         render?: import("@angular/core").TemplateRef<unknown>;
     } | undefined>;
+    readonly currentPage: import("@angular/core").Signal<number>;
+    readonly pageSize: import("@angular/core").Signal<number>;
+    readonly rowNumberOffset: import("@angular/core").Signal<number>;
     readonly visibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
     readonly hasCheckboxCol: import("@angular/core").Signal<boolean>;
+    readonly hasRowNumbersCol: import("@angular/core").Signal<boolean>;
     readonly colOffset: import("@angular/core").Signal<number>;
     readonly containerWidth: import("@angular/core").Signal<number>;
     readonly minTableWidth: import("@angular/core").Signal<number>;
@@ -77,11 +51,11 @@ export declare class DataGridTableComponent<T> {
         columnId: string;
     } | null>;
     readonly pendingEditorValue: import("@angular/core").Signal<unknown>;
-    readonly activeCell: import("@angular/core").Signal<import("@alaarab/ogrid-angular").IActiveCell | null>;
-    readonly selectionRange: import("@angular/core").Signal<import("@alaarab/ogrid-angular").ISelectionRange | null>;
+    readonly activeCell: import("@angular/core").Signal<import("@alaarab/ogrid-core").IActiveCell | null>;
+    readonly selectionRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
     readonly hasCellSelection: import("@angular/core").Signal<boolean>;
-    readonly cutRange: import("@angular/core").Signal<import("@alaarab/ogrid-angular").ISelectionRange | null>;
-    readonly copyRange: import("@angular/core").Signal<import("@alaarab/ogrid-angular").ISelectionRange | null>;
+    readonly cutRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
+    readonly copyRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
     readonly canUndo: import("@angular/core").Signal<boolean>;
     readonly canRedo: import("@angular/core").Signal<boolean>;
     readonly isDragging: import("@angular/core").Signal<boolean>;
@@ -89,37 +63,37 @@ export declare class DataGridTableComponent<T> {
         x: number;
         y: number;
     } | null>;
-    readonly statusBarConfig: import("@angular/core").Signal<import("@alaarab/ogrid-angular").IStatusBarProps | null>;
+    readonly statusBarConfig: import("@angular/core").Signal<import("@alaarab/ogrid-core").IStatusBarProps | null>;
     readonly showEmptyInGrid: import("@angular/core").Signal<boolean>;
     readonly headerFilterInput: import("@angular/core").Signal<{
         sortBy?: string;
         sortDirection: "asc" | "desc";
         onColumnSort: (columnKey: string) => void;
-        filters: IFilters;
-        onFilterChange: (key: string, value: FilterValue | undefined) => void;
+        filters: import("@alaarab/ogrid-core").IFilters;
+        onFilterChange: (key: string, value: import("@alaarab/ogrid-core").FilterValue | undefined) => void;
         filterOptions: Record<string, string[]>;
         loadingFilterOptions: Record<string, boolean>;
-        peopleSearch?: (query: string) => Promise<UserLike[]>;
+        peopleSearch?: (query: string) => Promise<import("@alaarab/ogrid-core").UserLike[]>;
     }>;
     readonly cellDescriptorInput: import("@angular/core").Signal<{
         editingCell: {
             rowId: RowId;
             columnId: string;
         } | null;
-        activeCell: import("@alaarab/ogrid-angular").IActiveCell | null;
-        selectionRange: import("@alaarab/ogrid-angular").ISelectionRange | null;
-        cutRange: import("@alaarab/ogrid-angular").ISelectionRange | null;
-        copyRange: import("@alaarab/ogrid-angular").ISelectionRange | null;
+        activeCell: import("@alaarab/ogrid-core").IActiveCell | null;
+        selectionRange: import("@alaarab/ogrid-core").ISelectionRange | null;
+        cutRange: import("@alaarab/ogrid-core").ISelectionRange | null;
+        copyRange: import("@alaarab/ogrid-core").ISelectionRange | null;
         colOffset: number;
         itemsLength: number;
         getRowId: (item: T) => RowId;
         editable?: boolean;
-        onCellValueChanged?: ((event: import("@alaarab/ogrid-angular").ICellValueChangedEvent<T>) => void) | undefined;
+        onCellValueChanged?: ((event: import("@alaarab/ogrid-core").ICellValueChangedEvent<T>) => void) | undefined;
         isDragging: boolean;
     }>;
     readonly allowOverflowX: import("@angular/core").Signal<boolean>;
     readonly selectionCellCount: import("@angular/core").Signal<number | undefined>;
-    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-angular").HeaderRow<T>[]>;
+    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;
     readonly columnLayouts: import("@angular/core").Signal<{
         col: IColumnDef<T>;
         pinnedLeft: boolean;
@@ -157,5 +131,13 @@ export declare class DataGridTableComponent<T> {
     handleSelectAllCells(): void;
     onUndo(): void;
     onRedo(): void;
+    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
+    onPinColumn(columnId: string, side: 'left' | 'right'): void;
+    onUnpinColumn(columnId: string): void;
+    isPinned(columnId: string): 'left' | 'right' | undefined;
+    getPinState(columnId: string): {
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
 }
-export {};

package/dist/types/index.d.ts CHANGED Viewed

@@ -6,3 +6,4 @@ export type { IColumnHeaderFilterProps } from './column-header-filter/column-hea
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
 export type { IColumnChooserProps } from './column-chooser/column-chooser.component';
 export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
+export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';

package/dist/types/pagination-controls/pagination-controls.component.d.ts CHANGED Viewed

@@ -10,6 +10,6 @@ export declare class PaginationControlsComponent {
     readonly entityLabelPlural: import("@angular/core").InputSignal<string>;
     readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
     readonly pageSizeChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly vm: import("@angular/core").Signal<import("@alaarab/ogrid-angular").PaginationViewModel | null>;
+    readonly vm: import("@angular/core").Signal<import("@alaarab/ogrid-core").PaginationViewModel | null>;
     onPageSizeSelect(event: Event): void;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "OGrid Angular Material – MatTable-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "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-angular": "2.0.2"
+    "@alaarab/ogrid-angular": "2.0.4"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",