@data-grid-core/angular

An Angular 20 data grid. Standalone components, signals throughout, OnPush everywhere, zoneless-ready. Its peer dependencies are Angular, the CDK and lucide-angular for icons — the XLSX writer, the formula engine and the charts are all in-house.

npm install @data-grid-core/angular @angular/cdk lucide-angular

// once, in a global stylesheet
@use '@data-grid-core/angular/themes';

import { DataGrid } from '@data-grid-core/angular';
import type { DataGridColumn, DataGridOptions } from '@data-grid-core/angular';

@Component({
  imports: [DataGrid],
  template: `<data-grid [columns]="columns" [rowData]="rows" [options]="options" />`,
})
export class People {
  protected readonly columns: DataGridColumn<Employee>[] = [
    { field: 'name', headerName: 'Name', sortable: true, filter: 'text' },
    { field: 'salary', headerName: 'Salary', align: 'right', sortable: true },
  ];
  protected readonly options: DataGridOptions<Employee> = { getRowId: (row) => row.id };
}

Full documentation → · shipped inside the package, so it is also in node_modules/@data-grid-core/angular/docs.

What's in it

| | | | - | - | | Data | sorting, filtering, pagination, grouping, aggregation, pivoting, tree data, master/detail, a server-side row model | | Layout | pinned rows and columns, row and column spanning, collapsible header groups, full-width rows, resize/reorder/hide/lock | | Editing | cell and full-row editing, sync and async validation, undo/redo, dirty tracking | | Productivity | range selection, clipboard, fill handle, context menu, side panels, status bar, find, a formula engine | | Output | CSV and XLSX export with no third-party dependency, seven chart types as inline SVG, sparklines | | Production | themes incl. dark and high-contrast, the ARIA grid contract, state persistence, diagnostics, loading/empty/error overlays | | Live data | row transactions with async batching, and cell flashing for values that change while you watch | | Localization | every string translatable, a bridge to your own i18n library, locale-aware number grouping, and right-to-left layout |

Optional features — the side bar, status bar, footer, find, context menu, filter menu, tooltips, popup editors and Excel export — ship only for a consumer who names them, so a minimal grid costs 355 kB raw / 94 kB gzipped over an Angular-only baseline, and @angular/cdk/overlay is not in it at all unless you float something. See What you pay for.

Both axes are virtualized. At 100,000 rows and 40 columns the grid keeps fewer than 60 rows in the DOM and initial render costs about what it does at 10,000 — see Performance for the measured numbers.

Requirements

Angular 20+, @angular/cdk 20+, rxjs 7.4+, lucide-angular 1+. All peer dependencies. Icons need no configuration — see Theming.

Documentation

Getting started · Configuration · Columns · API reference · Examples · Known limitations

Status

0.2.x. Pre-1.0 minors may contain breaking changes; each is recorded in the changelog with its step in Migration — 0.1.0 → 0.2.0 has one (optional features became opt-in providers).

Licence

MIT.