0
# Data Display Components
1

2
Components for presenting and organizing data including tables, lists, cards, tags, and data visualization elements.
3

4
## Capabilities
5

6
### Table Component
7

8
Comprehensive data table with sorting, filtering, pagination, and virtual scrolling support.
9

10
```typescript { .api }
11
/**
12
 * Table component for displaying structured data
13
 * Selector: nz-table
14
 */
15
interface NzTableComponent<T = any> {
16
  /** Table data source */
17
  nzData: readonly T[];
18
  /** Page size for pagination */
19
  nzPageSize: number;
20
  /** Current page index */
21
  nzPageIndex: number;
22
  /** Total number of records */
23
  nzTotal: number;
24
  /** Loading state */
25
  nzLoading: boolean;
26
  /** Scroll configuration */
27
  nzScroll: { x?: string | null; y?: string | null };
28
  /** Table size */
29
  nzSize: 'middle' | 'default' | 'small';
30
  /** Show pagination */
31
  nzShowPagination: boolean;
32
  /** Pagination position */
33
  nzPaginationPosition: 'top' | 'bottom' | 'both';
34
  /** Hide pagination on single page */
35
  nzHideOnSinglePage: boolean;
36
  /** Front pagination */
37
  nzFrontPagination: boolean;
38
  /** Simple pagination */
39
  nzSimple: boolean;
40
  /** Show quick jumper */
41
  nzShowQuickJumper: boolean;
42
  /** Show size changer */
43
  nzShowSizeChanger: boolean;
44
  /** Page size options */
45
  nzPageSizeOptions: number[];
46
  /** Show total function */
47
  nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }>;
48
  /** Template mode */
49
  nzTemplateMode: boolean;
50
  /** Bordered table */
51
  nzBordered: boolean;
52
  /** Width config */
53
  nzWidthConfig: string[];
54
  /** Title template */
55
  nzTitle: string | TemplateRef<void>;
56
  /** Footer template */
57
  nzFooter: string | TemplateRef<void>;
58
  /** No result template */
59
  nzNoResult: string | TemplateRef<void>;
60
  /** Virtual scroll */
61
  nzVirtualItemSize: number;
62
  /** Virtual max buffer */
63
  nzVirtualMaxBufferPx: number;
64
  /** Virtual min buffer */
65
  nzVirtualMinBufferPx: number;
66
  /** Virtual for trackBy */
67
  nzVirtualForTrackBy: TrackByFunction<T>;
68
  /** Page size change event */
69
  nzPageSizeChange: EventEmitter<number>;
70
  /** Page index change event */
71
  nzPageIndexChange: EventEmitter<number>;
72
  /** Query params change event */
73
  nzQueryParams: EventEmitter<NzTableQueryParams>;
74
  /** Current page data change */
75
  nzCurrentPageDataChange: EventEmitter<readonly T[]>;
76
}
77

78
/**
79
 * Table column directive
80
 * Selector: th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]
81
 */
82
interface NzThAddOnComponent {
83
  /** Column key */
84
  nzColumnKey: string;
85
  /** Sort function */
86
  nzSortFn: NzTableSortFn<any> | null;
87
  /** Sort order */
88
  nzSortOrder: NzTableSortOrder | null;
89
  /** Filter configurations */
90
  nzFilters: NzTableFilterList;
91
  /** Filter function */
92
  nzFilterFn: NzTableFilterFn<any> | null;
93
  /** Multiple filter */
94
  nzFilterMultiple: boolean;
95
  /** Show sort */
96
  nzShowSort: boolean;
97
  /** Show filter */
98
  nzShowFilter: boolean;
99
  /** Custom filter */
100
  nzCustomFilter: boolean;
101
  /** Sort change event */
102
  nzSortOrderChange: EventEmitter<string | null>;
103
  /** Filter change event */
104
  nzFilterChange: EventEmitter<any[] | any>;
105
}
106

107
// Types
108
type NzTableSortOrder = 'ascend' | 'descend' | null;
109
type NzTableSortFn<T> = (a: T, b: T, sortOrder?: string) => number;
110
type NzTableFilterFn<T> = (value: any, record: T) => boolean;
111

112
interface NzTableFilterList extends Array<{ text: string; value: any; byDefault?: boolean }> {}
113

114
interface NzTableQueryParams {
115
  pageIndex: number;
116
  pageSize: number;
117
  sort: Array<{ key: string; value: NzTableSortOrder }>;
118
  filter: Array<{ key: string; value: any[] }>;
119
}
120

121
// Module
122
class NzTableModule {
123
  static forRoot(): ModuleWithProviders<NzTableModule>;
124
}
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
import { NzTableModule } from 'ng-zorro-antd/table';
131

132
interface DataItem {
133
  name: string;
134
  age: number;
135
  address: string;
136
}
137

138
@Component({
139
  template: `
