@gridstorm/angular 0.1.2

package/dist/index.js

@@ -0,0 +1,294 @@
+import { Input, Output, ViewChild, Component, Injectable, EventEmitter } from '@angular/core';
+import { createGrid } from '@gridstorm/core';
+import { DomRenderer } from '@gridstorm/dom-renderer';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var GridStormComponent = class {
+  constructor() {
+    this.columns = [];
+    this.rowData = [];
+    this.plugins = [];
+    this.rowHeight = 40;
+    this.theme = "light";
+    this.density = "normal";
+    this.gridReady = new EventEmitter();
+    this.rowDataChanged = new EventEmitter();
+    this.selectionChanged = new EventEmitter();
+    this.sortChanged = new EventEmitter();
+    this.filterChanged = new EventEmitter();
+    this.cellValueChanged = new EventEmitter();
+    this.cellClicked = new EventEmitter();
+    this.cellDoubleClicked = new EventEmitter();
+    this.rowClicked = new EventEmitter();
+    this.paginationChanged = new EventEmitter();
+    this.columnResized = new EventEmitter();
+    // ── Internal state ──
+    this.engine = null;
+    this.renderer = null;
+    this.eventUnsubscribers = [];
+  }
+  // ── Lifecycle ──
+  ngOnInit() {
+    this.initGrid();
+  }
+  ngOnChanges(changes) {
+    if (!this.engine) return;
+    if (changes["rowData"] && !changes["rowData"].firstChange) {
+      this.engine.api.setRowData(this.rowData);
+    }
+    if (changes["columns"] && !changes["columns"].firstChange) {
+      this.engine.api.setColumnDefs(this.columns);
+    }
+    if (changes["paginationPageSize"] && !changes["paginationPageSize"].firstChange) {
+      if (this.paginationPageSize != null) {
+        this.engine.api.setGridOption("paginationPageSize", this.paginationPageSize);
+      }
+    }
+  }
+  ngOnDestroy() {
+    this.destroyGrid();
+  }
+  // ── Public API ──
+  /**
+   * Returns the underlying GridApi instance, or null if the grid
+   * has not been initialized yet.
+   */
+  getApi() {
+    return this.engine?.api ?? null;
+  }
+  /**
+   * Returns the underlying GridEngine instance, or null if the grid
+   * has not been initialized yet.
+   */
+  getEngine() {
+    return this.engine;
+  }
+  // ── Initialization ──
+  initGrid() {
+    const container = this.gridContainerRef.nativeElement;
+    if (!container) return;
+    const config = {
+      columns: this.columns,
+      rowData: this.rowData,
+      plugins: this.plugins,
+      getRowId: this.getRowId,
+      rowHeight: this.rowHeight,
+      headerHeight: this.headerHeight,
+      defaultColDef: this.defaultColDef,
+      domLayout: this.domLayout,
+      rowSelection: this.rowSelection,
+      pagination: this.pagination,
+      paginationPageSize: this.paginationPageSize,
+      ariaLabel: this.ariaLabel,
+      theme: this.theme
+    };
+    this.engine = createGrid(config);
+    this.renderer = new DomRenderer({
+      container,
+      engine: this.engine
+    });
+    this.renderer.mount();
+    this.setupEventBridge();
+    this.gridReady.emit(this.engine.api);
+  }
+  setupEventBridge() {
+    if (!this.engine) return;
+    const eb = this.engine.eventBus;
+    this.eventUnsubscribers = [
+      eb.on("rowData:changed", (e) => this.rowDataChanged.emit(e)),
+      eb.on("selection:changed", (e) => this.selectionChanged.emit(e)),
+      eb.on("column:sort:changed", (e) => this.sortChanged.emit(e)),
+      eb.on("filter:changed", (e) => this.filterChanged.emit(e)),
+      eb.on("cell:valueChanged", (e) => this.cellValueChanged.emit(e)),
+      eb.on("cell:clicked", (e) => this.cellClicked.emit(e)),
+      eb.on("cell:doubleClicked", (e) => this.cellDoubleClicked.emit(e)),
+      eb.on("row:clicked", (e) => this.rowClicked.emit(e)),
+      eb.on("pagination:changed", (e) => this.paginationChanged.emit(e)),
+      eb.on("column:resized", (e) => this.columnResized.emit(e))
+    ];
+  }
+  destroyGrid() {
+    for (const unsub of this.eventUnsubscribers) {
+      unsub();
+    }
+    this.eventUnsubscribers = [];
+    if (this.renderer) {
+      this.renderer.destroy();
+      this.renderer = null;
+    }
+    if (this.engine) {
+      this.engine.destroy();
+      this.engine = null;
+    }
+  }
+};
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "columns", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "rowData", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "plugins", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "getRowId", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "rowHeight", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "theme", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "density", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "defaultColDef", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "paginationPageSize", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "headerHeight", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "domLayout", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "rowSelection", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "pagination", 2);
+__decorateClass([
+  Input()
+], GridStormComponent.prototype, "ariaLabel", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "gridReady", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "rowDataChanged", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "selectionChanged", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "sortChanged", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "filterChanged", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "cellValueChanged", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "cellClicked", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "cellDoubleClicked", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "rowClicked", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "paginationChanged", 2);
+__decorateClass([
+  Output()
+], GridStormComponent.prototype, "columnResized", 2);
+__decorateClass([
+  ViewChild("gridContainer", { static: true })
+], GridStormComponent.prototype, "gridContainerRef", 2);
+GridStormComponent = __decorateClass([
+  Component({
+    selector: "gridstorm",
+    standalone: true,
+    template: `
+    <div
+      #gridContainer
+      class="gridstorm-wrapper"
+      [attr.data-theme]="theme"
+      [attr.data-density]="density"
+      style="width:100%;height:100%"
+    ></div>
+  `
+  })
+], GridStormComponent);
+var GridStormService = class {
+  constructor() {
+    this.apiMap = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Registers a GridApi instance under a unique identifier.
+   *
+   * Call this from the `(gridReady)` output handler of the `<gridstorm>` component.
+   * If an API with the same ID already exists, it will be replaced.
+   *
+   * @param id - A unique string identifier for this grid instance.
+   * @param api - The GridApi instance to register.
+   */
+  registerApi(id, api) {
+    this.apiMap.set(id, api);
+  }
+  /**
+   * Retrieves a previously registered GridApi by its identifier.
+   *
+   * @param id - The unique identifier used during registration.
+   * @returns The GridApi instance, or `undefined` if not found.
+   */
+  getApi(id) {
+    return this.apiMap.get(id);
+  }
+  /**
+   * Removes a registered GridApi by its identifier.
+   *
+   * Call this when a grid component is destroyed to prevent memory leaks.
+   *
+   * @param id - The unique identifier of the API to remove.
+   */
+  removeApi(id) {
+    this.apiMap.delete(id);
+  }
+  /**
+   * Returns all registered grid API identifiers.
+   *
+   * @returns An array of registered grid IDs.
+   */
+  getRegisteredIds() {
+    return Array.from(this.apiMap.keys());
+  }
+  /**
+   * Checks whether a grid API is registered under the given identifier.
+   *
+   * @param id - The unique identifier to check.
+   * @returns `true` if an API is registered with that ID.
+   */
+  hasApi(id) {
+    return this.apiMap.has(id);
+  }
+  /**
+   * Removes all registered grid APIs.
+   *
+   * Useful during application teardown or testing.
+   */
+  clear() {
+    this.apiMap.clear();
+  }
+};
+GridStormService = __decorateClass([
+  Injectable({ providedIn: "root" })
+], GridStormService);
+
+export { GridStormComponent, GridStormService };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gridstorm.component.ts","../src/gridstorm.service.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["// ─── GridStorm Angular Component ───\n// Standalone Angular component wrapping the headless core engine + DOM renderer.\n// Uses ElementRef + ViewChild to mount the DomRenderer into the template container.\n\nimport {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ElementRef,\n  OnInit,\n  OnDestroy,\n  OnChanges,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { createGrid } from '@gridstorm/core';\nimport { DomRenderer } from '@gridstorm/dom-renderer';\nimport type { GridConfig, GridApi, GridEngine, ColumnDef, GridPlugin } from '@gridstorm/core';\n\n@Component({\n  selector: 'gridstorm',\n  standalone: true,\n  template: `\n    <div\n      #gridContainer\n      class=\"gridstorm-wrapper\"\n      [attr.data-theme]=\"theme\"\n      [attr.data-density]=\"density\"\n      style=\"width:100%;height:100%\"\n    ></div>\n  `,\n})\nexport class GridStormComponent implements OnInit, OnDestroy, OnChanges {\n  // ── Inputs ──\n\n  /** Column definitions describing each column's structure and behavior. */\n  @Input() columns: ColumnDef[] = [];\n\n  /** Client-side row data array. */\n  @Input() rowData: any[] = [];\n\n  /** Array of plugins to install during grid initialization. */\n  @Input() plugins: GridPlugin[] = [];\n\n  /** Callback to generate a unique string ID for each row. */\n  @Input() getRowId?: (params: any) => string;\n\n  /** Height of each data row in pixels. */\n  @Input() rowHeight = 40;\n\n  /** Theme identifier: 'light', 'dark', or custom theme name. */\n  @Input() theme = 'light';\n\n  /** Density mode: 'compact', 'normal', or 'comfortable'. */\n  @Input() density = 'normal';\n\n  /** Default column definition applied to all columns as fallback. */\n  @Input() defaultColDef?: Partial<ColumnDef>;\n\n  /** Number of rows per page when pagination is enabled. */\n  @Input() paginationPageSize?: number;\n\n  /** Height of the header row in pixels. */\n  @Input() headerHeight?: number;\n\n  /** Controls how the grid's DOM height is determined. */\n  @Input() domLayout?: 'normal' | 'autoHeight' | 'print';\n\n  /** Row selection mode: 'single', 'multiple', or false (disabled). */\n  @Input() rowSelection?: 'single' | 'multiple' | false;\n\n  /** When true, enables client-side pagination. */\n  @Input() pagination?: boolean;\n\n  /** ARIA label for the grid root element (screen reader accessibility). */\n  @Input() ariaLabel?: string;\n\n  // ── Outputs ──\n\n  /** Emitted when the grid engine is fully initialized and the API is ready. */\n  @Output() gridReady = new EventEmitter<GridApi>();\n\n  /** Emitted when row data changes. */\n  @Output() rowDataChanged = new EventEmitter<any>();\n\n  /** Emitted when the selection state changes. */\n  @Output() selectionChanged = new EventEmitter<any>();\n\n  /** Emitted when the sort model changes. */\n  @Output() sortChanged = new EventEmitter<any>();\n\n  /** Emitted when the filter model changes. */\n  @Output() filterChanged = new EventEmitter<any>();\n\n  /** Emitted when a cell value is changed through editing. */\n  @Output() cellValueChanged = new EventEmitter<any>();\n\n  /** Emitted when a cell is clicked. */\n  @Output() cellClicked = new EventEmitter<any>();\n\n  /** Emitted when a cell is double-clicked. */\n  @Output() cellDoubleClicked = new EventEmitter<any>();\n\n  /** Emitted when a row is clicked. */\n  @Output() rowClicked = new EventEmitter<any>();\n\n  /** Emitted when pagination state changes. */\n  @Output() paginationChanged = new EventEmitter<any>();\n\n  /** Emitted when a column is resized. */\n  @Output() columnResized = new EventEmitter<any>();\n\n  // ── Template reference ──\n\n  @ViewChild('gridContainer', { static: true })\n  private gridContainerRef!: ElementRef<HTMLElement>;\n\n  // ── Internal state ──\n\n  private engine: GridEngine | null = null;\n  private renderer: DomRenderer | null = null;\n  private eventUnsubscribers: Array<() => void> = [];\n\n  // ── Lifecycle ──\n\n  ngOnInit(): void {\n    this.initGrid();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!this.engine) return;\n\n    // Sync rowData changes to the engine\n    if (changes['rowData'] && !changes['rowData'].firstChange) {\n      this.engine.api.setRowData(this.rowData);\n    }\n\n    // Sync column definition changes to the engine\n    if (changes['columns'] && !changes['columns'].firstChange) {\n      this.engine.api.setColumnDefs(this.columns);\n    }\n\n    // Sync pagination page size\n    if (changes['paginationPageSize'] && !changes['paginationPageSize'].firstChange) {\n      if (this.paginationPageSize != null) {\n        this.engine.api.setGridOption('paginationPageSize', this.paginationPageSize);\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroyGrid();\n  }\n\n  // ── Public API ──\n\n  /**\n   * Returns the underlying GridApi instance, or null if the grid\n   * has not been initialized yet.\n   */\n  getApi(): GridApi | null {\n    return this.engine?.api ?? null;\n  }\n\n  /**\n   * Returns the underlying GridEngine instance, or null if the grid\n   * has not been initialized yet.\n   */\n  getEngine(): GridEngine | null {\n    return this.engine;\n  }\n\n  // ── Initialization ──\n\n  private initGrid(): void {\n    const container = this.gridContainerRef.nativeElement;\n    if (!container) return;\n\n    // Build core config from inputs\n    const config: GridConfig = {\n      columns: this.columns,\n      rowData: this.rowData,\n      plugins: this.plugins,\n      getRowId: this.getRowId,\n      rowHeight: this.rowHeight,\n      headerHeight: this.headerHeight,\n      defaultColDef: this.defaultColDef,\n      domLayout: this.domLayout,\n      rowSelection: this.rowSelection,\n      pagination: this.pagination,\n      paginationPageSize: this.paginationPageSize,\n      ariaLabel: this.ariaLabel,\n      theme: this.theme,\n    };\n\n    // Create the headless grid engine\n    this.engine = createGrid(config);\n\n    // Create and mount the DOM renderer\n    this.renderer = new DomRenderer({\n      container,\n      engine: this.engine,\n    });\n    this.renderer.mount();\n\n    // Wire up event bridge: core events -> Angular EventEmitters\n    this.setupEventBridge();\n\n    // Emit gridReady\n    this.gridReady.emit(this.engine.api);\n  }\n\n  private setupEventBridge(): void {\n    if (!this.engine) return;\n\n    const eb = this.engine.eventBus;\n\n    this.eventUnsubscribers = [\n      eb.on('rowData:changed', (e) => this.rowDataChanged.emit(e)),\n      eb.on('selection:changed', (e) => this.selectionChanged.emit(e)),\n      eb.on('column:sort:changed', (e) => this.sortChanged.emit(e)),\n      eb.on('filter:changed', (e) => this.filterChanged.emit(e)),\n      eb.on('cell:valueChanged', (e) => this.cellValueChanged.emit(e)),\n      eb.on('cell:clicked', (e) => this.cellClicked.emit(e)),\n      eb.on('cell:doubleClicked', (e) => this.cellDoubleClicked.emit(e)),\n      eb.on('row:clicked', (e) => this.rowClicked.emit(e)),\n      eb.on('pagination:changed', (e) => this.paginationChanged.emit(e)),\n      eb.on('column:resized', (e) => this.columnResized.emit(e)),\n    ];\n  }\n\n  private destroyGrid(): void {\n    // Unsubscribe from all core events\n    for (const unsub of this.eventUnsubscribers) {\n      unsub();\n    }\n    this.eventUnsubscribers = [];\n\n    // Destroy the DOM renderer\n    if (this.renderer) {\n      this.renderer.destroy();\n      this.renderer = null;\n    }\n\n    // Destroy the grid engine\n    if (this.engine) {\n      this.engine.destroy();\n      this.engine = null;\n    }\n  }\n}\n","// ─── GridStorm Service ───\n// Injectable service for managing multiple GridStorm instances.\n// Allows Angular components to access grid APIs by a unique identifier,\n// useful in applications with multiple grids or cross-component communication.\n\nimport { Injectable } from '@angular/core';\nimport type { GridApi } from '@gridstorm/core';\n\n/**\n * Service for registering and retrieving GridStorm API instances.\n *\n * Use this service when you have multiple grids in your application\n * and need to access their APIs from different components or services.\n *\n * @example\n * ```typescript\n * // In a component that hosts the grid:\n * constructor(private gridService: GridStormService) {}\n *\n * onGridReady(api: GridApi) {\n *   this.gridService.registerApi('employees', api);\n * }\n *\n * // In another component that needs to interact with the grid:\n * constructor(private gridService: GridStormService) {}\n *\n * exportData() {\n *   const api = this.gridService.getApi('employees');\n *   if (api) {\n *     const rows = api.getSelectedRows();\n *     // ... do something with rows\n *   }\n * }\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class GridStormService {\n  private apiMap = new Map<string, GridApi>();\n\n  /**\n   * Registers a GridApi instance under a unique identifier.\n   *\n   * Call this from the `(gridReady)` output handler of the `<gridstorm>` component.\n   * If an API with the same ID already exists, it will be replaced.\n   *\n   * @param id - A unique string identifier for this grid instance.\n   * @param api - The GridApi instance to register.\n   */\n  registerApi(id: string, api: GridApi): void {\n    this.apiMap.set(id, api);\n  }\n\n  /**\n   * Retrieves a previously registered GridApi by its identifier.\n   *\n   * @param id - The unique identifier used during registration.\n   * @returns The GridApi instance, or `undefined` if not found.\n   */\n  getApi(id: string): GridApi | undefined {\n    return this.apiMap.get(id);\n  }\n\n  /**\n   * Removes a registered GridApi by its identifier.\n   *\n   * Call this when a grid component is destroyed to prevent memory leaks.\n   *\n   * @param id - The unique identifier of the API to remove.\n   */\n  removeApi(id: string): void {\n    this.apiMap.delete(id);\n  }\n\n  /**\n   * Returns all registered grid API identifiers.\n   *\n   * @returns An array of registered grid IDs.\n   */\n  getRegisteredIds(): string[] {\n    return Array.from(this.apiMap.keys());\n  }\n\n  /**\n   * Checks whether a grid API is registered under the given identifier.\n   *\n   * @param id - The unique identifier to check.\n   * @returns `true` if an API is registered with that ID.\n   */\n  hasApi(id: string): boolean {\n    return this.apiMap.has(id);\n  }\n\n  /**\n   * Removes all registered grid APIs.\n   *\n   * Useful during application teardown or testing.\n   */\n  clear(): void {\n    this.apiMap.clear();\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@gridstorm/angular",
+  "version": "0.1.2",
+  "description": "GridStorm Angular adapter — standalone component for Angular 16+",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@gridstorm/core": "workspace:*",
+    "@gridstorm/dom-renderer": "workspace:*"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=16.0.0",
+    "@angular/common": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@angular/core": ">=16.0.0",
+    "@angular/common": ">=16.0.0",
+    "tsup": "^8.2.0",
+    "typescript": "^5.5.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "keywords": [
+    "datagrid",
+    "angular",
+    "angular-grid",
+    "angular-table",
+    "gridstorm",
+    "standalone-component"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/007krcs/grid-data.git",
+    "directory": "packages/angular-adapter"
+  },
+  "bugs": {
+    "url": "https://github.com/007krcs/grid-data/issues"
+  },
+  "homepage": "https://grid-data-analytics-explorer.vercel.app/",
+  "author": {
+    "name": "GridStorm",
+    "url": "https://grid-data-analytics-explorer.vercel.app/"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/gridstorm"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/gridstorm.component.ts

@@ -0,0 +1,252 @@
+// ─── GridStorm Angular Component ───
+// Standalone Angular component wrapping the headless core engine + DOM renderer.
+// Uses ElementRef + ViewChild to mount the DomRenderer into the template container.
+
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  OnInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { createGrid } from '@gridstorm/core';
+import { DomRenderer } from '@gridstorm/dom-renderer';
+import type { GridConfig, GridApi, GridEngine, ColumnDef, GridPlugin } from '@gridstorm/core';
+
+@Component({
+  selector: 'gridstorm',
+  standalone: true,
+  template: `
+    <div
+      #gridContainer
+      class="gridstorm-wrapper"
+      [attr.data-theme]="theme"
+      [attr.data-density]="density"
+      style="width:100%;height:100%"
+    ></div>
+  `,
+})
+export class GridStormComponent implements OnInit, OnDestroy, OnChanges {
+  // ── Inputs ──
+
+  /** Column definitions describing each column's structure and behavior. */
+  @Input() columns: ColumnDef[] = [];
+
+  /** Client-side row data array. */
+  @Input() rowData: any[] = [];
+
+  /** Array of plugins to install during grid initialization. */
+  @Input() plugins: GridPlugin[] = [];
+
+  /** Callback to generate a unique string ID for each row. */
+  @Input() getRowId?: (params: any) => string;
+
+  /** Height of each data row in pixels. */
+  @Input() rowHeight = 40;
+
+  /** Theme identifier: 'light', 'dark', or custom theme name. */
+  @Input() theme = 'light';
+
+  /** Density mode: 'compact', 'normal', or 'comfortable'. */
+  @Input() density = 'normal';
+
+  /** Default column definition applied to all columns as fallback. */
+  @Input() defaultColDef?: Partial<ColumnDef>;
+
+  /** Number of rows per page when pagination is enabled. */
+  @Input() paginationPageSize?: number;
+
+  /** Height of the header row in pixels. */
+  @Input() headerHeight?: number;
+
+  /** Controls how the grid's DOM height is determined. */
+  @Input() domLayout?: 'normal' | 'autoHeight' | 'print';
+
+  /** Row selection mode: 'single', 'multiple', or false (disabled). */
+  @Input() rowSelection?: 'single' | 'multiple' | false;
+
+  /** When true, enables client-side pagination. */
+  @Input() pagination?: boolean;
+
+  /** ARIA label for the grid root element (screen reader accessibility). */
+  @Input() ariaLabel?: string;
+
+  // ── Outputs ──
+
+  /** Emitted when the grid engine is fully initialized and the API is ready. */
+  @Output() gridReady = new EventEmitter<GridApi>();
+
+  /** Emitted when row data changes. */
+  @Output() rowDataChanged = new EventEmitter<any>();
+
+  /** Emitted when the selection state changes. */
+  @Output() selectionChanged = new EventEmitter<any>();
+
+  /** Emitted when the sort model changes. */
+  @Output() sortChanged = new EventEmitter<any>();
+
+  /** Emitted when the filter model changes. */
+  @Output() filterChanged = new EventEmitter<any>();
+
+  /** Emitted when a cell value is changed through editing. */
+  @Output() cellValueChanged = new EventEmitter<any>();
+
+  /** Emitted when a cell is clicked. */
+  @Output() cellClicked = new EventEmitter<any>();
+
+  /** Emitted when a cell is double-clicked. */
+  @Output() cellDoubleClicked = new EventEmitter<any>();
+
+  /** Emitted when a row is clicked. */
+  @Output() rowClicked = new EventEmitter<any>();
+
+  /** Emitted when pagination state changes. */
+  @Output() paginationChanged = new EventEmitter<any>();
+
+  /** Emitted when a column is resized. */
+  @Output() columnResized = new EventEmitter<any>();
+
+  // ── Template reference ──
+
+  @ViewChild('gridContainer', { static: true })
+  private gridContainerRef!: ElementRef<HTMLElement>;
+
+  // ── Internal state ──
+
+  private engine: GridEngine | null = null;
+  private renderer: DomRenderer | null = null;
+  private eventUnsubscribers: Array<() => void> = [];
+
+  // ── Lifecycle ──
+
+  ngOnInit(): void {
+    this.initGrid();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.engine) return;
+
+    // Sync rowData changes to the engine
+    if (changes['rowData'] && !changes['rowData'].firstChange) {
+      this.engine.api.setRowData(this.rowData);
+    }
+
+    // Sync column definition changes to the engine
+    if (changes['columns'] && !changes['columns'].firstChange) {
+      this.engine.api.setColumnDefs(this.columns);
+    }
+
+    // Sync pagination page size
+    if (changes['paginationPageSize'] && !changes['paginationPageSize'].firstChange) {
+      if (this.paginationPageSize != null) {
+        this.engine.api.setGridOption('paginationPageSize', this.paginationPageSize);
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyGrid();
+  }
+
+  // ── Public API ──
+
+  /**
+   * Returns the underlying GridApi instance, or null if the grid
+   * has not been initialized yet.
+   */
+  getApi(): GridApi | null {
+    return this.engine?.api ?? null;
+  }
+
+  /**
+   * Returns the underlying GridEngine instance, or null if the grid
+   * has not been initialized yet.
+   */
+  getEngine(): GridEngine | null {
+    return this.engine;
+  }
+
+  // ── Initialization ──
+
+  private initGrid(): void {
+    const container = this.gridContainerRef.nativeElement;
+    if (!container) return;
+
+    // Build core config from inputs
+    const config: GridConfig = {
+      columns: this.columns,
+      rowData: this.rowData,
+      plugins: this.plugins,
+      getRowId: this.getRowId,
+      rowHeight: this.rowHeight,
+      headerHeight: this.headerHeight,
+      defaultColDef: this.defaultColDef,
+      domLayout: this.domLayout,
+      rowSelection: this.rowSelection,
+      pagination: this.pagination,
+      paginationPageSize: this.paginationPageSize,
+      ariaLabel: this.ariaLabel,
+      theme: this.theme,
+    };
+
+    // Create the headless grid engine
+    this.engine = createGrid(config);
+
+    // Create and mount the DOM renderer
+    this.renderer = new DomRenderer({
+      container,
+      engine: this.engine,
+    });
+    this.renderer.mount();
+
+    // Wire up event bridge: core events -> Angular EventEmitters
+    this.setupEventBridge();
+
+    // Emit gridReady
+    this.gridReady.emit(this.engine.api);
+  }
+
+  private setupEventBridge(): void {
+    if (!this.engine) return;
+
+    const eb = this.engine.eventBus;
+
+    this.eventUnsubscribers = [
+      eb.on('rowData:changed', (e) => this.rowDataChanged.emit(e)),
+      eb.on('selection:changed', (e) => this.selectionChanged.emit(e)),
+      eb.on('column:sort:changed', (e) => this.sortChanged.emit(e)),
+      eb.on('filter:changed', (e) => this.filterChanged.emit(e)),
+      eb.on('cell:valueChanged', (e) => this.cellValueChanged.emit(e)),
+      eb.on('cell:clicked', (e) => this.cellClicked.emit(e)),
+      eb.on('cell:doubleClicked', (e) => this.cellDoubleClicked.emit(e)),
+      eb.on('row:clicked', (e) => this.rowClicked.emit(e)),
+      eb.on('pagination:changed', (e) => this.paginationChanged.emit(e)),
+      eb.on('column:resized', (e) => this.columnResized.emit(e)),
+    ];
+  }
+
+  private destroyGrid(): void {
+    // Unsubscribe from all core events
+    for (const unsub of this.eventUnsubscribers) {
+      unsub();
+    }
+    this.eventUnsubscribers = [];
+
+    // Destroy the DOM renderer
+    if (this.renderer) {
+      this.renderer.destroy();
+      this.renderer = null;
+    }
+
+    // Destroy the grid engine
+    if (this.engine) {
+      this.engine.destroy();
+      this.engine = null;
+    }
+  }
+}