Enterprise Angular 20 Grid (@chandreshgamdha/gsc-angular-grid)

@chandreshgamdha/gsc-angular-grid is a high-performance, enterprise-grade Angular 20 Data Grid package built from scratch. Designed for modern Angular Zone-less & Signal architectures, it supports seamless virtualization for 1,000,000+ rows at 60 FPS while offering an intuitive declarative API mimicking industry standards.

Table of Contents

• Key Features
• Installation
• Getting Started
• Defining Columns & Templates
• Core Features
  • Paging, Sorting & Filtering
  • Virtualization (1M+ Rows)
  • Grouping & Row Drag-and-Drop
  • Aggregates (Footer Summary)
• Advanced Features
  • Editing & CRUD Operations
  • Toolbar & Column Chooser
  • Context Menu
  • Excel, PDF & CSV Export
• Programmatic API
• Theming & CSS Variables
• API Reference
• License

Key Features

• ⚡ 1,000,000+ Row Virtualization: High-frequency row and column viewport sliding windows with zero dropped frames.
• 🚦 Angular 20 Signal-Driven: State management powered entirely by Angular Signals.
• 🌲 Tree-Shakable Architecture: Every feature (Sorting, Filtering, Paging, Selection) is highly optimized.
• 🔒 Sticky & Frozen Columns: Pin columns to the left or right boundaries seamlessly.
• 🎨 Multi-Theme Engine: Built-in themes for Light, Dark, Material, Bootstrap, Tailwind, and Fluent.
• 📥 Export Engine: Instant client-side CSV, Excel, and PDF generation.
• 📊 Aggregates & Summary Footer: Built-in Sum, Avg, Min, Max, Count, and Custom aggregates.
• ✍️ Declarative Syntax: Build grids easily with clean HTML tags like <gsc-grid>, <gsc-columns>, and <gsc-column>.

Installation

npm install @chandreshgamdha/gsc-angular-grid @angular/cdk

Getting Started

1. Import the Module

Import GridModule into your standalone component or AppModule.

import { Component, signal } from '@angular/core';
import { GridModule } from '@chandreshgamdha/gsc-angular-grid';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [GridModule],
  templateUrl: './app.component.html'
})
export class DemoComponent {
  employees = signal([
    { id: 101, name: 'John Doe', department: 'Engineering', status: 'Active', salary: 95000 },
    { id: 102, name: 'Jane Smith', department: 'Product', status: 'On Leave', salary: 105000 }
  ]);
}

2. Basic Grid Template

Define your grid structure completely in HTML using <gsc-columns>.

<gsc-grid [dataSource]="employees()" [height]="'400px'">
  <gsc-columns>
    <gsc-column field="id" headerText="ID" [isPrimaryKey]="true" [width]="100"></gsc-column>
    <gsc-column field="name" headerText="Employee Name" [width]="200"></gsc-column>
    <gsc-column field="department" headerText="Department" [width]="150"></gsc-column>
    <gsc-column field="salary" headerText="Salary" type="currency" [width]="140"></gsc-column>
  </gsc-columns>
</gsc-grid>

Defining Columns & Templates

Column Properties

• field: Property name in the data source.
• headerText: Title displayed in the column header.
• width: Fixed width of the column.
• textAlign: 'left' | 'center' | 'right'.
• type: 'string' | 'number' | 'date' | 'boolean' | 'currency'.
• freeze: 'left' | 'right' (Pins column to a side).
• isPrimaryKey: Identifies the column as the unique identifier for data operations.

Custom Templates

Use Angular <ng-template> directives to override standard rendering.

• #template: Custom cell rendering.
• #headerTemplate: Custom header rendering.

<gsc-column field="status" headerText="Employee Status" textAlign="center" [width]="150">
  <ng-template #headerTemplate let-column="column">
    <span class="custom-header">👑 {{ column.headerText }}</span>
  </ng-template>

  <ng-template #template let-data>
    <span class="badge" [class.active]="data.status === 'Active'">
      {{ data.status }}
    </span>
  </ng-template>
</gsc-column>

Core Features

Paging, Sorting & Filtering

Easily enable pagination, sorting, and filtering via properties.

<gsc-grid 
  [dataSource]="employees()" 
  [allowPaging]="true"
  [allowSorting]="true"
  [allowFiltering]="true"
  [pageSettings]="{ pageSize: 15, pageCount: 5 }">

Virtualization (1M+ Rows)

For massive datasets, rely on the built-in DOM Virtualization to prevent browser freezing.

<gsc-grid [dataSource]="hugeDataset()" [enableVirtualization]="true" [height]="'600px'">

Grouping & Row Drag-and-Drop