140
    <nz-table #basicTable [nzData]="listOfData" [nzPageSize]="10">
141
      <thead>
142
        <tr>
143
          <th nzColumnKey="name" [nzSortFn]="sortByName">Name</th>
144
          <th nzColumnKey="age" [nzSortFn]="sortByAge">Age</th>
145
          <th>Address</th>
146
          <th>Action</th>
147
        </tr>
148
      </thead>
149
      <tbody>
150
        <tr *ngFor="let data of basicTable.data">
151
          <td>{{ data.name }}</td>
152
          <td>{{ data.age }}</td>
153
          <td>{{ data.address }}</td>
154
          <td>
155
            <a (click)="editRecord(data)">Edit</a>
156
            <nz-divider nzType="vertical"></nz-divider>
157
            <a (click)="deleteRecord(data.id)">Delete</a>
158
          </td>
159
        </tr>
160
      </tbody>
161
    </nz-table>
162
  `
163
})
164
export class TableExampleComponent {
165
  listOfData: DataItem[] = [
166
    { name: 'John Brown', age: 32, address: 'New York' },
167
    { name: 'Jim Green', age: 42, address: 'London' }
168
  ];
169

170
  sortByName = (a: DataItem, b: DataItem) => a.name.localeCompare(b.name);
171
  sortByAge = (a: DataItem, b: DataItem) => a.age - b.age;
172
}
173
```
174

175
### List Component
176

177
Flexible list component for displaying series of content.
178

179
```typescript { .api }
180
/**
181
 * List component for displaying series of content
182
 * Selector: nz-list
183
 */
184
interface NzListComponent {
185
  /** Data source */
186
  nzDataSource: any[];
187
  /** Item layout */
188
  nzItemLayout: 'horizontal' | 'vertical';
189
  /** Loading state */
190
  nzLoading: boolean;
191
  /** List size */
192
  nzSize: 'large' | 'default' | 'small';
193
  /** Show split line */
194
  nzSplit: boolean;
195
  /** Bordered list */
196
  nzBordered: boolean;
197
  /** Header template */
198
  nzHeader: string | TemplateRef<void>;
199
  /** Footer template */
200
  nzFooter: string | TemplateRef<void>;
201
  /** Pagination config */
202
  nzPagination: TemplateRef<void>;
203
  /** No result template */
204
  nzNoResult: string | TemplateRef<void>;
205
  /** Item render template */
206
  nzRenderItem: TemplateRef<void>;
207
  /** Load more template */
208
  nzLoadMore: TemplateRef<void>;
209
  /** Grid config */
210
  nzGrid: object;
211
}
212

213
/**
214
 * List item component
215
 * Selector: nz-list-item
216
 */
217
interface NzListItemComponent {
218
  /** No flex layout */
219
  nzNoFlex: boolean;
220
  /** Extra content */
221
  nzExtra: TemplateRef<void>;
222
  /** Actions */
223
  nzActions: Array<TemplateRef<void>>;
224
}
225

226
/**
227
 * List item meta component
228
 * Selector: nz-list-item-meta
229
 */
230
interface NzListItemMetaComponent {
231
  /** Avatar */
232
  nzAvatar: string | TemplateRef<void>;
233
  /** Title */
234
  nzTitle: string | TemplateRef<void>;
235
  /** Description */
236
  nzDescription: string | TemplateRef<void>;
237
}
238

239
// Module
240
class NzListModule {
241
  static forRoot(): ModuleWithProviders<NzListModule>;
242
}
243
```
244

