Package Exports

@gridnexa/angular

Readme

GridNexa Angular Data Grid | Angular Table

Enterprise Angular data grid with Excel-like interactions, safe AI command support, typed column models, and design-system friendly styling.

GridNexa for Angular is a native Angular package for product teams building admin tools, dashboards, reporting screens, and spreadsheet-style workflows.

Quick Links

Website: https://www.gridnexa.in/
Docs and playground: https://www.gridnexa.in/docs/basic-grid
Help: https://www.gridnexa.in/help
Repository: https://github.com/mhalungekar9/SmartGrid

Install

npm install @gridnexa/angular

pnpm add @gridnexa/angular

Basic Usage

import { Component } from "@angular/core";
import { GridNexaAngularComponent, type Column } from "@gridnexa/angular";

interface Employee {
  id: number;
  name: string;
  department: string;
  city: string;
  score: number;
  adjustedScore: string;
}

@Component({
  selector: "app-root",
  standalone: true,
  imports: [GridNexaAngularComponent],
  template: `
    <grid-nexa
      [columns]="columns"
      [rows]="rows"
      [rowNumbers]="true"
      [checkboxSelection]="true"
      [enableFillHandle]="true"
      [enableUndoRedo]="true"
      [pageSize]="20"
      theme="light"
      density="standard"
      [fillWidth]="false"
      [getRowId]="getRowId"
      (rowSelectionChange)="onSelection($event)"
      (cellValueChange)="onCellValueChange($event)"
    />
  `,
})
export class AppComponent {
  columns: Column<Employee>[] = [
    { id: "name", field: "name", headerName: "Name", sortable: true, filter: "text", editable: true },
    { id: "department", field: "department", headerName: "Department", filter: "set" },
    { id: "score", field: "score", headerName: "Score", filter: "number", editable: true },
    { id: "adjustedScore", field: "adjustedScore", headerName: "Adjusted" },
  ];

  rows: Employee[] = [
    { id: 1, name: "John Carter", department: "Operations", city: "London", score: 92, adjustedScore: "=score * 1.05" },
    { id: 2, name: "Alice Moreau", department: "Product", city: "Paris", score: 87, adjustedScore: "=score * 1.05" },
  ];

  getRowId = (row: Employee) => row.id;

  onSelection(rows: Employee[]) {
    console.log(rows);
  }

  onCellValueChange(event: unknown) {
    console.log(event);
  }
}

<grid-nexa
  [columns]="columns"
  [rows]="rows"
  [toolbar]="{
    quickFilter: true,
    find: true,
    filters: true,
    advancedFilter: true,
    columns: true,
    addRow: true,
    deleteRow: true,
    deleteSelectedRows: true
  }"
  [columnTools]="{
    sort: true,
    filter: true,
    filterPanel: true,
    menu: true,
    resize: true,
    pin: true,
    hide: true,
    autosize: true
  }"
  [footer]="{
    rowCount: true,
    selectedRows: true,
    selectedCell: true,
    selectedRange: true,
    filterCount: true,
    sortStatus: true,
    pagination: true
  }"
  [sidePanel]="{
    columns: true,
    pivot: true,
    filters: true,
    defaultActivePanel: 'columns'
  }"
/>

Use columnTools for global header-button defaults and column.tools for per-column overrides. Use [footer]="false" to hide the footer, or pass footer.renderer for a custom footer. Custom icons can be supplied through icons and per-column icons values where supported.

Use [sidePanel]="false" or [sidePanel]="{ enabled: false }" to hide right-side tools. Use columns, pivot, filters, and defaultActivePanel to control which side tabs appear and which one opens first.

Presets, Saved Views, And Overlays

<grid-nexa
  [columns]="columns"
  [rows]="rows"
  preset="admin"
/>

<grid-nexa
  [columns]="columns"
  [rows]="rows"
  preset="spreadsheet"
  [stateStorage]="{
    key: 'employees-grid',
    type: 'localStorage'
  }"
