@gp-grid/angular 0.12.2 → 0.13.1

package/README.md

@@ -73,6 +73,61 @@ Import the stylesheet once (e.g. in `styles.css` or `angular.json`):
 
 For custom cell, edit, and header renderers, pass `ng-template` references via the column `cellRenderer` / `editRenderer` / `headerRenderer` fields — see the [Angular docs](https://www.gp-grid.io/docs/angular) for the full API.
 
+## Dependency injection
+
+For components that want lifecycle-managed cleanup or testable seams, use `provideGridData` and `injectGridData`. They wire the same mutable data source through Angular's DI, mirroring `useGridData` in `@gp-grid/react` and `@gp-grid/vue`. The service implements `OnDestroy` and clears the data source automatically when the component is destroyed.
+
+```ts
+import { Component } from "@angular/core";
+import {
+  GpGridComponent,
+  provideGridData,
+  injectGridData,
+} from "@gp-grid/angular";
+import type { AngularColumnDefinition } from "@gp-grid/angular";
+
+interface Person {
+  id: number;
+  name: string;
+  age: number;
+}
+
+const initialRows: Person[] = [
+  { id: 1, name: "Alice", age: 30 },
+  { id: 2, name: "Bob", age: 25 },
+];
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [GpGridComponent],
+  providers: [
+    provideGridData<Person>({
+      getRowId: (row) => row.id,
+      initialData: initialRows,
+    }),
+  ],
+  template: `
+    <gp-grid
+      [columns]="columns"
+      [dataSource]="grid.dataSource"
+      [rowHeight]="36" />
+    <button (click)="grid.addRows([{ id: 3, name: 'Carol', age: 28 }])">Add</button>
+  `,
+})
+export class App {
+  protected readonly grid = injectGridData<Person>();
+
+  protected readonly columns: AngularColumnDefinition[] = [
+    { field: "id", cellDataType: "number", headerName: "ID", width: 80 },
+    { field: "name", cellDataType: "text", headerName: "Name", width: 200 },
+    { field: "age", cellDataType: "number", headerName: "Age", width: 100 },
+  ];
+}
+```
+
+`provideGridData` returns a standard Angular `Provider[]`, so it composes with other `provide*` functions in the component's `providers` array. Register it on the consuming component (not on a parent injector) so each component instance gets its own data source.
+
 ## License
 
 Apache-2.0 — see [LICENSE](./LICENSE).

package/fesm2022/gp-grid-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, output, computed, TemplateRef, ChangeDetectionStrategy, Component, ViewChild, signal, effect, HostListener, inject, PLATFORM_ID } from '@angular/core';
+import { input, output, computed, TemplateRef, ChangeDetectionStrategy, Component, ViewChild, signal, effect, HostListener, inject, PLATFORM_ID, InjectionToken, Injectable } from '@angular/core';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { isCellSelected, isCellActive, getFieldValue, formatCellValue, isCellInFillPreview, buildCellClasses, isCellEditing, calculateFilterPopupPosition, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
+import { getFieldValue, isCellSelected, isCellActive, formatCellValue, isCellInFillPreview, buildCellClasses, isCellEditing, calculateFilterPopupPosition, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
 export { GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
 
 const TEMPLATE$1 = `
@@ -302,8 +302,12 @@ class GridBodyComponent {
         this.scrolled.emit(el.scrollLeft);
     }
     cellParams(rowData, column, rowIndex, colIndex) {
+        const rawValue = getFieldValue(rowData, column.field);
+        const displayValue = column.valueFormatter
+            ? column.valueFormatter(rawValue)
+            : rawValue;
         return {
-            value: getFieldValue(rowData, column.field),
+            value: displayValue,
             rowData,
             column,
             rowIndex,
@@ -339,8 +343,12 @@ class GridBodyComponent {
     }
     editParams(rowData, column, rowIndex, colIndex) {
         const ec = this.editingCell();
+        const rawValue = getFieldValue(rowData, column.field);
+        const displayValue = column.valueFormatter
+            ? column.valueFormatter(rawValue)
+            : rawValue;
         return {
-            value: getFieldValue(rowData, column.field),
+            value: displayValue,
             rowData,
             column,
             rowIndex,
@@ -656,10 +664,12 @@ const computeUniqueValues = (distinctValues, formatter) => {
     for (const val of distinctValues) {
         if (val === null || val === undefined || val === '')
             continue;
-        const key = String(val);
+        // Key by formatter output when available so filter-time comparison
+        // (which also goes through the formatter) matches what the user selects.
+        const key = formatter ? formatter(val) : String(val);
         if (!seen.has(key)) {
             seen.add(key);
-            result.push({ key, label: formatter ? formatter(val) : key });
+            result.push({ key, label: key });
         }
     }
     return result.sort((a, b) => a.label.localeCompare(b.label, undefined, { numeric: true, sensitivity: 'base' }));
@@ -1625,9 +1635,102 @@ const createGridData = (initialData, options) => {
     };
 };
 
+/**
+ * Injection token holding the options passed to {@link provideGridData}.
+ * Read internally by {@link GridDataService}; consumers should not depend on it directly.
+ */
+const GRID_DATA_OPTIONS = new InjectionToken("GRID_DATA_OPTIONS");
+/**
+ * Angular service mirroring the React `useGridData` hook and the Vue
+ * `useGridData` composable. Wraps `createMutableClientDataSource` with
+ * automatic cleanup on component destroy.
+ *
+ * Provided per-component via {@link provideGridData}; injected via
+ * {@link injectGridData} (or `inject(GridDataService)` with a manual cast).
+ */
+class GridDataService {
+    dataSource;
+    constructor() {
+        const options = inject(GRID_DATA_OPTIONS);
+        this.dataSource = createMutableClientDataSource(options.initialData, {
+            getRowId: options.getRowId,
+            debounceMs: options.debounceMs,
+            useWorker: options.useWorker,
+            parallelSort: options.parallelSort,
+        });
+    }
+    updateRow(id, data) {
+        this.dataSource.updateRow(id, data);
+    }
+    addRows(rows) {
+        this.dataSource.addRows(rows);
+    }
+    removeRows(ids) {
+        this.dataSource.removeRows(ids);
+    }
+    updateCell(id, field, value) {
+        this.dataSource.updateCell(id, field, value);
+    }
+    clear() {
+        this.dataSource.clear();
+    }
+    getRowById(id) {
+        return this.dataSource.getRowById(id);
+    }
+    getTotalRowCount() {
+        return this.dataSource.getTotalRowCount();
+    }
+    flushTransactions() {
+        return this.dataSource.flushTransactions();
+    }
+    ngOnDestroy() {
+        this.dataSource.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridDataService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+/**
+ * Typed convenience helper for `inject(GridDataService) as GridDataService<TData>`.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideGridData<Person>({ getRowId: (r) => r.id, initialData: rows })],
+ * })
+ * export class MyGridComponent {
+ *   protected readonly grid = injectGridData<Person>();
+ * }
+ * ```
+ */
+const injectGridData = () => inject(GridDataService);
+
+/**
+ * Returns the providers needed to bind a {@link GridDataService} to the
+ * current injector (typically a component's `providers` array). The service
+ * is scoped to that injector — registering it on a parent injector would
+ * silently share the underlying data source between children.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideGridData<Person>({ getRowId: (r) => r.id, initialData: rows })],
+ * })
+ * export class MyGridComponent {
+ *   protected readonly grid = injectGridData<Person>();
+ * }
+ * ```
+ */
+const provideGridData = (options) => [
+    { provide: GRID_DATA_OPTIONS, useValue: options },
+    GridDataService,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FilterPopupComponent, GpGridComponent, GridBodyComponent, GridHeaderComponent, GridOverlaysComponent, createGridData };
+export { FilterPopupComponent, GRID_DATA_OPTIONS, GpGridComponent, GridBodyComponent, GridDataService, GridHeaderComponent, GridOverlaysComponent, createGridData, injectGridData, provideGridData };
 //# sourceMappingURL=gp-grid-angular.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gp-grid/angular",
   "description": "A high-performance Angular data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "license": "Apache-2.0",
   "module": "fesm2022/gp-grid-angular.mjs",
   "typings": "types/gp-grid-angular.d.ts",
@@ -51,7 +51,7 @@
     "@angular/core": ">=18.0.0"
   },
   "dependencies": {
-    "@gp-grid/core": "0.12.2",
+    "@gp-grid/core": "0.13.1",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/types/gp-grid-angular.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ElementRef, AfterViewInit, OnDestroy, Signal, OnInit } from '@angular/core';
+import { TemplateRef, ElementRef, AfterViewInit, OnDestroy, Signal, OnInit, InjectionToken, Provider } from '@angular/core';
 import * as _gp_grid_core from '@gp-grid/core';
 import { HeaderRendererParams, SortDirection, VisibleColumnInfo, HeaderData, ColumnDefinition, SlotData, CellPosition, CellRange, CellValue, CellRendererParams, EditRendererParams, FillHandlePosition, DragState, ColumnFilterModel, BatchChangeSetters, DataSource, RowId, HighlightingOptions, CellValueChangedEvent, ParallelSortOptions, MutableDataSource } from '@gp-grid/core';
 export { CellDataType, CellPosition, CellRange, CellRendererParams, CellValue, CellValueChangedEvent, ColumnDefinition, ColumnFilterModel, DataSource, DataSourceRequest, DataSourceResponse, EditRendererParams, FilterCondition, FilterModel, GridCore, GridInstruction, HeaderRendererParams, HighlightContext, HighlightingOptions, MutableDataSource, RowId, SortDirection, SortModel, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
@@ -445,5 +445,78 @@ interface GridDataApi<TData> {
  */
 declare const createGridData: <TData = unknown>(initialData: TData[], options: CreateGridDataOptions<TData>) => GridDataApi<TData>;
 
-export { FilterPopupComponent, GpGridComponent, GridBodyComponent, GridHeaderComponent, GridOverlaysComponent, createGridData };
-export type { ActiveFilterPopup, AngularColumnDefinition, CellClassFn, CellDoubleClickEvent, CellPointerDownEvent, CellPointerEnterEvent, CellRendererTemplate, CreateGridDataOptions, EditRendererTemplate, EditingCellState, FillHandlePointerDownEvent, FilterPointerDownEvent, GridDataApi, HeaderPointerDownEvent, HeaderRendererTemplate, HeaderSortEvent, ResizePointerDownEvent, RowClassFn };
+interface GridDataOptions<TData> {
+    /** Initial rows to seed the data source. */
+    initialData: TData[];
+    /** Function to extract a unique ID from each row. Required. */
+    getRowId: (row: TData) => RowId;
+    /** Debounce time for batching transactions in ms. Default 50. */
+    debounceMs?: number;
+    /** Use Web Worker for sorting large datasets (default: true) */
+    useWorker?: boolean;
+    /** Options for parallel sorting (only used when useWorker is true) */
+    parallelSort?: ParallelSortOptions | false;
+}
+/**
+ * Injection token holding the options passed to {@link provideGridData}.
+ * Read internally by {@link GridDataService}; consumers should not depend on it directly.
+ */
+declare const GRID_DATA_OPTIONS: InjectionToken<GridDataOptions<unknown>>;
+/**
+ * Angular service mirroring the React `useGridData` hook and the Vue
+ * `useGridData` composable. Wraps `createMutableClientDataSource` with
+ * automatic cleanup on component destroy.
+ *
+ * Provided per-component via {@link provideGridData}; injected via
+ * {@link injectGridData} (or `inject(GridDataService)` with a manual cast).
+ */
+declare class GridDataService<TData = unknown> implements OnDestroy {
+    readonly dataSource: MutableDataSource<TData>;
+    constructor();
+    updateRow(id: RowId, data: Partial<TData>): void;
+    addRows(rows: TData[]): void;
+    removeRows(ids: RowId[]): void;
+    updateCell(id: RowId, field: string, value: CellValue): void;
+    clear(): void;
+    getRowById(id: RowId): TData | undefined;
+    getTotalRowCount(): number;
+    flushTransactions(): Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridDataService<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<GridDataService<any>>;
+}
+/**
+ * Typed convenience helper for `inject(GridDataService) as GridDataService<TData>`.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideGridData<Person>({ getRowId: (r) => r.id, initialData: rows })],
+ * })
+ * export class MyGridComponent {
+ *   protected readonly grid = injectGridData<Person>();
+ * }
+ * ```
+ */
+declare const injectGridData: <TData>() => GridDataService<TData>;
+
+/**
+ * Returns the providers needed to bind a {@link GridDataService} to the
+ * current injector (typically a component's `providers` array). The service
+ * is scoped to that injector — registering it on a parent injector would
+ * silently share the underlying data source between children.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideGridData<Person>({ getRowId: (r) => r.id, initialData: rows })],
+ * })
+ * export class MyGridComponent {
+ *   protected readonly grid = injectGridData<Person>();
+ * }
+ * ```
+ */
+declare const provideGridData: <TData>(options: GridDataOptions<TData>) => Provider[];
+
+export { FilterPopupComponent, GRID_DATA_OPTIONS, GpGridComponent, GridBodyComponent, GridDataService, GridHeaderComponent, GridOverlaysComponent, createGridData, injectGridData, provideGridData };
+export type { ActiveFilterPopup, AngularColumnDefinition, CellClassFn, CellDoubleClickEvent, CellPointerDownEvent, CellPointerEnterEvent, CellRendererTemplate, CreateGridDataOptions, EditRendererTemplate, EditingCellState, FillHandlePointerDownEvent, FilterPointerDownEvent, GridDataApi, GridDataOptions, HeaderPointerDownEvent, HeaderRendererTemplate, HeaderSortEvent, ResizePointerDownEvent, RowClassFn };