245
### Card Component
246

247
Card container for displaying related information in a structured format.
248

249
```typescript { .api }
250
/**
251
 * Card component
252
 * Selector: nz-card
253
 */
254
interface NzCardComponent {
255
  /** Bordered card */
256
  nzBordered: boolean;
257
  /** Loading state */
258
  nzLoading: boolean;
259
  /** Hoverable effect */
260
  nzHoverable: boolean;
261
  /** Body style */
262
  nzBodyStyle: NgStyleInterface;
263
  /** Cover template */
264
  nzCover: TemplateRef<void>;
265
  /** Actions */
266
  nzActions: Array<TemplateRef<void>>;
267
  /** Card type */
268
  nzType: 'inner';
269
  /** Card size */
270
  nzSize: 'default' | 'small';
271
  /** Title */
272
  nzTitle: string | TemplateRef<void>;
273
  /** Extra content */
274
  nzExtra: string | TemplateRef<void>;
275
}
276

277
/**
278
 * Card meta component
279
 * Selector: nz-card-meta
280
 */
281
interface NzCardMetaComponent {
282
  /** Title */
283
  nzTitle: string | TemplateRef<void>;
284
  /** Description */
285
  nzDescription: string | TemplateRef<void>;
286
  /** Avatar */
287
  nzAvatar: TemplateRef<void>;
288
}
289

290
// Module
291
class NzCardModule {
292
  static forRoot(): ModuleWithProviders<NzCardModule>;
293
}
294
```
295

296
### Avatar Component
297

298
Avatar component for displaying user profile pictures or initials.
299

300
```typescript { .api }
301
/**
302
 * Avatar component
303
 * Selector: nz-avatar
304
 */
305
interface NzAvatarComponent {
306
  /** Shape of avatar */
307
  nzShape: 'circle' | 'square';
308
  /** Size of avatar */
309
  nzSize: 'large' | 'small' | 'default' | number;
310
  /** Gap between text and avatar edge */
311
  nzGap: number;
312
  /** Avatar source */
313
  nzSrc: string;
314
  /** Source set for responsive images */
315
  nzSrcSet: string;
316
  /** Alt text */
317
  nzAlt: string;
318
  /** Icon type */
319
  nzIcon: string;
320
  /** Avatar text */
321
  nzText: string;
322
  /** Error event when image load fails */
323
  nzError: EventEmitter<Event>;
324
}
325

326
/**
327
 * Avatar group component
328
 * Selector: nz-avatar-group
329
 */
330
interface NzAvatarGroupComponent {
331
  /** Max count of avatars to show */
332
  nzMaxCount: number;
333
  /** Max style */
334
  nzMaxStyle: NgStyleInterface;
335
  /** Max popover placement */
336
  nzMaxPopoverPlacement: 'top' | 'bottom';
337
  /** Max popover trigger */
338
  nzMaxPopoverTrigger: 'click' | 'hover' | 'focus';
339
  /** Size of avatars in group */
340
  nzSize: 'large' | 'small' | 'default' | number;
341
}
342

343
// Module
344
class NzAvatarModule {
345
  static for Root(): ModuleWithProviders<NzAvatarModule>;
346
}
347
```
348

349
### Tag Component
350

351
Tag component for categorizing or marking.
352

353
```typescript { .api }
354
/**
355
 * Tag component
356
 * Selector: nz-tag
357
 */
358
interface NzTagComponent {
359
  /** Tag mode */
360
  nzMode: 'default' | 'closeable' | 'checkable';
361
  /** Tag color */
362
  nzColor: string;
363
  /** Checked state for checkable mode */
364
  nzChecked: boolean;
365
  /** Close event */
366
  nzOnClose: EventEmitter<MouseEvent>;
367
  /** Checked change event */
368
  nzCheckedChange: EventEmitter<boolean>;
369
  /** After close animation */
370
  nzAfterClose: EventEmitter<void>;
371
}
372

373
// Module
374
class NzTagModule {
375
  static forRoot(): ModuleWithProviders<NzTagModule>;
376
}
377
```
378

