@alaarab/ogrid-angular-primeng 2.0.11 → 2.0.13

package/dist/esm/column-chooser/column-chooser.component.js

@@ -37,7 +37,7 @@ ColumnChooserComponent = __decorate([
         <div
           style="position:absolute;right:0;top:100%;z-index:100;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
         >
-          <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-muted, #666)">
+          <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6))">
             Select Columns ({{ visibleCount() }} of {{ totalCount() }})
           </div>
           @for (col of columns; track col.columnId) {

package/dist/esm/column-header-filter/column-header-filter.component.js

@@ -148,7 +148,7 @@ ColumnHeaderFilterComponent = __decorate([
                     [attr.aria-label]="'Search ' + columnName + ' options'"
                   />
                   @if (isLoadingOptions) {
-                    <div style="padding:8px 0;color:var(--ogrid-muted, #999);font-size:12px">Loading...</div>
+                    <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
                   } @else {
                     <div style="display:flex;gap:4px;margin-bottom:6px">
                       <button type="button" class="p-button p-button-text p-button-sm" (click)="handleSelectAllOptions()" style="font-size:11px">All</button>
@@ -160,7 +160,7 @@ ColumnHeaderFilterComponent = __decorate([
                           <input
                             type="checkbox"
                             [checked]="tempSelected().has(opt)"
-                            (change)="handleCheckboxChange(opt, $any($event.target).checked)"
+                            (change)="handleCheckboxChange(opt, $event)"
                           />
                           {{ opt }}
                         </label>
@@ -195,7 +195,7 @@ ColumnHeaderFilterComponent = __decorate([
                     [attr.aria-label]="'Search people for ' + columnName"
                   />
                   @if (isPeopleLoading()) {
-                    <div style="padding:8px 0;color:var(--ogrid-muted, #999);font-size:12px">Loading...</div>
+                    <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
                   }
                   @for (user of peopleSuggestions(); track user.email) {
                     <button

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

@@ -114,15 +114,19 @@ ColumnHeaderMenuComponent = __decorate([
   `,
         styles: [`
     .column-header-menu-trigger {
-      opacity: 0;
-      transition: opacity 0.15s;
       padding: 0.25rem;
-      min-width: auto;
+      min-width: 24px;
+      height: 24px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      border-radius: 4px;
+      transition: background-color 0.15s;
     }
-
-    :host:hover .column-header-menu-trigger,
-    .column-header-menu-trigger:focus {
-      opacity: 1;
+    .column-header-menu-trigger:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

package/dist/esm/datagrid-table/datagrid-table.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, signal, computed, ViewChild, ChangeDetectionStrategy, } from '@angular/core';
+import { Component, Input, signal, computed, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, } from '@angular/core';
 import { BaseDataGridTableComponent, DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, getCellValue, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
@@ -25,6 +25,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
         this.freezeColsInput = undefined;
         this.layoutMode = 'fill';
         this.suppressHorizontalScroll = undefined;
+        this.columnReorder = undefined;
         this.isLoadingInput = false;
         this.loadingMessageInput = 'Loading\u2026';
         this.editable = undefined;
@@ -56,6 +57,13 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             statusBarLabel: 'ogrid-status-bar-label',
             statusBarValue: 'ogrid-status-bar-value',
         };
+        this.contextMenuClasses = {
+            contextMenu: 'ogrid-context-menu',
+            contextMenuItem: 'ogrid-context-menu-item',
+            contextMenuItemLabel: 'ogrid-context-menu-item-label',
+            contextMenuItemShortcut: 'ogrid-context-menu-item-shortcut',
+            contextMenuDivider: 'ogrid-context-menu-divider',
+        };
         // PrimeNG uses flat number overrides for column sizing
         this.primengColumnSizingOverrides = signal({});
         this.propsSignal = signal(undefined);
@@ -223,7 +231,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             onUnpin: () => this.onUnpinColumn(columnId),
             onSortAsc: () => this.onSortAsc(columnId),
             onSortDesc: () => this.onSortDesc(columnId),
-            onClearSort: () => this.onClearSort(),
+            onClearSort: () => this.onClearSort(columnId),
             onAutosizeThis: () => this.onAutosizeColumn(columnId),
             onAutosizeAll: () => this.onAutosizeAllColumns(),
             onClose: () => { }
@@ -281,6 +289,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             freezeCols: this.freezeColsInput,
             layoutMode: this.layoutMode,
             suppressHorizontalScroll: this.suppressHorizontalScroll,
+            columnReorder: this.columnReorder,
             isLoading: this.isLoadingInput,
             loadingMessage: this.loadingMessageInput,
             editable: this.editable,
@@ -367,6 +376,9 @@ __decorate([
 __decorate([
     Input()
 ], DataGridTableComponent.prototype, "suppressHorizontalScroll", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "columnReorder", void 0);
 __decorate([
     Input({ alias: 'isLoading' })
 ], DataGridTableComponent.prototype, "isLoadingInput", void 0);
@@ -460,13 +472,16 @@ DataGridTableComponent = __decorate([
             PopoverCellEditorComponent,
         ],
         changeDetection: ChangeDetectionStrategy.OnPush,
+        encapsulation: ViewEncapsulation.None,
         providers: [DataGridStateService],
         template: `
-    <div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column">
+    <div class="ogrid-root">
       <div
         #wrapper
         tabindex="0"
         role="region"
+        class="ogrid-scroll-wrapper"
+        [class.ogrid-scroll-wrapper--loading-empty]="isLoading() && items().length === 0"
         [attr.aria-label]="resolvedAriaLabel()"
         [attr.aria-labelledby]="ariaLabelledBy()"
         [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
@@ -479,26 +494,19 @@ DataGridTableComponent = __decorate([
         (keydown)="onGridKeyDown($event)"
         (mousedown)="onWrapperMouseDown($event)"
         (scroll)="onWrapperScroll($event)"
-        style="flex:1;min-height:0;overflow:auto;outline:none;position:relative;font-size:13px;color:var(--ogrid-fg, #242424)"
         [style.--data-table-column-count]="state().layout.totalColCount"
         [style.--data-table-width]="tableWidthStyle()"
         [style.--data-table-min-width]="tableMinWidthStyle()"
       >
-        <div style="position:relative">
-          <div [class.loading-dimmed]="isLoading() && items().length > 0" style="position:relative">
-            <div #tableContainer style="position:relative">
-              <table
-                style="width:var(--data-table-width, 100%);min-width:var(--data-table-min-width, 100%);border-collapse:collapse;table-layout:fixed"
-              >
-                <thead style="z-index:3;background:var(--ogrid-header-bg, #f5f5f5)">
+        <div class="ogrid-table-wrapper">
+          <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
+            <div #tableContainer class="ogrid-table-wrapper">
+              <table class="ogrid-table">
+                <thead class="ogrid-thead">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
-                        <th
-                          scope="col"
-                          rowSpan="1"
-                          style="width:48px;min-width:48px;max-width:48px;padding:6px 4px;text-align:center;border-bottom:1px solid var(--ogrid-border, #e0e0e0)"
-                        >
+                        <th scope="col" rowSpan="1" class="ogrid-checkbox-header">
                           <input
                             type="checkbox"
                             [checked]="allSelected()"
@@ -512,23 +520,19 @@ DataGridTableComponent = __decorate([
                         <th [attr.rowSpan]="headerRows().length - 1"></th>
                       }
                       @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th
-                          scope="col"
-                          rowSpan="1"
-                          style="width:50px;min-width:50px;max-width:50px;padding:6px;text-align:center;font-weight:600;background:var(--ogrid-bg-subtle,#fafafa);color:var(--ogrid-text-secondary,#666);border-bottom:1px solid var(--ogrid-border,#e0e0e0);position:sticky;left:0;z-index:4"
-                        >
+                        <th scope="col" rowSpan="1" class="ogrid-row-number-header">
                           #
                         </th>
                       }
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th [attr.rowSpan]="headerRows().length - 1" style="width:50px;min-width:50px"></th>
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-row-number-spacer"></th>
                       }
                       @for (cell of row; track $index; let cellIdx = $index) {
                         @if (cell.isGroup) {
                           <th
                             [attr.colSpan]="cell.colSpan"
                             scope="colgroup"
-                            style="padding:6px 8px;text-align:center;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0)"
+                            class="ogrid-column-group-header"
                           >
                             {{ cell.label }}
                           </th>
@@ -537,11 +541,11 @@ DataGridTableComponent = __decorate([
                           @let pinned = isPinned(col.columnId);
                           <th
                             scope="col"
+                            class="ogrid-header-cell"
                             [attr.data-column-id]="col.columnId"
                             [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
                             [class.ogrid-th-pinned-left]="pinned === 'left'"
                             [class.ogrid-th-pinned-right]="pinned === 'right'"
-                            style="padding:6px 8px;text-align:left;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0);position:sticky;top:0;background:var(--ogrid-header-bg, #f5f5f5);z-index:3"
                             [style.min-width.px]="col.minWidth ?? defaultMinWidth"
                             [style.width.px]="getColumnWidth(col)"
                             [style.max-width.px]="getColumnWidth(col)"
@@ -550,7 +554,7 @@ DataGridTableComponent = __decorate([
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
                             (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
-                            <div style="display:flex;align-items:center;gap:4px;">
+                            <div class="ogrid-header-content">
                               <ogrid-primeng-column-header-filter
                                 [columnKey]="col.columnId"
                                 [columnName]="col.name"
@@ -584,7 +588,7 @@ DataGridTableComponent = __decorate([
                               />
                             </div>
                             <div
-                              style="position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize"
+                              class="ogrid-resize-handle"
                               (mousedown)="onResizeStartPrimeng($event, col)"
                               [attr.aria-label]="'Resize ' + col.name"
                             ></div>
@@ -611,7 +615,7 @@ DataGridTableComponent = __decorate([
                       >
                         @if (hasCheckboxCol()) {
                           <td
-                            style="width:48px;min-width:48px;max-width:48px;padding:6px 4px;text-align:center;border-bottom:1px solid var(--ogrid-border, #f0f0f0)"
+                            class="ogrid-checkbox-cell"
                             [attr.data-row-index]="rowIndex"
                             [attr.data-col-index]="0"
                             (click)="$event.stopPropagation()"
@@ -625,18 +629,18 @@ DataGridTableComponent = __decorate([
                           </td>
                         }
                         @if (hasRowNumbersCol()) {
-                          <td
-                            style="width:50px;min-width:50px;max-width:50px;padding:6px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ogrid-text-secondary,#666);background:var(--ogrid-bg-subtle,#fafafa);border-bottom:1px solid var(--ogrid-border,#f0f0f0);position:sticky;left:0;z-index:3"
-                          >
+                          <td class="ogrid-row-number-cell">
+
                             {{ rowNumberOffset() + rowIndex + 1 }}
                           </td>
                         }
                         @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
                           @let pinned = isPinned(col.columnId);
                           <td
+                            [attr.data-column-id]="col.columnId"
                             [class.ogrid-td-pinned-left]="pinned === 'left'"
                             [class.ogrid-td-pinned-right]="pinned === 'right'"
-                            style="padding:0;border-bottom:1px solid var(--ogrid-border, #f0f0f0);position:relative"
+                            class="ogrid-data-cell"
                             [style.min-width.px]="col.minWidth ?? defaultMinWidth"
                             [style.width.px]="getColumnWidth(col)"
                             [style.max-width.px]="getColumnWidth(col)"
@@ -672,7 +676,7 @@ DataGridTableComponent = __decorate([
                                 (mousedown)="onCellMouseDown($event, rowIndex, colIdx + colOffset())"
                                 (dblclick)="onCellDblClickPrimeng(item, col, rowIndex, colIdx)"
                                 (contextmenu)="onCellContextMenu($event)"
-                                style="padding:6px 10px;min-height:20px;cursor:default;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+                                class="ogrid-cell-content"
                                 [style.cursor]="canEditCell(col, item) ? 'cell' : 'default'"
                                 [style.background]="getCellBackground(rowIndex, colIdx)"
                                 [style.outline]="isActiveCell(rowIndex, colIdx) ? '2px solid var(--ogrid-selection, #217346)' : null"
@@ -682,7 +686,7 @@ DataGridTableComponent = __decorate([
                                 @if (canEditCell(col, item) && isSelectionEndCell(rowIndex, colIdx)) {
                                   <div
                                     (mousedown)="onFillHandleMouseDown($event)"
-                                    style="position:absolute;bottom:-3px;right:-3px;width:7px;height:7px;background:var(--ogrid-selection, #217346);cursor:crosshair;z-index:2"
+                                    class="ogrid-fill-handle"
                                     aria-label="Fill handle"
                                   ></div>
                                 }
@@ -712,9 +716,9 @@ DataGridTableComponent = __decorate([
               ></ogrid-marching-ants-overlay>
 
               @if (showEmptyInGrid() && emptyState()) {
-                <div style="display:flex;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--ogrid-muted, #999)">
+                <div class="ogrid-empty-container">
                   <div>
-                    <div style="font-weight:600;margin-bottom:8px">No results found</div>
+                    <div class="ogrid-empty-title">No results found</div>
                     <ogrid-empty-state
                       [message]="emptyState()?.message"
                       [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
@@ -740,6 +744,7 @@ DataGridTableComponent = __decorate([
           [hasSelection]="hasCellSelection()"
           [canUndoProp]="canUndo()"
           [canRedoProp]="canRedo()"
+          [classNames]="contextMenuClasses"
           (copy)="handleCopy()"
           (cut)="handleCut()"
           (paste)="handlePaste()"
@@ -763,18 +768,230 @@ DataGridTableComponent = __decorate([
       }
 
       @if (isLoading()) {
-        <div
-          style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.7);z-index:10"
-          aria-live="polite"
-        >
-          <div style="display:flex;align-items:center;gap:8px;color:var(--ogrid-fg, #242424)">
-            <span style="font-size:14px">{{ loadingMessage() }}</span>
+        <div class="ogrid-loading-overlay" aria-live="polite">
+          <div class="ogrid-loading-content">
+            <span class="ogrid-loading-text">{{ loadingMessage() }}</span>
           </div>
         </div>
       }
     </div>
   `,
         styles: [`
+    /* ─── OGrid Theme Variables ─── */
+    :root {
+      --ogrid-bg: #ffffff;
+      --ogrid-fg: rgba(0, 0, 0, 0.87);
+      --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+      --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+      --ogrid-border: rgba(0, 0, 0, 0.12);
+      --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-selected-row-bg: #e6f0fb;
+      --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+      --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+      --ogrid-accent: #0078d4;
+      --ogrid-selection-color: #217346;
+      --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --ogrid-bg: #1e1e1e;
+        --ogrid-fg: rgba(255, 255, 255, 0.87);
+        --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+        --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+        --ogrid-border: rgba(255, 255, 255, 0.12);
+        --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+        --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+        --ogrid-selected-row-bg: #1a3a5c;
+        --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+        --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+        --ogrid-accent: #4da6ff;
+        --ogrid-selection-color: #2ea043;
+        --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+      }
+    }
+    [data-theme="dark"] {
+      --ogrid-bg: #1e1e1e;
+      --ogrid-fg: rgba(255, 255, 255, 0.87);
+      --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+      --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+      --ogrid-border: rgba(255, 255, 255, 0.12);
+      --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+      --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+      --ogrid-selected-row-bg: #1a3a5c;
+      --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+      --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+      --ogrid-accent: #4da6ff;
+      --ogrid-selection-color: #2ea043;
+      --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    }
+    :host { display: block; }
+    .ogrid-root {
+      position: relative;
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .ogrid-scroll-wrapper {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+      position: relative;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-scroll-wrapper--loading-empty { min-height: 200px; }
+    .ogrid-table-wrapper {
+      position: relative;
+    }
+    .ogrid-table {
+      width: var(--data-table-width, 100%);
+      min-width: var(--data-table-min-width, 100%);
+      border-collapse: collapse;
+      table-layout: fixed;
+    }
+    .ogrid-thead {
+      z-index: 3;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      position: sticky;
+      top: 0;
+    }
+    .ogrid-checkbox-header {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      text-align: center;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+    .ogrid-row-number-header {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      text-align: center;
+      font-weight: 600;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+    .ogrid-row-number-spacer {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-column-group-header {
+      text-align: center;
+      font-weight: 600;
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      padding: 6px 10px;
+    }
+    .ogrid-header-cell {
+      background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+      padding: 0;
+      position: relative;
+      user-select: none;
+    }
+    .ogrid-header-content {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+    }
+    .ogrid-resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 4px;
+      cursor: col-resize;
+    }
+    .ogrid-checkbox-cell {
+      width: 48px;
+      min-width: 48px;
+      max-width: 48px;
+      padding: 6px 4px;
+      text-align: center;
+      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+    }
+    .ogrid-row-number-cell {
+      width: 50px;
+      min-width: 50px;
+      max-width: 50px;
+      padding: 6px;
+      text-align: center;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      position: sticky;
+      left: 0;
+      z-index: 3;
+    }
+    .ogrid-data-cell {
+      padding: 0;
+      border-bottom: 1px solid var(--ogrid-border, #f0f0f0);
+      position: relative;
+    }
+    .ogrid-cell-content {
+      padding: 6px 10px;
+      min-height: 20px;
+      cursor: default;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
+    .ogrid-fill-handle {
+      position: absolute;
+      bottom: -3px;
+      right: -3px;
+      width: 7px;
+      height: 7px;
+      background: var(--ogrid-selection, #217346);
+      cursor: crosshair;
+      z-index: 2;
+    }
+    .ogrid-empty-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+      text-align: center;
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+    }
+    .ogrid-empty-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .ogrid-loading-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
+      z-index: 10;
+    }
+    .ogrid-loading-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-loading-text {
+      font-size: 14px;
+    }
     .loading-dimmed {
       opacity: 0.5;
       pointer-events: none;
@@ -830,10 +1047,86 @@ DataGridTableComponent = __decorate([
       outline: 2px solid var(--primary-color, #6366f1);
       outline-offset: 2px;
     }
+
+    /* Context menu */
+    .ogrid-context-menu {
+      position: fixed;
+      z-index: 10000;
+      min-width: 160px;
+      padding: 4px 0;
+      background: var(--ogrid-bg, #fff);
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-radius: 6px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    }
+    .ogrid-context-menu-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      width: 100%;
+      padding: 6px 12px;
+      border: none;
+      background: none;
+      font-size: 13px;
+      text-align: left;
+      cursor: pointer;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-context-menu-item:hover:not(:disabled) {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-context-menu-item:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .ogrid-context-menu-item-label {
+      flex: 1;
+    }
+    .ogrid-context-menu-item-shortcut {
+      color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+      font-size: 0.85em;
+    }
+    .ogrid-context-menu-divider {
+      height: 1px;
+      margin: 4px 0;
+      background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+    }
     ::ng-deep .p-checkbox:focus-visible {
       outline: 2px solid var(--primary-color, #6366f1);
       outline-offset: 2px;
     }
+
+    /* PrimeNG Menu popup overrides — must use !important to win over PrimeNG's CSS-variable-based defaults */
+    .p-menu {
+      background: var(--ogrid-bg, #ffffff) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+      border-radius: 4px !important;
+      padding: 4px 0 !important;
+    }
+    .p-menu-overlay {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+    }
+    .p-menu-item-content {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .p-menu-item-link {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      padding: 6px 12px !important;
+    }
+    .p-menu-item-label {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+      font-size: 0.875rem !important;
+    }
+    .p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .p-menu-separator {
+      border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+      margin: 4px 0 !important;
+    }
   `],
     })
 ], DataGridTableComponent);

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -107,9 +107,10 @@ PopoverCellEditorComponent = __decorate([
       display: flex; align-items: center; justify-content: center;
     }
     .ogrid-popover-editor-content {
-      background: #fff; border-radius: 4px; padding: 16px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       max-width: 90vw; max-height: 90vh; overflow: auto;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

package/dist/esm/ogrid/ogrid.component.js

@@ -18,7 +18,7 @@ let OGridComponent = class OGridComponent {
         this.service = inject(OGridService);
         this.propsSignal = signal(undefined);
         // Stable callback references (avoid re-creating every template eval)
-        this.onColumnSortFn = (columnKey) => this.service.handleSort(columnKey);
+        this.onColumnSortFn = (columnKey, direction) => this.service.handleSort(columnKey, direction);
         this.onColumnResizedFn = (columnId, width) => this.service.handleColumnResized(columnId, width);
         this.onColumnPinnedFn = (columnId, pinned) => this.service.handleColumnPinned(columnId, pinned);
         this.onSelectionChangeFn = (event) => this.service.handleSelectionChange(event);
@@ -60,6 +60,7 @@ OGridComponent = __decorate([
         ],
         changeDetection: ChangeDetectionStrategy.OnPush,
         providers: [OGridService],
+        styles: [`:host { display: block; height: 100%; }`],
         template: `
     <ogrid-layout
       [className]="service.className()"
@@ -114,6 +115,7 @@ OGridComponent = __decorate([
         [getUserByEmail]="service.dataSource()?.getUserByEmail?.bind(service.dataSource())"
         [layoutMode]="service.layoutMode()"
         [suppressHorizontalScroll]="service.suppressHorizontalScroll()"
+        [columnReorder]="service.columnReorder()"
         [aria-label]="service.ariaLabel()"
         [aria-labelledby]="service.ariaLabelledBy()"
         [emptyState]="emptyStateObj"

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

@@ -9,7 +9,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     getRowIdInput: (item: T) => RowId;
     sortBy: string | undefined;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     visibleColumns: Set<string>;
     columnOrder: string[] | undefined;
     onColumnOrderChange: ((order: string[]) => void) | undefined;
@@ -21,6 +21,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     freezeColsInput: number | undefined;
     layoutMode: 'content' | 'fill';
     suppressHorizontalScroll: boolean | undefined;
+    columnReorder: boolean | undefined;
     isLoadingInput: boolean;
     loadingMessageInput: string;
     editable: boolean | undefined;
@@ -68,6 +69,13 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
         statusBarLabel: string;
         statusBarValue: string;
     };
+    readonly contextMenuClasses: {
+        contextMenu: string;
+        contextMenuItem: string;
+        contextMenuItemLabel: string;
+        contextMenuItemShortcut: string;
+        contextMenuDivider: string;
+    };
     private readonly primengColumnSizingOverrides;
     private readonly propsSignal;
     private resizeStartX;

package/dist/types/ogrid/ogrid.component.d.ts

@@ -4,7 +4,7 @@ export declare class OGridComponent<T = unknown> {
     readonly service: OGridService<T>;
     private readonly propsSignal;
     set props(value: IOGridProps<T>);
-    readonly onColumnSortFn: (columnKey: string) => void;
+    readonly onColumnSortFn: (columnKey: string, direction?: "asc" | "desc" | null) => void;
     readonly onColumnResizedFn: (columnId: string, width: number) => void;
     readonly onColumnPinnedFn: (columnId: string, pinned: "left" | "right" | null) => void;
     readonly onSelectionChangeFn: (event: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "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",
@@ -14,7 +14,9 @@
   },
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json",
-    "test": "jest --passWithNoTests"
+    "test": "jest --passWithNoTests",
+    "storybook": "ng run angular-primeng:storybook",
+    "build-storybook": "ng run angular-primeng:build-storybook"
   },
   "keywords": [
     "ogrid",
@@ -35,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.11"
+    "@alaarab/ogrid-angular": "2.0.13"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -49,10 +51,18 @@
     "@angular/platform-browser": "^21.1.4",
     "@angular/platform-browser-dynamic": "^21.1.4",
     "@angular/animations": "^21.1.4",
+    "@angular/router": "^21.1.4",
     "primeng": "^21.1.1",
     "rxjs": "^7.8.2",
     "zone.js": "^0.15.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@angular/cli": "^21.1.4",
+    "@angular/compiler-cli": "^21.1.4",
+    "@angular-devkit/core": "^21.1.4",
+    "@angular-devkit/architect": "^0.2101.4",
+    "@angular-devkit/build-angular": "^21.1.4",
+    "@storybook/angular": "^10.2.8",
+    "storybook": "^10.2.8"
   },
   "sideEffects": false,
   "publishConfig": {