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
  • Active Filter Status Bar & 1-Click Clear
  • In-Cell Search Text Highlighting
  • Multi-Row Selection (Shift+Click Range Selection)
  • Virtualization (1M+ Rows)
  • Grouping & Row Drag-and-Drop
  • Aggregates (Footer Summary)
• Advanced Features
  • Editing & Reactive Validation
  • Excel-Grade Keyboard Navigation & Shortcuts
  • Toolbar & Column Chooser
  • Context Menu (CDK Connected Overlays)
  • Excel, PDF & CSV Export (UTF-8 BOM Protected)
• 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.
• ⌨️ Excel-Style Keyboard Navigation: Comprehensive keyboard traversal (Arrow keys, Home/End, PageUp/PageDown, Tab), cell focus rings, and aria-activedescendant.
• 📋 Shift+Click Contiguous Range Selection: Full multi-row selection with Shift+Click range, Ctrl+Click toggle, and text selection suppression.
• 🛡️ Reactive Form Validation: Field-level validation rules (required, min, max, email, pattern, custom) and dirty state detection in edit dialogs.
• 🔎 Real-Time Search Highlighting: In-cell <mark class="gsc-search-match"> highlighting matching queries with full XSS sanitization.
• 🧹 Active Filter Status Banner: Clear visibility over active filters with a 1-click "Clear All Filters" button.
• 📥 Enterprise Export Engine: Client-side CSV with UTF-8 BOM for Excel compatibility, styled XML Excel spreadsheets, and printable PDF documents.
• 🔒 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.
• 📊 Aggregates & Summary Footer: Built-in Sum, Avg, Min, Max, Count, and Custom aggregates with locale-aware currencies.
• ✍️ 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 (supports nested paths like address.city).
• headerText: Title displayed in the column header.
• width: Fixed width of the column in pixels.
• textAlign: 'left' | 'center' | 'right'.
• type: 'string' | 'number' | 'date' | 'boolean' | 'currency'.
• freeze: 'left' | 'right' (pins column to either side).
• isPrimaryKey: Identifies the primary key column for row identification and CRUD operations.
• validationRules: Configures field validation in edit dialogs.

Custom Templates

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

• #template: Custom cell rendering.
• #headerTemplate: Custom header rendering.
• #editTemplate: Custom editing input template.

<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

Enable pagination, multi-column sorting, and filtering menus.

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

Active Filter Status Bar & 1-Click Clear

When any column filter or search query is applied, an active status strip appears below the toolbar displaying active filter descriptors (e.g. Filtered by: Search "John", Status contains "Active"). Users can click Clear All Filters ✕ to reset the view in one click.

In-Cell Search Text Highlighting

When searching across the grid via the toolbar or programmatically (grid.search('query')), matching terms in cell text are highlighted using <mark class="gsc-search-match">, complete with XSS protection via Angular's DomSanitizer.

Multi-Row Selection (Shift+Click Range Selection)

Support standard enterprise row selection:

• Click: Selects single row.
• Ctrl / Cmd + Click: Toggles individual rows in/out of selection.
• Shift + Click: Selects a contiguous range of rows from the last clicked row to the current target, automatically clearing browser text selection highlights.
• Checkboxes: Dedicated checkbox column for touch and accessible multi-selection.

Virtualization (1M+ Rows)

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

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

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">
</gsc-grid>

Aggregates (Footer Summary)

Automatically calculate metrics (Sum, Average, Min, Max, Count) in the footer. Currencies automatically respect the grid's locale and currencyCode inputs.

<gsc-grid [showFooter]="true" [currencyCode]="'USD'" [locale]="'en-US'">
  <!-- ... -->
  <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 & Reactive Validation

<gsc-grid> features built-in dialog and inline CRUD workflows with real-time validation:

const columns: ColumnModel[] = [
  { field: 'id', headerText: 'ID', isPrimaryKey: true },
  {
    field: 'name',
    headerText: 'Full Name',
    allowEditing: true,
    validationRules: { required: true, minLength: 3, maxLength: 50 }
  },
  {
    field: 'email',
    headerText: 'Email',
    allowEditing: true,
    validationRules: { required: true, email: true }
  },
  {
    field: 'salary',
    headerText: 'Salary',
    type: 'currency',
    allowEditing: true,
    validationRules: { min: 30000, max: 500000 }
  }
];

Validation features:

• Asterisk (*) indicators on required fields.
• Real-time inline feedback on blur and typing.
• Dirty tracking: "Save" is automatically disabled when the form has validation errors or when an existing record has not been modified.
• Escape key automatically closes edit dialogs safely.

Excel-Grade Keyboard Navigation & Shortcuts

Navigate the grid like a spreadsheet without using the mouse:

| Shortcut | Action | |---|---| | ↑ ↓ ← → | Move active cell focus | | Home / End | Jump to first / last cell in current row | | Ctrl + Home / End | Jump to top-left / bottom-right cell in grid | | PageUp / PageDown | Jump 10 rows up / down | | Tab / Shift + Tab | Traverse to next / previous cell | | Space | Toggle row selection under active cell | | Ctrl + A | Select all records | | Ctrl + C | Copy selected rows (or active focused cell) to clipboard | | Enter | Start editing the focused row | | Esc | Cancel editing / clear selection / dismiss dialogs | | ? / F1 | Toggle in-app Keyboard Shortcuts Cheat Sheet modal |

Toolbar & Column Chooser

Add a top toolbar for quick actions like Export, Search, Add/Edit/Delete, and opening the Column Chooser:

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

Context Menu (CDK Connected Overlays)

Right-click on any row or cell to open a context menu powered by @angular/cdk/overlay. Menus automatically detect viewport boundaries so they never render off-screen.

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

Excel, PDF & CSV Export (UTF-8 BOM Protected)

Export client-side with full UTF-8 support:

• CSV Export: Automatically prepends a UTF-8 BOM (\uFEFF) so Microsoft Excel on Windows and macOS correctly displays international accents and currency symbols without character corruption.
• Excel Export: Generates native XML Spreadsheet 2003 with formatted numbers, dates, currency styles, and column auto-widths.
• Selective Row Export: Export only selected rows by passing { exportType: 'SelectedRows' }.

// Export only selected rows to Excel
grid.excelExport({ exportType: 'SelectedRows', fileName: 'selected_employees.xls' });

// Export to CSV with custom delimiter
grid.csvExport({ delimiter: ';', fileName: 'employees.csv' });

Programmatic API

<gsc-grid #myGrid [dataSource]="employees()"></gsc-grid>

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

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

  exportExcel() {
    this.grid.excelExport({ fileName: 'report.xls' });
  }

  selectRange() {
    this.grid.selectRange(0, 9); // Selects first 10 rows
  }

  search(term: string) {
    this.grid.search(term); 
  }

  clearFilters() {
    this.grid.clearAllFilters();
  }
}

Theming & CSS Variables

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

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

Override CSS variables in your global styles.css:

:root {
  --gsc-primary-color: #1976d2;
  --gsc-bg-color: #ffffff;
  --gsc-text-color: #333333;
  --gsc-header-bg: #f8fafc;
  --gsc-border-color: #e2e8f0;
  --gsc-hover-bg: #f1f5f9;
  --gsc-selected-bg: #e3f2fd;
}

License

MIT © GSC Enterprise