379
### Badge Component
380

381
Badge component for displaying status or count.
382

383
```typescript { .api }
384
/**
385
 * Badge component
386
 * Selector: nz-badge
387
 */
388
interface NzBadgeComponent {
389
  /** Badge count */
390
  nzCount: number | TemplateRef<void>;
391
  /** Show zero count */
392
  nzShowZero: boolean;
393
  /** Max count to show */
394
  nzOverflowCount: number;
395
  /** Show dot instead of count */
396
  nzDot: boolean;
397
  /** Badge status */
398
  nzStatus: 'success' | 'processing' | 'default' | 'error' | 'warning';
399
  /** Status text */
400
  nzText: string;
401
  /** Badge color */
402
  nzColor: string;
403
  /** Badge title */
404
  nzTitle: string | null | undefined;
405
  /** Badge offset */
406
  nzOffset: [number, number];
407
  /** Badge size */
408
  nzSize: 'default' | 'small';
409
}
410

411
// Module
412
class NzBadgeModule {
413
  static forRoot(): ModuleWithProviders<NzBadgeModule>;
414
}
415
```
416

417
### Tooltip Component
418

419
Tooltip directive for displaying contextual information.
420

421
```typescript { .api }
422
/**
423
 * Tooltip directive
424
 * Selector: [nz-tooltip]
425
 */
426
interface NzTooltipDirective {
427
  /** Tooltip title */
428
  nzTooltipTitle: string | TemplateRef<void> | null;
429
  /** Tooltip trigger */
430
  nzTooltipTrigger: 'click' | 'focus' | 'hover' | null;
431
  /** Tooltip placement */
432
  nzTooltipPlacement: string;
433
  /** Tooltip color */
434
  nzTooltipColor: string;
435
  /** Tooltip origin */
436
  nzTooltipOrigin: ElementRef<HTMLElement>;
437
  /** Tooltip visible */
438
  nzTooltipVisible: boolean;
439
  /** Mouse enter delay */
440
  nzTooltipMouseEnterDelay: number;
441
  /** Mouse leave delay */
442
  nzTooltipMouseLeaveDelay: number;
443
  /** Overlay class name */
444
  nzTooltipOverlayClassName: string;
445
  /** Overlay style */
446
  nzTooltipOverlayStyle: NgStyleInterface;
447
  /** Arrow point at center */
448
  nzTooltipArrowPointAtCenter: boolean;
449
  /** Visible change event */
450
  nzTooltipVisibleChange: EventEmitter<boolean>;
451
}
452

453
// Module
454
class NzToolTipModule {
455
  static forRoot(): ModuleWithProviders<NzToolTipModule>;
456
}
457
```
458

459
### Popover Component
460

461
Popover directive for displaying rich content in floating layer.
462

463
```typescript { .api }
464
/**
465
 * Popover directive
466
 * Selector: [nz-popover]
467
 */
468
interface NzPopoverDirective {
469
  /** Popover title */
470
  nzPopoverTitle: string | TemplateRef<void>;
471
  /** Popover content */
472
  nzPopoverContent: string | TemplateRef<void>;
473
  /** Popover trigger */
474
  nzPopoverTrigger: 'click' | 'focus' | 'hover';
475
  /** Popover placement */
476
  nzPopoverPlacement: string;
477
  /** Popover visible */
478
  nzPopoverVisible: boolean;
479
  /** Mouse enter delay */
480
  nzPopoverMouseEnterDelay: number;
481
  /** Mouse leave delay */
482
  nzPopoverMouseLeaveDelay: number;
483
  /** Overlay class name */
484
  nzPopoverOverlayClassName: string;
485
  /** Overlay style */
486
  nzPopoverOverlayStyle: NgStyleInterface;
487
  /** Arrow point at center */
488
  nzPopoverArrowPointAtCenter: boolean;
489
  /** Backdrop */
490
  nzPopoverBackdrop: boolean;
491
  /** Visible change event */
492
  nzPopoverVisibleChange: EventEmitter<boolean>;
493
}
494

495
// Module
496
class NzPopoverModule {
497
  static forRoot(): ModuleWithProviders<NzPopoverModule>;
498
}
499
```
500

