@smart-grid/angular

Monorepo / npm release 1.2.0 (stable 1.x); depends on @smart-grid/core ^1.2.0.

What's new in 1.2.0

• floatingFilters, autoSizeColumns, enableColumnResize inputs — column resize handles and auto-width on load.
• Tool panel on the right, collapsed by default; header filters (text / set / number / date).
• cellRenderer HTML; sticky column pinning; aria-live sort/filter announcements.
• See CHANGELOG.md and 1.1.0 notes in the monorepo changelog.

Angular standalone component and injectable service for Smart Grid, built on @smart-grid/core. Sorting, filtering, pagination, row selection, grouping, pivot, tree data, master/detail, charts, CSV/Excel export, column tool panel, find-in-grid, and range selection — aligned with the React and vanilla packages.

Live demo & docs: https://smart-grid-mu.vercel.app/ — open the Angular examples on the site for full option coverage.

SmartGridComponent is standalone (standalone: true). It works with Angular 18+ and typical bundlers (Angular CLI, Vite + Angular, esbuild, webpack).

Install

npm install @smart-grid/angular @smart-grid/themes
# Peer deps: @angular/common, @angular/core, @angular/platform-browser ^18 || ^19 || ^20

Add the theme stylesheet once (see @smart-grid/themes).

Enterprise licensing (unified <smart-grid>)

One component handles community and enterprise: bind enterpriseLicenseKey to validate against the JSON allowlist in @smart-grid/enterprise. When the key is valid, enterprise-only inputs (charts, pivot, tool panel, tree, master/detail, Excel, advanced find, range selection) take effect; otherwise they are ignored. Emit enterpriseStatusChange for { active, owner? }.

npm install @smart-grid/angular @smart-grid/themes @smart-grid/enterprise

import { Component } from "@angular/core";
import { SmartGridComponent, type EnterpriseGridStatus } from "@smart-grid/angular";

@Component({
  standalone: true,
  imports: [SmartGridComponent],
  template: `
    <smart-grid
      enterpriseLicenseKey="SG-ENT-9A01-B7E3-4C2F-8D110001"
      [rowData]="rows"
      [columnDefs]="columns"
      [enableCharts]="true"
      [showToolPanel]="true"
      (enterpriseStatusChange)="onEnterpriseStatus($event)"
    />
  `
})
export class AppComponent {
  onEnterpriseStatus(status: EnterpriseGridStatus) {
    console.log(status.active, status.owner);
  }
}

If enterpriseLicenseKey is not bound, licensing is not enforced (legacy behavior). Bind the input (even to "") to enable gating.

Deprecated: @smart-grid/angular/enterprise

<smart-grid-enterprise> forwards to <smart-grid> with the same inputs. Prefer enterpriseLicenseKey on <smart-grid> for new projects.

For local monorepo docs builds, map @smart-grid/angular, @smart-grid/core, and @smart-grid/enterprise to package src/ in tsconfig paths (see apps/tsconfig.app.json).

Usage — component

// app.component.ts
import { Component } from "@angular/core";
import { SmartGridComponent, type ColumnDef } from "@smart-grid/angular";

type Row = { id: string; name: string; score: number };

@Component({
  selector: "app-root",
  standalone: true,
  imports: [SmartGridComponent],
  template: `
    <smart-grid
      [rowData]="rows"
      [columnDefs]="columns"
      [pagination]="true"
      [pageSize]="10"
      [rowSelection]="'multiple'"
      theme="smart-light"
      [showToolPanel]="true"
      (selectionChanged)="onSelection($event)"
    />
  `
})
export class AppComponent {
  rows: Row[] = [
    { id: "1", name: "Ada", score: 98 },
    { id: "2", name: "Lin", score: 87 }
  ];

  columns: ColumnDef<Row>[] = [
    { field: "name", headerName: "Name", sortable: true, filter: true },
    { field: "score", headerName: "Score", sortable: true }
  ];

  onSelection(selected: Row[]) {
    console.log("Selected:", selected);
  }
}

Register styles in angular.json styles or in a global stylesheet:

@import "@smart-grid/themes/smart-grid.css";

Toolbar & pagination UI

Configure built-in chrome via [toolbar] and [paginationUi] (GridToolbarOptions / GridPaginationOptions from core). Set buttonDisplay to "icon", "text", or "both"; override labels, icons, and visibility per action.

import type { GridPaginationOptions, GridToolbarOptions } from "@smart-grid/angular";

toolbar: GridToolbarOptions = {
  buttonDisplay: "both",
  buttons: { clear: { label: "Reset", display: "icon" } }
};
paginationUi: GridPaginationOptions = { buttonDisplay: "icon", maxPageButtons: 5 };

Docs: Toolbar & pagination UI.

Usage — feature service

Use SmartGridFeatureService when you need the same pure helpers as the grid (grouping, pivot, Excel, AI insight, menus) outside the template — for example in a resolver, effect, or MCP bridge.

import { Component, inject } from "@angular/core";
import { SmartGridFeatureService, type ColumnDef } from "@smart-grid/angular";

@Component({
  selector: "app-insights",
  standalone: true,
  template: `<pre>{{ summary | json }}</pre>`
})
export class InsightsComponent {
  private readonly features = inject(SmartGridFeatureService);

  readonly summary = this.features.createFeatureSummary(
    [{ id: 1, revenue: 120 }],
    [{ field: "revenue", headerName: "Revenue", sortable: true }] as ColumnDef<{ id: number; revenue: number }>[]
  );
}

API — SmartGridComponent (selected inputs)

| Input | Description | | --- | --- | | rowData | Required. Row array. | | columnDefs | Required. Column definitions (field, headerName, sortable, filter, …). | | pagination, pageSize, pageSizeOptions | Client pagination. | | rowSelection | 'single' | 'multiple' or omit for no selection. | | theme | 'smart-light' | 'smart-dark' (matches theme CSS). | | serverSide, dataSource | Server-side row loading. | | groupBy, aggregations | Row grouping. | | pivotMode, pivotRowField, pivotColumnField, pivotValueField | Pivot table. | | treeData, treeNodes | Tree rows. | | masterDetail, masterDetailRows | Master/detail. | | enableCharts, chartType, chartCategoryField, chartValueField | Integrated chart panel. | | enableRangeSelection, enableFindClipboard | Range select and find + Ctrl+C copy behaviour. | | virtualScroll, rowHeight, viewportHeight | Virtual scrolling. | | showColumnMenus, showContextMenu, showToolPanel | UI chrome toggles. |

API — outputs

| Output | Payload | | --- | --- | | selectionChanged | Selected row objects. | | cellValueChanged | Cell edit metadata. | | csvExport | CSV string when user exports. | | rowOrderChanged / columnOrderChanged | Reordered rows or columns (when drag is enabled). | | rangeSelectionChanged | Current cell range or null. |

Related packages

• @smart-grid/core — types and pure row engine (dependency of this package).
• @smart-grid/react — React SmartGrid.
• @smart-grid/js — createSmartGrid() for vanilla DOM.
• @smart-grid/themes — required CSS.

Links

• Homepage / demo: smart-grid-mu.vercel.app
• Repository: github.com/rajkishorsahu89/smart-grid
• Issues: github.com/rajkishorsahu89/smart-grid/issues

License

MIT