@alaarab/ogrid-angular-primeng 2.0.2 → 2.0.3

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

@@ -6,12 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, input, inject, signal, computed, effect, viewChild, ChangeDetectionStrategy, } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, buildHeaderRows, getCellValue, } from '@alaarab/ogrid-angular';
+import { DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, buildHeaderRows, getCellValue, getHeaderFilterConfig, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { InlineCellEditorComponent } from './inline-cell-editor.component';
 let DataGridTableComponent = class DataGridTableComponent {
     constructor() {
         this.stateService = inject(DataGridStateService);
+        this.columnReorderService = new ColumnReorderService();
+        this.virtualScrollService = new VirtualScrollService();
         this.wrapperRef = viewChild('wrapper');
         this.tableContainerRef = viewChild('tableContainer');
         // Inputs mapped from IOGridDataGridProps
@@ -113,6 +115,19 @@ let DataGridTableComponent = class DataGridTableComponent {
         effect(() => {
             const el = this.wrapperRef()?.nativeElement ?? null;
             this.stateService.wrapperEl.set(el);
+            this.columnReorderService.wrapperEl.set(el);
+        });
+        // Wire column reorder service inputs
+        effect(() => {
+            const cols = this.state().layout.visibleCols;
+            this.columnReorderService.columns.set(cols);
+            this.columnReorderService.columnOrder.set(this.columnOrder());
+            this.columnReorderService.onColumnOrderChange.set(this.onColumnOrderChange());
+            this.columnReorderService.enabled.set(!!this.onColumnOrderChange());
+        });
+        // Wire virtual scroll service inputs
+        effect(() => {
+            this.virtualScrollService.totalRows.set(this.items().length);
         });
         // Initialize column sizing from initial widths
         effect(() => {
@@ -133,79 +148,17 @@ let DataGridTableComponent = class DataGridTableComponent {
     }
     getFilterConfig(col) {
         const s = this.state();
-        const hfi = s.viewModels.headerFilterInput;
-        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 = hfi.filters[filterField];
-        const base = {
-            filterType,
-            isSorted: hfi.sortBy === col.columnId,
-            isSortedDescending: hfi.sortBy === col.columnId && hfi.sortDirection === 'desc',
-            onSort: sortable ? () => hfi.onColumnSort(col.columnId) : undefined,
-        };
-        if (filterType === 'text') {
-            return {
-                ...base,
-                textValue: filterValue?.type === 'text' ? filterValue.value : '',
-                onTextChange: (v) => hfi.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
-            };
-        }
-        if (filterType === 'multiSelect') {
-            return {
-                ...base,
-                options: hfi.filterOptions[filterField] ?? [],
-                isLoadingOptions: hfi.loadingFilterOptions[filterField] ?? false,
-                selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
-                onFilterChange: (values) => hfi.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
-            };
-        }
-        if (filterType === 'people') {
-            return {
-                ...base,
-                selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
-                onUserChange: (u) => hfi.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
-                peopleSearch: hfi.peopleSearch,
-            };
-        }
-        if (filterType === 'date') {
-            return {
-                ...base,
-                dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
-                onDateChange: (v) => hfi.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
-            };
-        }
-        return base;
+        return getHeaderFilterConfig(col, s.viewModels.headerFilterInput);
     }
     getCellValueFn(item, col) {
         return getCellValue(item, col);
     }
     resolveCellDisplay(col, item) {
-        if (col.renderCell && typeof col.renderCell === 'function') {
-            const result = col.renderCell(item);
-            return result ?? '';
-        }
         const value = getCellValue(item, col);
-        if (col.valueFormatter)
-            return String(col.valueFormatter(value, item) ?? '');
-        if (value == null)
-            return '';
-        if (col.type === 'date') {
-            const d = new Date(String(value));
-            if (!Number.isNaN(d.getTime()))
-                return d.toLocaleDateString();
-        }
-        if (col.type === 'boolean')
-            return value ? 'True' : 'False';
-        return String(value);
+        return resolveCellDisplayContent(col, item, value);
     }
     getCellStyleObj(col, item) {
-        if (!col.cellStyle)
-            return null;
-        return typeof col.cellStyle === 'function'
-            ? col.cellStyle(item)
-            : col.cellStyle;
+        return resolveCellStyle(col, item) ?? null;
     }
     canEditCell(col, item) {
         const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
@@ -297,6 +250,9 @@ let DataGridTableComponent = class DataGridTableComponent {
     handlePaste() {
         void this.state().interaction.handlePaste();
     }
+    onHeaderMouseDown(columnId, event) {
+        this.columnReorderService.handleHeaderMouseDown(columnId, event);
+    }
     onResizeStart(e, col) {
         e.preventDefault();
         this.resizeStartX = e.clientX;
@@ -451,6 +407,8 @@ DataGridTableComponent = __decorate([
                             [style.min-width.px]="cell.columnDef!.minWidth ?? defaultMinWidth"
                             [style.width.px]="getColumnWidth(cell.columnDef!)"
                             [style.max-width.px]="getColumnWidth(cell.columnDef!)"
+                            [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            (mousedown)="onHeaderMouseDown(cell.columnDef!.columnId, $event)"
                           >
                             <ogrid-primeng-column-header-filter
                               [columnKey]="cell.columnDef!.columnId"
@@ -581,6 +539,10 @@ DataGridTableComponent = __decorate([
         </div>
       </div>
 
+      @if (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
+        <div class="ogrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
+      }
+
       @if (state().contextMenu.menuPosition) {
         <ogrid-context-menu
           [x]="state().contextMenu.menuPosition!.x"
@@ -627,6 +589,16 @@ DataGridTableComponent = __decorate([
       opacity: 0.5;
       pointer-events: none;
     }
+    .ogrid-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;
+    }
   `],
     })
 ], DataGridTableComponent);

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

@@ -1,7 +1,10 @@
 import { ElementRef } from '@angular/core';
-import type { IColumnDef, IColumnGroupDef, RowId } from '@alaarab/ogrid-angular';
+import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
+import type { IColumnDef, IColumnGroupDef, RowId, HeaderFilterConfig } from '@alaarab/ogrid-angular';
 export declare class DataGridTableComponent<T = unknown> {
     private readonly stateService;
+    readonly columnReorderService: ColumnReorderService<T>;
+    readonly virtualScrollService: VirtualScrollService;
     readonly wrapperRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
     readonly tableContainerRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
     readonly items: import("@angular/core").InputSignal<T[]>;
@@ -81,29 +84,7 @@ export declare class DataGridTableComponent<T = unknown> {
     readonly selectedCellCount: import("@angular/core").Signal<number | undefined>;
     trackByRowId(_index: number, item: T): RowId;
     getColumnWidth(col: IColumnDef<T>): number | undefined;
-    getFilterConfig(col: IColumnDef<T>): {
-        filterType: string;
-        isSorted?: boolean;
-        isSortedDescending?: boolean;
-        onSort?: () => void;
-        selectedValues?: string[];
-        onFilterChange?: (values: string[]) => void;
-        options?: string[];
-        isLoadingOptions?: boolean;
-        textValue?: string;
-        onTextChange?: (value: string) => void;
-        selectedUser?: unknown;
-        onUserChange?: (user: unknown) => void;
-        peopleSearch?: (query: string) => Promise<unknown[]>;
-        dateValue?: {
-            from?: string;
-            to?: string;
-        };
-        onDateChange?: (value: {
-            from?: string;
-            to?: string;
-        } | undefined) => void;
-    };
+    getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
     getCellValueFn(item: T, col: IColumnDef<T>): unknown;
     resolveCellDisplay(col: IColumnDef<T>, item: T): string;
     getCellStyleObj(col: IColumnDef<T>, item: T): Record<string, string> | null;
@@ -125,6 +106,7 @@ export declare class DataGridTableComponent<T = unknown> {
     onRowClick(e: MouseEvent, item: T): void;
     onRowCheckboxChange(item: T, checked: boolean, rowIndex: number, e: Event): void;
     handlePaste(): void;
+    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
     onResizeStart(e: MouseEvent, col: IColumnDef<T>): void;
     private buildProps;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "OGrid PrimeNG – PrimeNG Table-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.3"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",