@alaarab/ogrid-angular 2.1.15 → 2.2.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, getScrollTopForRow, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
+import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, processClientSideDataAsync, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, computeVisibleColumnRange, getScrollTopForRow, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, partitionColumnsForVirtualization, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
 export { CELL_PADDING, CHECKBOX_COLUMN_WIDTH, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, Z_INDEX, debounce, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
 import { Injectable, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, inject, DestroyRef, signal, computed, effect, NgZone, EventEmitter, Injector, EnvironmentInjector, createComponent } from '@angular/core';
@@ -75,6 +75,7 @@ var OGridService = class {
     this.virtualScroll = signal(void 0);
     this.ariaLabel = signal(void 0);
     this.ariaLabelledBy = signal(void 0);
+    this.workerSort = signal(false);
     // --- Internal state signals ---
     this.internalData = signal([]);
     this.internalLoading = signal(false);
@@ -94,6 +95,9 @@ var OGridService = class {
     this.filterAbortController = null;
     this.refreshCounter = signal(0);
     this.firstDataRendered = signal(false);
+    // Worker sort async state
+    this.asyncClientItems = signal(null);
+    this.workerSortAbortId = 0;
     // Side bar state
     this.sideBarActivePanel = signal(null);
     // Filter options state
@@ -134,8 +138,9 @@ var OGridService = class {
       if (this.hasServerFilterOptions()) return this.serverFilterOptions();
       return deriveFilterOptionsFromData(this.displayData(), this.columns());
     });
+    /** Sync path: used when workerSort is off. */
     this.clientItemsAndTotal = computed(() => {
-      if (!this.isClientSide()) return null;
+      if (!this.isClientSide() || this.workerSort()) return null;
       const rows = processClientSideData(
         this.displayData(),
         this.columns(),
@@ -148,12 +153,18 @@ var OGridService = class {
       const paged = rows.slice(start, start + this.pageSize());
       return { items: paged, totalCount: total };
     });
+    /** Resolved client items — sync or async depending on workerSort. */
+    this.resolvedClientItems = computed(() => {
+      const syncResult = this.clientItemsAndTotal();
+      if (syncResult) return syncResult;
+      return this.asyncClientItems();
+    });
     this.displayItems = computed(() => {
-      const cit = this.clientItemsAndTotal();
+      const cit = this.resolvedClientItems();
       return this.isClientSide() && cit ? cit.items : this.serverItems();
     });
     this.displayTotalCount = computed(() => {
-      const cit = this.clientItemsAndTotal();
+      const cit = this.resolvedClientItems();
       return this.isClientSide() && cit ? cit.totalCount : this.serverTotalCount();
     });
     this.hasActiveFilters = computed(() => {
@@ -323,6 +334,34 @@ var OGridService = class {
         validateColumns(cols);
       }
     });
+    effect((onCleanup) => {
+      if (!this.isClientSide() || !this.workerSort()) return;
+      const data = this.displayData();
+      const cols = this.columns();
+      const filters = this.filters();
+      const sortField = this.sort().field;
+      const sortDir = this.sort().direction;
+      const page = this.page();
+      const ps = this.pageSize();
+      const abortId = ++this.workerSortAbortId;
+      processClientSideDataAsync(data, cols, filters, sortField, sortDir).then((rows) => {
+        if (abortId !== this.workerSortAbortId) return;
+        const total = rows.length;
+        const start = (page - 1) * ps;
+        const paged = rows.slice(start, start + ps);
+        this.asyncClientItems.set({ items: paged, totalCount: total });
+      }).catch(() => {
+        if (abortId !== this.workerSortAbortId) return;
+        const rows = processClientSideData(data, cols, filters, sortField, sortDir);
+        const total = rows.length;
+        const start = (page - 1) * ps;
+        const paged = rows.slice(start, start + ps);
+        this.asyncClientItems.set({ items: paged, totalCount: total });
+      });
+      onCleanup(() => {
+        this.workerSortAbortId++;
+      });
+    });
     effect((onCleanup) => {
       const ds = this.dataSource();
       if (!this.isServerSide() || !ds) {
@@ -486,6 +525,13 @@ var OGridService = class {
   // --- Configure from props ---
   configure(props) {
     this.columnsProp.set(props.columns);
+    if (Object.keys(this.pinnedOverrides()).length === 0) {
+      const initial = {};
+      for (const col of flattenColumns(props.columns)) {
+        if (col.pinned) initial[col.columnId] = col.pinned;
+      }
+      if (Object.keys(initial).length > 0) this.pinnedOverrides.set(initial);
+    }
     this.getRowId.set(props.getRowId);
     if ("data" in props && props.data !== void 0) this.data.set(props.data);
     if ("dataSource" in props && props.dataSource !== void 0) this.dataSource.set(props.dataSource);
@@ -528,6 +574,7 @@ var OGridService = class {
     if (props.columnChooser !== void 0) this.columnChooserProp.set(props.columnChooser);
     if (props.columnReorder !== void 0) this.columnReorder.set(props.columnReorder);
     if (props.virtualScroll !== void 0) this.virtualScroll.set(props.virtualScroll);
+    if (props.workerSort !== void 0) this.workerSort.set(props.workerSort);
     if (props.entityLabelPlural !== void 0) this.entityLabelPlural.set(props.entityLabelPlural);
     if (props.className !== void 0) this.className.set(props.className);
     if (props.layoutMode !== void 0) this.layoutMode.set(props.layoutMode);
@@ -2229,6 +2276,10 @@ var VirtualScrollService = class {
     this.containerHeight = signal(0);
     // --- Internal state ---
     this.scrollTop = signal(0);
+    this.scrollLeft = signal(0);
+    // --- Column virtualization inputs ---
+    this.columnWidths = signal([]);
+    this.containerWidth = signal(0);
     // Scrollable container reference for programmatic scrolling
     this.containerEl = null;
     // --- Derived computed signals ---
@@ -2258,6 +2309,21 @@ var VirtualScrollService = class {
     });
     /** Total scrollable height in pixels. */
     this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()));
+    // --- Column virtualization ---
+    this.columnsEnabled = computed(() => this.config().columns === true);
+    this.columnOverscan = computed(() => this.config().columnOverscan ?? 2);
+    /** The visible column range with spacer widths, or null when column virtualization is off. */
+    this.columnRange = computed(() => {
+      if (!this.columnsEnabled()) return null;
+      const widths = this.columnWidths();
+      if (widths.length === 0) return null;
+      return computeVisibleColumnRange(
+        this.scrollLeft(),
+        widths,
+        this.containerWidth(),
+        this.columnOverscan()
+      );
+    });
     this.destroyRef.onDestroy(() => {
       this.containerEl = null;
     });
@@ -2271,10 +2337,12 @@ var VirtualScrollService = class {
   }
   /**
    * Call this from the container's scroll event handler.
+   * Tracks both vertical and horizontal scroll positions.
    */
   onScroll(event) {
     const target = event.target;
     this.scrollTop.set(target.scrollTop);
+    this.scrollLeft.set(target.scrollLeft);
   }
   /**
    * Scroll to a specific row index.
@@ -3404,6 +3472,53 @@ var BaseDataGridTableComponent = class {
       if (!this.vsEnabled()) return 0;
       return this.vsVisibleRange().startIndex;
     });
+    // Column virtualization
+    this.vsColumnsEnabled = computed(() => this.virtualScrollService.columnsEnabled());
+    this.vsColumnRange = computed(() => this.virtualScrollService.columnRange());
+    /** Partitioned columns for column virtualization: pinned-left, virtualized-unpinned, pinned-right, with spacer widths. */
+    this.vsColumnPartition = computed(() => {
+      if (!this.vsColumnsEnabled()) return null;
+      const cols = this.visibleCols();
+      const range = this.vsColumnRange();
+      const props = this.getProps();
+      const pinnedCols = props?.pinnedColumns;
+      return partitionColumnsForVirtualization(cols, range, pinnedCols);
+    });
+    /** Column layouts filtered by column virtualization range (or all if column virt is off). */
+    this.vsColumnLayouts = computed(() => {
+      const allLayouts = this.columnLayouts();
+      const partition = this.vsColumnPartition();
+      if (!partition) return allLayouts;
+      const visibleIds = /* @__PURE__ */ new Set();
+      for (const col of partition.pinnedLeft) visibleIds.add(col.columnId);
+      for (const col of partition.virtualizedUnpinned) visibleIds.add(col.columnId);
+      for (const col of partition.pinnedRight) visibleIds.add(col.columnId);
+      return allLayouts.filter((layout) => visibleIds.has(layout.col.columnId));
+    });
+    /** Visible columns filtered by column virtualization range (or all if column virt is off). */
+    this.vsVisibleCols = computed(() => {
+      const allCols = this.visibleCols();
+      const partition = this.vsColumnPartition();
+      if (!partition) return allCols;
+      const visibleIds = /* @__PURE__ */ new Set();
+      for (const col of partition.pinnedLeft) visibleIds.add(col.columnId);
+      for (const col of partition.virtualizedUnpinned) visibleIds.add(col.columnId);
+      for (const col of partition.pinnedRight) visibleIds.add(col.columnId);
+      return allCols.filter((col) => visibleIds.has(col.columnId));
+    });
+    /** Left spacer width for column virtualization (in pixels). */
+    this.vsLeftSpacerWidth = computed(() => this.vsColumnPartition()?.leftSpacerWidth ?? 0);
+    /** Right spacer width for column virtualization (in pixels). */
+    this.vsRightSpacerWidth = computed(() => this.vsColumnPartition()?.rightSpacerWidth ?? 0);
+    /** Map from columnId to its global index in visibleCols. Used to maintain correct colIdx for cell descriptors during column virtualization. */
+    this.globalColIndexMap = computed(() => {
+      const cols = this.visibleCols();
+      const map = /* @__PURE__ */ new Map();
+      for (let i = 0; i < cols.length; i++) {
+        map.set(cols[i].columnId, i);
+      }
+      return map;
+    });
     // Popover editing
     this.popoverAnchorEl = computed(() => this.editingState().popoverAnchorEl);
     this.pendingEditorValueForPopover = computed(() => this.editingState().pendingEditorValue);
@@ -3527,6 +3642,10 @@ var BaseDataGridTableComponent = class {
       this.measuredColumnWidths.set(measured);
     }
   }
+  /** Get global column index for a column (correct even during column virtualization). */
+  getGlobalColIndex(col) {
+    return this.globalColIndexMap().get(col.columnId) ?? 0;
+  }
   /**
    * Initialize base wiring effects. Must be called from subclass constructor.
    *
@@ -3577,16 +3696,26 @@ var BaseDataGridTableComponent = class {
           this.virtualScrollService.updateConfig({
             enabled: p.virtualScroll.enabled,
             rowHeight: p.virtualScroll.rowHeight,
-            overscan: p.virtualScroll.overscan
+            overscan: p.virtualScroll.overscan,
+            columns: p.virtualScroll.columns,
+            columnOverscan: p.virtualScroll.columnOverscan
           });
         }
       }
     });
+    effect(() => {
+      const layouts = this.columnLayouts();
+      const props = this.getProps();
+      const pinnedCols = props?.pinnedColumns ?? {};
+      const unpinnedWidths = layouts.filter((l) => !l.pinnedLeft && !l.pinnedRight && !pinnedCols[l.col.columnId]).map((l) => l.width);
+      this.virtualScrollService.columnWidths.set(unpinnedWidths);
+    });
     effect(() => {
       const el = this.wrapperElSignal();
       if (el) {
         this.virtualScrollService.setContainer(el);
         this.virtualScrollService.containerHeight.set(el.clientHeight);
+        this.virtualScrollService.containerWidth.set(el.clientWidth);
       }
     });
   }

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

@@ -134,6 +134,34 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly vsBottomSpacerHeight: import("@angular/core").Signal<number>;
     readonly vsVisibleItems: import("@angular/core").Signal<T[]>;
     readonly vsStartIndex: import("@angular/core").Signal<number>;
+    readonly vsColumnsEnabled: import("@angular/core").Signal<boolean>;
+    readonly vsColumnRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").IVisibleColumnRange | null>;
+    /** Partitioned columns for column virtualization: pinned-left, virtualized-unpinned, pinned-right, with spacer widths. */
+    readonly vsColumnPartition: import("@angular/core").Signal<{
+        pinnedLeft: import("@alaarab/ogrid-core").IColumnDef<T>[];
+        virtualizedUnpinned: import("@alaarab/ogrid-core").IColumnDef<T>[];
+        pinnedRight: import("@alaarab/ogrid-core").IColumnDef<T>[];
+        leftSpacerWidth: number;
+        rightSpacerWidth: number;
+    } | null>;
+    /** Column layouts filtered by column virtualization range (or all if column virt is off). */
+    readonly vsColumnLayouts: import("@angular/core").Signal<{
+        col: IColumnDef<T>;
+        pinnedLeft: boolean;
+        pinnedRight: boolean;
+        minWidth: number;
+        width: number;
+    }[]>;
+    /** Visible columns filtered by column virtualization range (or all if column virt is off). */
+    readonly vsVisibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
+    /** Left spacer width for column virtualization (in pixels). */
+    readonly vsLeftSpacerWidth: import("@angular/core").Signal<number>;
+    /** Right spacer width for column virtualization (in pixels). */
+    readonly vsRightSpacerWidth: import("@angular/core").Signal<number>;
+    /** Map from columnId to its global index in visibleCols. Used to maintain correct colIdx for cell descriptors during column virtualization. */
+    readonly globalColIndexMap: import("@angular/core").Signal<Map<string, number>>;
+    /** Get global column index for a column (correct even during column virtualization). */
+    getGlobalColIndex(col: IColumnDef<T>): number;
     readonly popoverAnchorEl: import("@angular/core").Signal<HTMLElement | null>;
     readonly pendingEditorValueForPopover: import("@angular/core").Signal<unknown>;
     readonly allowOverflowX: import("@angular/core").Signal<boolean>;

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

@@ -108,6 +108,7 @@ export declare class OGridService<T> {
     readonly virtualScroll: import("@angular/core").WritableSignal<IVirtualScrollConfig | undefined>;
     readonly ariaLabel: import("@angular/core").WritableSignal<string | undefined>;
     readonly ariaLabelledBy: import("@angular/core").WritableSignal<string | undefined>;
+    readonly workerSort: import("@angular/core").WritableSignal<boolean>;
     private readonly internalData;
     private readonly internalLoading;
     private readonly internalPage;
@@ -125,6 +126,8 @@ export declare class OGridService<T> {
     private filterAbortController;
     private readonly refreshCounter;
     private readonly firstDataRendered;
+    private readonly asyncClientItems;
+    private workerSortAbortId;
     private readonly sideBarActivePanel;
     private readonly serverFilterOptions;
     private readonly loadingFilterOptions;
@@ -147,10 +150,16 @@ export declare class OGridService<T> {
     readonly multiSelectFilterFields: import("@angular/core").Signal<string[]>;
     readonly hasServerFilterOptions: import("@angular/core").Signal<boolean>;
     readonly clientFilterOptions: import("@angular/core").Signal<Record<string, string[]>>;
+    /** Sync path: used when workerSort is off. */
     readonly clientItemsAndTotal: import("@angular/core").Signal<{
         items: T[];
         totalCount: number;
     } | null>;
+    /** Resolved client items — sync or async depending on workerSort. */
+    readonly resolvedClientItems: import("@angular/core").Signal<{
+        items: T[];
+        totalCount: number;
+    } | null>;
     readonly displayItems: import("@angular/core").Signal<T[]>;
     readonly displayTotalCount: import("@angular/core").Signal<number>;
     readonly hasActiveFilters: import("@angular/core").Signal<boolean>;

package/dist/types/services/virtual-scroll.service.d.ts

@@ -1,4 +1,4 @@
-import type { IVisibleRange, IVirtualScrollConfig } from '@alaarab/ogrid-core';
+import type { IVisibleRange, IVisibleColumnRange, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 /**
  * Manages virtual scrolling state using Angular signals.
  * Port of React's useVirtualScroll hook.
@@ -13,6 +13,9 @@ export declare class VirtualScrollService {
     readonly config: import("@angular/core").WritableSignal<IVirtualScrollConfig>;
     readonly containerHeight: import("@angular/core").WritableSignal<number>;
     readonly scrollTop: import("@angular/core").WritableSignal<number>;
+    readonly scrollLeft: import("@angular/core").WritableSignal<number>;
+    readonly columnWidths: import("@angular/core").WritableSignal<number[]>;
+    readonly containerWidth: import("@angular/core").WritableSignal<number>;
     private containerEl;
     readonly rowHeight: import("@angular/core").Signal<number>;
     readonly overscan: import("@angular/core").Signal<number>;
@@ -24,6 +27,10 @@ export declare class VirtualScrollService {
     readonly visibleRange: import("@angular/core").Signal<IVisibleRange>;
     /** Total scrollable height in pixels. */
     readonly totalHeight: import("@angular/core").Signal<number>;
+    readonly columnsEnabled: import("@angular/core").Signal<boolean>;
+    readonly columnOverscan: import("@angular/core").Signal<number>;
+    /** The visible column range with spacer widths, or null when column virtualization is off. */
+    readonly columnRange: import("@angular/core").Signal<IVisibleColumnRange | null>;
     constructor();
     /**
      * Set the scrollable container element.
@@ -32,6 +39,7 @@ export declare class VirtualScrollService {
     setContainer(el: HTMLElement | null): void;
     /**
      * Call this from the container's scroll event handler.
+     * Tracks both vertical and horizontal scroll positions.
      */
     onScroll(event: Event): void;
     /**

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

@@ -63,6 +63,8 @@ interface IOGridBaseProps<T> {
     sideBar?: boolean | ISideBarDef;
     columnReorder?: boolean;
     virtualScroll?: IVirtualScrollConfig;
+    /** Offload sort/filter to a Web Worker for large datasets. Falls back to sync when sort column has a custom compare. */
+    workerSort?: boolean;
     /** Fixed row height in pixels. Overrides default row height (36px). */
     rowHeight?: number;
     pageSizeOptions?: number[];

package/package.json

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