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: Overall search with row/cell highlighting, 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}` })); } ```

Overall Search

Overall search is enabled by default. Click the search icon above the grid header, enter any value, and matching rows and cells are highlighted automatically. The popup shows the matching column names and positions itself responsively like the header menu.

To hide it: ```typescript gridConfig: UltraGridConfig = { globalSearch: false }; ```

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"> ```