/>

Presets reduce setup for common product surfaces:

basic for clean read-only tables
admin for CRUD-heavy internal tools
spreadsheet for Excel-like editing and fill workflows
analytics for reporting, pivoting, and saved exploration

Explicit inputs still win over preset defaults. stateStorage persists saved-view state such as column widths, hidden columns, pinned columns, filters, sorting, and pagination.

<grid-nexa
  [columns]="columns"
  [rows]="[]"
  [loading]="isLoading"
  [error]="error"
  emptyState="No employees found"
/>

Built-in loading, error, and empty overlays appear inside the grid viewport without breaking header/body alignment.

Productivity Layer

Copy this:

<grid-nexa
  [columns]="columns"
  [rows]="rows"
  [views]="{ key: 'employees-grid-views' }"
  [commandPalette]="true"
  [changeReview]="true"
  [validation]="{
    blockSave: true,
    rules: {
      name: { required: true, message: 'Name is required' },
      score: { type: 'number', min: 70, max: 100 }
    }
  }"
  [diagnostics]="true"
/>

When to use: saved views, command search, change review, validation, and diagnostics are useful for admin tools, operations screens, and spreadsheet-style review workflows.

Common mistakes: use a stable views.key per grid, keep validation rules fast, and avoid sharing saved-view keys across unrelated screens.

Column And Range Summaries

Copy this:

<grid-nexa
  [columns]="columns"
  [rows]="rows"
  [enableRangeSelection]="true"
  [summaries]="{
    footer: true,
    selectedRange: true
  }"
/>

When to use: show count, sum, average, min, and max for visible numeric data or a selected range.

Common mistakes: keep enableRangeSelection on for range summaries, keep the footer visible, and remember that text values are ignored.

Column Width And Fill Behavior

<grid-nexa
  [columns]="[
    { id: 'name', field: 'name', headerName: 'Name', width: 180 },
    { id: 'department', field: 'department', headerName: 'Department', flex: 1, minWidth: 180 },
    { id: 'notes', field: 'notes', headerName: 'Notes', flex: 2, minWidth: 240 }
  ]"
  [rows]="rows"
  [fillWidth]="{ enabled: true, mode: 'flex' }"
/>

When fillWidth is disabled, the grid stops at the total real column width instead of showing a blank fake column. Enable it to stretch real columns with flex, or use mode: 'lastColumn' to let the final visible data column fill remaining space.

AI Command Support

<grid-nexa
  [columns]="columns"
  [rows]="rows"
  [ai]="{
    enabled: true,
    endpoint: '/api/gridnexa-ai',
    placeholder: 'Ask AI to filter, sort, group, pivot, pin, hide, or export'
  }"
/>

Keep provider keys on your backend. GridNexa accepts safe action plans from OpenAI, Azure OpenAI, Anthropic, Gemini, local models, or an internal gateway.

Styling And Classes

Use className, classNames, getRowClassName, getCellClassName, getHeaderClassName, and column-level className, cellClassName, and headerClassName to connect Bootstrap, utility classes, CSS Modules, SCSS, Less, or plain CSS.

If you compare behavior with an installed React app, import @gridnexa/react/index.css once in that app entry. The CSS export includes the shared header layout, drag handles, drop indicators, pinned-column rules, popovers, scrollbars, and theme variables used by the playground.

Feature Highlights

Sorting, pagination, quick filter, column filters, external filters, and advanced filter model
Selection, row numbers, clipboard operations, fill, find, undo, and redo
Inline editing, formulas, CSV export, and Excel export
Merged headers, column resize, aligned drag reorder, hide/show, pinning, flex/fill-width columns, configurable side tools, and row reorder
Grouping, pivoting, tree data, master/detail, transactions, and server-side operation events
AI command bar with safe action plans

@gridnexa/react
@gridnexa/vue
@gridnexa/javascript
@gridnexa/core

License

MIT