Enable users to drag-and-drop columns to group data, and reorder rows manually.

<gsc-grid [allowGrouping]="true" [allowRowDragAndDrop]="true">

Aggregates (Footer Summary)

Automatically calculate metrics (Sum, Average, Min, Max, Count) in the footer.

<gsc-grid [showFooter]="true">
  <!-- ... -->
  <gsc-aggregates>
    <gsc-aggregate>
      <gsc-columns>
        <gsc-column field="salary" type="Sum" format="C2"></gsc-column>
        <gsc-column field="salary" type="Average" format="C2"></gsc-column>
        <gsc-column field="id" type="Count"></gsc-column>
      </gsc-columns>
    </gsc-aggregate>
  </gsc-aggregates>
</gsc-grid>

Advanced Features

Editing & CRUD Operations

Enable Add, Edit, and Delete operations using the built-in dialog or inline editing UI.

<gsc-grid 
  [allowEditing]="true"
  [editSettings]="{ allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }">

Toolbar & Column Chooser

Add a top toolbar for quick actions like Export, Search, and opening the Column Chooser (which allows users to hide/show columns dynamically).

<gsc-grid 
  [toolbar]="['Add', 'Edit', 'Delete', 'Search', 'ColumnChooser', 'ExcelExport']"
  [showColumnChooser]="true">

Context Menu

Right-click on any row to open a context menu with standard or custom actions.

<gsc-grid 
  [contextMenuItems]="['AutoFit', 'SortAscending', 'SortDescending', 'Copy', 'Edit', 'Delete']">

Excel, PDF & CSV Export

Allow users to export the grid contents to external files.

<gsc-grid [allowExcelExport]="true" [allowPdfExport]="true">

Programmatic API

You can trigger grid functions directly from your component class using the #grid reference.

<gsc-grid #myGrid [dataSource]="employees()"></gsc-grid>
<button (click)="exportData()">Export Excel</button>
<button (click)="search()">Search "Manager"</button>

import { ViewChild } from '@angular/core';
import { GridComponent } from '@chandreshgamdha/gsc-angular-grid';

export class DemoComponent {
  @ViewChild('myGrid') grid!: GridComponent<any>;

  exportData() {
    this.grid.excelExport(); // Or pdfExport(), csvExport()
  }

  search() {
    this.grid.search('Manager'); 
  }

  autofit() {
    this.grid.autoFitColumns();
  }
}

Theming & CSS Variables

The grid supports dynamic theming (light, dark, material, bootstrap, tailwind, fluent).

<gsc-grid [theme]="'dark'">

You can fully customize the colors by overriding CSS variables in your styles.css:

:root {
  --gsc-primary-color: #6366f1;
  --gsc-bg-color: #ffffff;
  --gsc-text-color: #333333;
  --gsc-header-bg: #f8fafc;
  --gsc-border-color: #e2e8f0;
  --gsc-hover-bg: #f1f5f9;
  --gsc-selected-bg: #e0e7ff;
}

API Reference

Grid Properties (Inputs)

| Property | Type | Default | Description | |---|---|---|---| | dataSource | any[] | [] | The array of objects to display in the grid. | | allowPaging | boolean | false | Enables grid pagination. | | allowSorting | boolean | false | Enables sorting on columns. | | allowFiltering | boolean | false | Enables filtering on columns. | | allowGrouping | boolean | false | Enables drag-and-drop column grouping. | | allowResizing | boolean | false | Enables column width resizing. | | allowSelection | boolean | true | Enables row selection. | | enableVirtualization| boolean | true | Enables DOM virtualization for large datasets. | | enableAltRow | boolean | true | Alternates background color on odd/even rows. | | editSettings | EditSettings | {} | Configures CRUD options and edit modes. | | gridLines | 'Both' \| 'Horizontal' \| 'Vertical' \| 'None' | 'Both' | Controls the display of cell borders. | | height / width | string \| number | 'auto' | Dimensions of the grid container. |

Grid Events (Outputs)

| Event | Payload | Description | |---|---|---| | rowClick | { rowData: T, rowIndex: number, event: MouseEvent } | Emitted when a row is clicked. | | cellClick | { currentCell: any, data: T } | Emitted when a specific cell is clicked. | | sortChange | SortDescriptor[] | Emitted when the sorting configuration changes. | | filterChange | FilterDescriptor[] | Emitted when filters are applied or cleared. | | pageChange | PageSettings | Emitted when page navigation occurs. | | selectionChange | any[] | Emitted when selected rows change. | | actionBegin | GridActionEvent | Emitted before a data action (edit/delete) begins. | | actionComplete| GridActionEvent | Emitted after a data action is completed successfully. |

License

MIT © GSC Enterprise