@nitgrid/angular

@nitgrid/angular

Website · Documentation

Lightweight, high-performance data grid for Angular. Virtual scrolling to millions of rows, sorting, filtering, selection, pagination, column pinning, inline editing and CSS-variable theming.

npm install @nitgrid/angular @nitgrid/core

Peer dependencies: @angular/core and @angular/common (17 or 18). @nitgrid/core (the engine) is installed alongside as a runtime dependency.

Quick start

<nit-grid> is a standalone component — import it directly, or via NitGridModule.

import { Component } from '@angular/core';
import { NitGridComponent } from '@nitgrid/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NitGridComponent],
  template: `
    <div style="height: 480px">
      <nit-grid
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        theme="nitgrid-light"
        [pagination]="true"
        [pageSize]="25"
        rowSelection="multiple"
        (rowClicked)="onRowClicked($event)">
      </nit-grid>
    </div>
  `
})
export class AppComponent {
  columnDefs = [
    { field: 'name', headerName: 'Name', sortable: true, filterable: true },
    { field: 'email', headerName: 'Email', width: 240 },
    { field: 'role', headerName: 'Role' }
  ];
  rowData = [
    { name: 'Ada Lovelace', email: 'ada@example.com', role: 'Engineer' },
    { name: 'Alan Turing', email: 'alan@example.com', role: 'Architect' }
  ];
  onRowClicked(e: unknown) { console.log('row', e); }
}

Add a theme stylesheet to your angular.json styles array (or import it in styles.css):

"styles": [
  "node_modules/@nitgrid/angular/styles/nitgrid-light.css",
  "src/styles.css"
]

The grid fills its parent, so give the host a height.

Features

• Virtual scrolling — smooth to millions of rows.
• Sorting, filtering — per-column, Excel-style popup filters.
• Selection — single / multiple, checkbox column.
• Pagination — client-side and server-side.
• Column tools — pinning (left/right), resize, reorder, column chooser.
• Inline editing — editable text cells with change events.
• Theming — CSS-variable themes; ships light, dark and alpine.

Theming

Swap the stylesheet and the theme input together: nitgrid-light, nitgrid-dark or nitgrid-alpine. Override the CSS variables in @nitgrid/angular/styles/_variables.scss to brand it.

Enterprise

Row grouping, cell/row merge, cell comments, validation suite and Excel/PDF export are available in @nitgrid/angular-enterprise. See https://github.com/nitstack/nitgrid.

License

MIT NitStack