501
### Timeline Component
502

503
Timeline component for displaying a series of events in chronological order.
504

505
```typescript { .api }
506
/**
507
 * Timeline component
508
 * Selector: nz-timeline
509
 */
510
interface NzTimelineComponent {
511
  /** Timeline mode */
512
  nzMode: 'left' | 'alternate' | 'right' | 'custom';
513
  /** Pending text */
514
  nzPending: string | boolean | TemplateRef<void>;
515
  /** Pending dot */
516
  nzPendingDot: string | TemplateRef<void>;
517
  /** Reverse timeline */
518
  nzReverse: boolean;
519
  /** Item position */
520
  nzItemPosition: string;
521
}
522

523
/**
524
 * Timeline item component
525
 * Selector: nz-timeline-item
526
 */
527
interface NzTimelineItemComponent {
528
  /** Item color */
529
  nzColor: string;
530
  /** Custom dot */
531
  nzDot: string | TemplateRef<void>;
532
  /** Item position */
533
  nzPosition: 'left' | 'right';
534
  /** Item label */
535
  nzLabel: string | TemplateRef<void>;
536
}
537

538
// Module
539
class NzTimelineModule {
540
  static forRoot(): ModuleWithProviders<NzTimelineModule>;
541
}
542
```
543

544
### Collapse Component
545

546
Collapse component for collapsible content panels.
547

548
```typescript { .api }
549
/**
550
 * Collapse component
551
 * Selector: nz-collapse
552
 */
553
interface NzCollapseComponent {
554
  /** Accordion mode */
555
  nzAccordion: boolean;
556
  /** Bordered style */
557
  nzBordered: boolean;
558
  /** Ghost style */
559
  nzGhost: boolean;
560
  /** Expand icon position */
561
  nzExpandIconPosition: 'left' | 'right';
562
  /** Size */
563
  nzSize: 'large' | 'default' | 'small';
564
}
565

566
/**
567
 * Collapse panel component
568
 * Selector: nz-collapse-panel
569
 */
570
interface NzCollapsePanelComponent {
571
  /** Panel active state */
572
  nzActive: boolean;
573
  /** Panel disabled state */
574
  nzDisabled: boolean;
575
  /** Show arrow */
576
  nzShowArrow: boolean;
577
  /** Panel header */
578
  nzHeader: string | TemplateRef<void>;
579
  /** Expand icon */
580
  nzExpandedIcon: string | TemplateRef<void>;
581
  /** Extra content */
582
  nzExtra: string | TemplateRef<void>;
583
  /** Active change event */
584
  nzActiveChange: EventEmitter<boolean>;
585
}
586

587
// Module
588
class NzCollapseModule {
589
  static forRoot(): ModuleWithProviders<NzCollapseModule>;
590
}
591
```
592

593
### Tree Component
594

595
Tree component for hierarchical data display.
596

