@dzgrid/angular
DzGrid for Angular 19 to 22: <dz-grid> with signals, standalone,
zoneless first (zone.js works too), cells and other parts as Angular components or templates, no design system.
Install
npm install @dzgrid/core @dzgrid/dom @dzgrid/theme @dzgrid/angular
Add node_modules/@dzgrid/theme/dzgrid.css to the styles of angular.json (or @import it).
Editing or filtering with editors() of @dzgrid/dom/editors or filters() needs @tzslot/core and @tzslot/dom
installed (>=2.4.0 <3), even with no date column: the build resolves their date code. Without them, use editors()
of @dzgrid/dom/editors-base (day and instant fields typed only) and filters() of @dzgrid/dom/filters-base (no
date form). <dz-grid [features]> takes them as it takes the others.
A first grid
import { Component } from '@angular/core';
import { DzGrid } from '@dzgrid/angular';
import { FR } from '@dzgrid/dom/locales/fr';
type Patient = { id: string; name: string; born: string };
@Component({
selector: 'app-patients',
imports: [DzGrid],
template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="id" [messages]="messages" locale="fr-FR" />`,
})
export class Patients {
readonly rows: Patient[] = [{ id: '1', name: 'Amina', born: '1990-04-12' }];
readonly columns = [
{ id: 'name', header: 'Nom' },
{ id: 'born', header: 'Naissance', type: 'day' as const },
];
readonly id = (p: Patient) => p.id;
readonly messages = FR;
}
Documentation
MIT licence.