@alaarab/ogrid-angular 2.0.11 → 2.0.13

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

@@ -2,7 +2,7 @@ import { signal, computed, effect } from '@angular/core';
 import { DataGridStateService } from '../services/datagrid-state.service';
 import { ColumnReorderService } from '../services/column-reorder.service';
 import { VirtualScrollService } from '../services/virtual-scroll.service';
-import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-core';
+import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, measureColumnContentWidth, } from '@alaarab/ogrid-core';
 import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, } from '../utils';
 /**
  * Abstract base class containing all shared TypeScript logic for DataGridTable components.
@@ -209,7 +209,7 @@ export class BaseDataGridTableComponent {
                 this.columnReorderService.columns.set(cols);
                 this.columnReorderService.columnOrder.set(p.columnOrder);
                 this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
-                this.columnReorderService.enabled.set(!!p.onColumnOrderChange);
+                this.columnReorderService.enabled.set(p.columnReorder === true);
             }
         });
         // Wire virtual scroll service inputs
@@ -428,16 +428,18 @@ export class BaseDataGridTableComponent {
     // --- Column sorting methods ---
     onSortAsc(columnId) {
         const props = this.getProps();
-        props?.onColumnSort?.(columnId);
+        props?.onColumnSort?.(columnId, 'asc');
     }
     onSortDesc(columnId) {
         const props = this.getProps();
-        props?.onColumnSort?.(columnId);
+        props?.onColumnSort?.(columnId, 'desc');
     }
-    onClearSort() {
-        // Clearing sort is handled by sorting the same column again
-        // The logic in OGridService.handleSort will toggle: asc -> desc -> (clear via callback)
-        // For now, we don't have an explicit clear, so we just don't call anything
+    onClearSort(columnId) {
+        const props = this.getProps();
+        const col = columnId ?? props?.sortBy;
+        if (col) {
+            props?.onColumnSort?.(col, null);
+        }
     }
     getSortState(columnId) {
         const props = this.getProps();
@@ -451,7 +453,7 @@ export class BaseDataGridTableComponent {
         const col = this.visibleCols().find((c) => c.columnId === columnId);
         if (!col)
             return;
-        const width = this.measureColumnContentWidth(columnId);
+        const width = measureColumnContentWidth(columnId, col.minWidth, this.tableContainerEl() ?? undefined);
         this.state().layout.setColumnSizingOverrides({
             ...this.columnSizingOverrides(),
             [columnId]: { widthPx: width },
@@ -459,9 +461,10 @@ export class BaseDataGridTableComponent {
         this.state().layout.onColumnResized?.(columnId, width);
     }
     onAutosizeAllColumns() {
+        const tableEl = this.tableContainerEl() ?? undefined;
         const overrides = {};
         for (const col of this.visibleCols()) {
-            const width = this.measureColumnContentWidth(col.columnId);
+            const width = measureColumnContentWidth(col.columnId, col.minWidth, tableEl);
             overrides[col.columnId] = { widthPx: width };
             this.state().layout.onColumnResized?.(col.columnId, width);
         }
@@ -470,18 +473,4 @@ export class BaseDataGridTableComponent {
             ...overrides,
         });
     }
-    measureColumnContentWidth(columnId) {
-        const tableEl = this.tableContainerEl();
-        if (!tableEl)
-            return DEFAULT_MIN_COLUMN_WIDTH;
-        const cells = Array.from(tableEl.querySelectorAll(`[data-column-id="${columnId}"]`));
-        if (cells.length === 0)
-            return DEFAULT_MIN_COLUMN_WIDTH;
-        let maxWidth = DEFAULT_MIN_COLUMN_WIDTH;
-        for (const cell of cells) {
-            const rect = cell.getBoundingClientRect();
-            maxWidth = Math.max(maxWidth, Math.ceil(rect.width) + CELL_PADDING);
-        }
-        return maxWidth;
-    }
 }

package/dist/esm/components/ogrid-layout.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 } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SideBarComponent } from './sidebar.component';
 import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
@@ -36,32 +36,83 @@ OGridLayoutComponent = __decorate([
     Component({
         selector: 'ogrid-layout',
         standalone: true,
+        encapsulation: ViewEncapsulation.None,
         imports: [CommonModule, SideBarComponent],
         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; height: 100%; }
     .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
     .ogrid-layout-container {
-      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       overflow: hidden; display: flex; flex-direction: column;
-      flex: 1; min-height: 0; background: var(--ogrid-bg, #fff);
+      flex: 1; min-height: 0; background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-layout-toolbar {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
+      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
       gap: 8px; flex-wrap: wrap; min-height: 0;
     }
     .ogrid-layout-toolbar--has-below { border-bottom: none; }
-    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
     .ogrid-layout-toolbar-left { display: flex; align-items: center; gap: 8px; }
     .ogrid-layout-toolbar-right { display: flex; align-items: center; gap: 8px; }
     .ogrid-layout-toolbar-below {
-      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
-      padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
     .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }
-    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
     .ogrid-layout-footer {
-      border-top: 1px solid var(--ogrid-border, #e0e0e0);
-      background: var(--ogrid-header-bg, #f5f5f5); padding: 6px 12px;
+      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); padding: 6px 12px;
     }
   `],
         template: `
@@ -90,24 +141,18 @@ OGridLayoutComponent = __decorate([
           </div>
         }
 
-        <!-- Grid area -->
-        @if (sideBar) {
-          <div class="ogrid-layout-grid-area">
-            @if (sideBar?.position === 'left') {
-              <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
-            }
-            <div class="ogrid-layout-grid-content">
-              <ng-content></ng-content>
-            </div>
-            @if (sideBar?.position !== 'left') {
-              <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
-            }
-          </div>
-        } @else {
+        <!-- Grid area (single ng-content to avoid Angular content projection issues) -->
+        <div class="ogrid-layout-grid-area">
+          @if (sideBar && sideBar.position === 'left') {
+            <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
+          }
           <div class="ogrid-layout-grid-content">
             <ng-content></ng-content>
           </div>
-        }
+          @if (sideBar && sideBar.position !== 'left') {
+            <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
+          }
+        </div>
 
         <!-- Footer strip (pagination) -->
         @if (hasPagination) {

package/dist/esm/components/sidebar.component.js

@@ -106,56 +106,56 @@ SideBarComponent = __decorate([
     .ogrid-sidebar-tab-strip {
       display: flex; flex-direction: column;
       width: var(--ogrid-sidebar-tab-size, 36px);
-      background: var(--ogrid-header-bg, #f5f5f5);
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
-    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, #e0e0e0); }
-    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
     .ogrid-sidebar-tab {
       width: var(--ogrid-sidebar-tab-size, 36px);
       height: var(--ogrid-sidebar-tab-size, 36px);
       border: none; cursor: pointer;
-      color: var(--ogrid-fg, #242424); font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); font-size: 14px;
       display: flex; align-items: center; justify-content: center;
       background: transparent; font-weight: normal;
     }
-    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #fff); font-weight: bold; }
+    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #ffffff); font-weight: bold; }
     .ogrid-sidebar-panel {
       width: var(--ogrid-sidebar-panel-width, 240px);
       display: flex; flex-direction: column; overflow: hidden;
-      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, #e0e0e0); }
-    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
     .ogrid-sidebar-panel-header {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, #e0e0e0); font-weight: 600;
+      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); font-weight: 600;
     }
     .ogrid-sidebar-panel-close {
       border: none; background: transparent; cursor: pointer;
-      font-size: 16px; color: var(--ogrid-fg, #242424);
+      font-size: 16px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-sidebar-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
     .ogrid-sidebar-actions { display: flex; gap: 8px; margin-bottom: 8px; }
     .ogrid-sidebar-action-btn {
       flex: 1; cursor: pointer;
-      background: var(--ogrid-bg-subtle, #f3f2f1); color: var(--ogrid-fg, #242424);
-      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px; padding: 4px 8px;
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px; padding: 4px 8px;
     }
     .ogrid-sidebar-col-label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
-    .ogrid-sidebar-empty { color: var(--ogrid-muted, #999); font-style: italic; }
+    .ogrid-sidebar-empty { color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5)); font-style: italic; }
     .ogrid-sidebar-filter-group { margin-bottom: 12px; }
     .ogrid-sidebar-filter-label { font-weight: 500; margin-bottom: 4px; font-size: 13px; }
     .ogrid-sidebar-text-input {
       width: 100%; box-sizing: border-box; padding: 4px 6px;
-      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
-      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
     }
     .ogrid-sidebar-date-row { display: flex; flex-direction: column; gap: 4px; }
     .ogrid-sidebar-date-label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
     .ogrid-sidebar-date-input {
       flex: 1; padding: 2px 4px;
-      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
-      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
     }
     .ogrid-sidebar-multiselect-list { max-height: 120px; overflow-y: auto; }
     .ogrid-sidebar-multiselect-item {
@@ -220,7 +220,7 @@ SideBarComponent = __decorate([
               </div>
               @for (col of sideBarProps?.columns ?? []; track col.columnId) {
                 <label class="ogrid-sidebar-col-label">
-                  <input type="checkbox" [checked]="sideBarProps?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, ($event.target as HTMLInputElement).checked)" [disabled]="col.required" />
+                  <input type="checkbox" [checked]="sideBarProps?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
                   <span>{{ col.name }}</span>
                 </label>
               }
@@ -237,7 +237,7 @@ SideBarComponent = __decorate([
                       type="text"
                       class="ogrid-sidebar-text-input"
                       [value]="getTextFilterValue(col.filterField)"
-                      (input)="onTextFilterChange(col.filterField, ($event.target as HTMLInputElement).value)"
+                      (input)="onTextFilterChange(col.filterField, $any($event.target).value)"
                       [placeholder]="'Filter ' + col.name + '...'"
                       [attr.aria-label]="'Filter ' + col.name"
                     />
@@ -246,11 +246,11 @@ SideBarComponent = __decorate([
                     <div class="ogrid-sidebar-date-row">
                       <label class="ogrid-sidebar-date-label">
                         From:
-                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, ($event.target as HTMLInputElement).value)" [attr.aria-label]="col.name + ' from date'" />
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" />
                       </label>
                       <label class="ogrid-sidebar-date-label">
                         To:
-                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, ($event.target as HTMLInputElement).value)" [attr.aria-label]="col.name + ' to date'" />
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" />
                       </label>
                     </div>
                   }
@@ -258,7 +258,7 @@ SideBarComponent = __decorate([
                     <div class="ogrid-sidebar-multiselect-list" role="group" [attr.aria-label]="col.name + ' options'">
                       @for (opt of getFilterOptions(col.filterField); track opt) {
                         <label class="ogrid-sidebar-multiselect-item">
-                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, ($event.target as HTMLInputElement).checked)" />
+                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, $any($event.target).checked)" />
                           <span>{{ opt }}</span>
                         </label>
                       }

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

@@ -1081,7 +1081,7 @@ let DataGridStateService = class DataGridStateService {
             headerFilterInput: {
                 sortBy: p?.sortBy,
                 sortDirection: p?.sortDirection ?? 'asc',
-                onColumnSort: (columnKey) => p?.onColumnSort(columnKey),
+                onColumnSort: (columnKey, direction) => p?.onColumnSort(columnKey, direction),
                 filters: p?.filters ?? {},
                 onFilterChange: (key, value) => p?.onFilterChange(key, value),
                 filterOptions: p?.filterOptions ?? {},

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Injectable, signal, computed, effect, DestroyRef, inject } from '@angular/core';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, } from '@alaarab/ogrid-core';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '@alaarab/ogrid-core';
 const DEFAULT_PAGE_SIZE = 25;
 const EMPTY_LOADING_OPTIONS = {};
 const DEFAULT_PANELS = ['columns', 'filters'];
@@ -67,6 +67,7 @@ let OGridService = class OGridService {
         this.onFirstDataRendered = signal(undefined);
         this.onError = signal(undefined);
         this.columnChooserProp = signal(undefined);
+        this.columnReorder = signal(undefined);
         this.virtualScroll = signal(undefined);
         this.ariaLabel = signal(undefined);
         this.ariaLabelledBy = signal(undefined);
@@ -215,7 +216,7 @@ let OGridService = class OGridService {
             getRowId: this.getRowId(),
             sortBy: this.sort().field,
             sortDirection: this.sort().direction,
-            onColumnSort: (columnKey) => this.handleSort(columnKey),
+            onColumnSort: (columnKey, direction) => this.handleSort(columnKey, direction),
             visibleColumns: this.visibleColumns(),
             columnOrder: this.columnOrder(),
             onColumnOrderChange: this.onColumnOrderChange(),
@@ -246,6 +247,7 @@ let OGridService = class OGridService {
             getUserByEmail: this.dataSource()?.getUserByEmail?.bind(this.dataSource()),
             layoutMode: this.layoutMode(),
             suppressHorizontalScroll: this.suppressHorizontalScroll(),
+            columnReorder: this.columnReorder(),
             virtualScroll: this.virtualScroll(),
             'aria-label': this.ariaLabel(),
             'aria-labelledby': this.ariaLabelledBy(),
@@ -401,22 +403,8 @@ let OGridService = class OGridService {
             this.internalVisibleColumnsOverride.set(cols);
         this.onVisibleColumnsChange()?.(cols);
     }
-    handleSort(columnKey) {
-        const sort = this.sort();
-        if (sort.field === columnKey) {
-            // Cycle: asc → desc → clear
-            if (sort.direction === 'asc') {
-                this.setSort({ field: columnKey, direction: 'desc' });
-            }
-            else {
-                // Clear sort (empty field means no column is sorted)
-                this.setSort({ field: '', direction: 'asc' });
-            }
-        }
-        else {
-            // Start new sort
-            this.setSort({ field: columnKey, direction: 'asc' });
-        }
+    handleSort(columnKey, direction) {
+        this.setSort(computeNextSortState(this.sort(), columnKey, direction));
     }
     handleFilterChange(key, value) {
         this.setFilters(mergeFilter(this.filters(), key, value));
@@ -531,6 +519,8 @@ let OGridService = class OGridService {
             this.onError.set(props.onError);
         if (props.columnChooser !== undefined)
             this.columnChooserProp.set(props.columnChooser);
+        if (props.columnReorder !== undefined)
+            this.columnReorder.set(props.columnReorder);
         if (props.virtualScroll !== undefined)
             this.virtualScroll.set(props.virtualScroll);
         if (props.entityLabelPlural !== undefined)

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

@@ -87,7 +87,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly headerFilterInput: import("@angular/core").Signal<{
         sortBy?: string;
         sortDirection: "asc" | "desc";
-        onColumnSort: (columnKey: string) => void;
+        onColumnSort: (columnKey: string, direction?: "asc" | "desc" | null) => void;
         filters: import("@alaarab/ogrid-core").IFilters;
         onFilterChange: (key: string, value: import("@alaarab/ogrid-core").FilterValue | undefined) => void;
         filterOptions: Record<string, string[]>;
@@ -187,9 +187,8 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     };
     onSortAsc(columnId: string): void;
     onSortDesc(columnId: string): void;
-    onClearSort(): void;
+    onClearSort(columnId?: string): void;
     getSortState(columnId: string): 'asc' | 'desc' | null;
     onAutosizeColumn(columnId: string): void;
     onAutosizeAllColumns(): void;
-    private measureColumnContentWidth;
 }

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

@@ -88,7 +88,7 @@ export interface DataGridViewModelState<T> {
     headerFilterInput: {
         sortBy?: string;
         sortDirection: 'asc' | 'desc';
-        onColumnSort: (columnKey: string) => void;
+        onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
         filters: IFilters;
         onFilterChange: (key: string, value: FilterValue | undefined) => void;
         filterOptions: Record<string, string[]>;

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

@@ -101,6 +101,7 @@ export declare class OGridService<T> {
     readonly onFirstDataRendered: import("@angular/core").WritableSignal<(() => void) | undefined>;
     readonly onError: import("@angular/core").WritableSignal<((error: unknown) => void) | undefined>;
     readonly columnChooserProp: import("@angular/core").WritableSignal<boolean | "toolbar" | "sidebar" | undefined>;
+    readonly columnReorder: import("@angular/core").WritableSignal<boolean | undefined>;
     readonly virtualScroll: import("@angular/core").WritableSignal<IVirtualScrollConfig | undefined>;
     readonly ariaLabel: import("@angular/core").WritableSignal<string | undefined>;
     readonly ariaLabelledBy: import("@angular/core").WritableSignal<string | undefined>;
@@ -179,7 +180,7 @@ export declare class OGridService<T> {
     }): void;
     setFilters(f: IFilters): void;
     setVisibleColumns(cols: Set<string>): void;
-    handleSort(columnKey: string): void;
+    handleSort(columnKey: string, direction?: 'asc' | 'desc' | null): void;
     handleFilterChange(key: string, value: FilterValue | undefined): void;
     handleVisibilityChange(columnKey: string, isVisible: boolean): void;
     handleSelectionChange(event: IRowSelectionChangeEvent<T>): void;

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

@@ -57,6 +57,7 @@ interface IOGridBaseProps<T> {
     layoutMode?: 'content' | 'fill';
     suppressHorizontalScroll?: boolean;
     sideBar?: boolean | ISideBarDef;
+    columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
     pageSizeOptions?: number[];
     onFirstDataRendered?: () => void;
@@ -85,7 +86,7 @@ export interface IOGridDataGridProps<T> {
     getRowId: (item: T) => RowId;
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     visibleColumns: Set<string>;
     columnOrder?: string[];
     onColumnOrderChange?: (order: string[]) => void;
@@ -120,6 +121,7 @@ export interface IOGridDataGridProps<T> {
     loadingFilterOptions: Record<string, boolean>;
     peopleSearch?: (query: string) => Promise<UserLike[]>;
     getUserByEmail?: (email: string) => Promise<UserLike | undefined>;
+    columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
     emptyState?: {
         onClearAll: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.11"
+    "@alaarab/ogrid-core": "2.0.13"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",