bways-grid

A highly optimized, extreme scale enterprise Angular Data Grid clone designed for rendering 1,000,000+ rows smoothly with Server-Side-Rendering (SSR) support. Built completely from scratch using Angular CDK.

Features

• Extreme Scale Engine: Smoothly renders 1,000,000+ rows with minimal memory usage.
• SSR Ready: Strict platform checks for seamless Angular Universal integration.
• Server DataSource API: Support for infinite scroll, data chunking, and server-side pagination.
• Professional Features: Column resize, CDK DragDrop column reorder, multi-column sorting via Web Workers, row selection.
• Theming: Ships with an ag-theme-alpine equivalent style out of the box.
• Web Workers First: Heavy computing like massive Array sorting is automatically offloaded via Web Workers.

Installation

```bash npm install bways-grid @angular/cdk ```

Quick Start

Import the module or standalone component: ```typescript import { BwaysGridModule, UltraGridColumn } from 'bways-grid';

@Component({ standalone: true, imports: [BwaysGridModule], template: ` <bways-grid [columns]="columns" [rowData]="rowData"> ` }) export class AppComponent { columns: UltraGridColumn[] = [ { field: 'id', headerName: 'ID' }, { field: 'name', headerName: 'Name' } ]; rowData = Array.from({ length: 10000 }).map((_, i) => ({ id: i, name: `User ${i}` })); } ```

Publishing to NPM

```bash

Build the library (outputs to dist/bways-grid)

ng build bways-grid

Publish

cd dist/bways-grid npm login npm publish --access public ```

Server Data Source Example

```typescript export class AppComponent implements OnInit { serverDataSource: ServerDataSource;

ngOnInit() { this.serverDataSource = { getRows: (params: GetRowsParams) => { // Fetch rows remotely based on params.startRow and params.endRow return this.http.get(...); } }; } } ``` Template: ```html <bways-grid [columns]="columns" [serverDataSource]="serverDataSource"> ```