翻译:

兹格里德 角19至角22: <dz-grid> 以讯号, 无区先行(zone.js也起作用),单元格和其他部分作为Angular组件或模板,没有设计系统.

安装

npm install @dzgrid/core @dzgrid/dom @dzgrid/theme @dzgrid/angular

添加 node_modules/@dzgrid/theme/dzgrid.css 页:1 styles 联 合 国 angular.json (或 @import ) (中文(简体) ).

编辑或过滤到 editors() 联 合 国 @dzgrid/dom/editors 或者说 filters() 需求 @tzslot/core 财务报告和审定财务报表 @tzslot/dom 已安装(>=2.4.0 <3),即使没有日期栏:构建解决了他们的日期代码. 没有他们,用 editors() 联 合 国 @dzgrid/dom/editors-base (仅输入一天和即时字段)和 filters() 联 合 国 @dzgrid/dom/filters-base (无) 日期表). <dz-grid [features]> 把他们当成其他人一样.

第一个网格

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;
}

文档

• 该项目的README。 。 。 .
• 角部分和包装器。 。 。 .
• 行为表 编辑 更改日志。 。 。 .

麻省理工学院执照.