597
```typescript { .api }
598
/**
599
 * Tree component
600
 * Selector: nz-tree
601
 */
602
interface NzTreeComponent {
603
  /** Tree data */
604
  nzData: NzTreeNodeOptions[] | NzTreeNode[];
605
  /** Multiple selection */
606
  nzMultiple: boolean;
607
  /** Checkable nodes */
608
  nzCheckable: boolean;
609
  /** Async load data */
610
  nzAsyncData: boolean;
611
  /** Draggable nodes */
612
  nzDraggable: boolean;
613
  /** Expand all nodes */
614
  nzExpandAll: boolean;
615
  /** Hide unmatched nodes */
616
  nzHideUnMatched: boolean;
617
  /** Select mode */
618
  nzSelectMode: boolean;
619
  /** Check strictly */
620
  nzCheckStrictly: boolean;
621
  /** Block node */
622
  nzBlockNode: boolean;
623
  /** Expand icon */
624
  nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
625
  /** Tree template */
626
  nzTreeTemplate: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
627
  /** Before drop validation */
628
  nzBeforeDrop: (confirm: NzFormatBeforeDropEvent) => Observable<boolean>;
629
  /** Virtual height */
630
  nzVirtualHeight: string | null;
631
  /** Virtual item size */
632
  nzVirtualItemSize: number;
633
  /** Virtual max buffer */
634
  nzVirtualMaxBufferPx: number;
635
  /** Virtual min buffer */
636
  nzVirtualMinBufferPx: number;
637
  /** Click event */
638
  nzClick: EventEmitter<NzFormatEmitEvent>;
639
  /** Double click event */
640
  nzDblClick: EventEmitter<NzFormatEmitEvent>;
641
  /** Context menu event */
642
  nzContextMenu: EventEmitter<NzFormatEmitEvent>;
643
  /** Check box change event */
644
  nzCheckBoxChange: EventEmitter<NzFormatEmitEvent>;
645
  /** Expand change event */
646
  nzExpandChange: EventEmitter<NzFormatEmitEvent>;
647
  /** Search value change event */
648
  nzSearchValueChange: EventEmitter<NzFormatEmitEvent>;
649
}
650

651
// Types
652
interface NzTreeNodeOptions {
653
  title: string;
654
  key: string;
655
  icon?: string;
656
  isLeaf?: boolean;
657
  checked?: boolean;
658
  selected?: boolean;
659
  expanded?: boolean;
660
  disabled?: boolean;
661
  disableCheckbox?: boolean;
662
  selectable?: boolean;
663
  children?: NzTreeNodeOptions[];
664
  [key: string]: any;
665
}
666

667
interface NzFormatEmitEvent {
668
  eventName: string;
669
  node?: NzTreeNode;
670
  event: Event;
671
  dragNode?: NzTreeNode;
672
  selectedKeys?: NzTreeNode[];
673
  checkedKeys?: NzTreeNode[];
674
  matchedKeys?: NzTreeNode[];
675
  keys?: string[];
676
  nodes?: NzTreeNode[];
677
}
678

679
// Module
680
class NzTreeModule {
681
  static forRoot(): ModuleWithProviders<NzTreeModule>;
682
}
683
```
684

685
### Calendar Component
686

687
Calendar component for date selection and display.
688

689
```typescript { .api }
690
/**
691
 * Calendar component
692
 * Selector: nz-calendar
693
 */
694
interface NzCalendarComponent {
695
  /** Calendar mode */
696
  nzMode: 'month' | 'year';
697
  /** Selected value */
698
  nzValue: Date;
699
  /** Date full cell render */
700
  nzDateCell: TemplateRef<Date>;
701
  /** Date cell render */
702
  nzDateFullCell: TemplateRef<Date>;
703
  /** Month cell render */
704
  nzMonthCell: TemplateRef<Date>;
705
  /** Month full cell render */
706
  nzMonthFullCell: TemplateRef<Date>;
707
  /** Custom header */
708
  nzCustomHeader: TemplateRef<void>;
709
  /** Disabled date */
710
  nzDisabledDate: (current: Date) => boolean;
711
  /** Panel change event */
712
  nzPanelChange: EventEmitter<{ date: Date; mode: string }>;
713
  /** Select change event */
714
  nzSelectChange: EventEmitter<Date>;
715
  /** Value change event */
716
  nzValueChange: EventEmitter<Date>;
717
  /** Mode change event */
718
  nzModeChange: EventEmitter<'month' | 'year'>;
719
}
720

721
// Module
722
class NzCalendarModule {
723
  static forRoot(): ModuleWithProviders<NzCalendarModule>;
724
}
725
```