Data Display Components

/**
 * Table component for displaying structured data
 * Selector: nz-table
 */
interface NzTableComponent<T = any> {
  /** Table data source */
  nzData: readonly T[];
  /** Page size for pagination */
  nzPageSize: number;
  /** Current page index */
  nzPageIndex: number;
  /** Total number of records */
  nzTotal: number;
  /** Loading state */
  nzLoading: boolean;
  /** Scroll configuration */
  nzScroll: { x?: string | null; y?: string | null };
  /** Table size */
  nzSize: 'middle' | 'default' | 'small';
  /** Show pagination */
  nzShowPagination: boolean;
  /** Pagination position */
  nzPaginationPosition: 'top' | 'bottom' | 'both';
  /** Hide pagination on single page */
  nzHideOnSinglePage: boolean;
  /** Front pagination */
  nzFrontPagination: boolean;
  /** Simple pagination */
  nzSimple: boolean;
  /** Show quick jumper */
  nzShowQuickJumper: boolean;
  /** Show size changer */
  nzShowSizeChanger: boolean;
  /** Page size options */
  nzPageSizeOptions: number[];
  /** Show total function */
  nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }>;
  /** Template mode */
  nzTemplateMode: boolean;
  /** Bordered table */
  nzBordered: boolean;
  /** Width config */
  nzWidthConfig: string[];
  /** Title template */
  nzTitle: string | TemplateRef<void>;
  /** Footer template */
  nzFooter: string | TemplateRef<void>;
  /** No result template */
  nzNoResult: string | TemplateRef<void>;
  /** Virtual scroll */
  nzVirtualItemSize: number;
  /** Virtual max buffer */
  nzVirtualMaxBufferPx: number;
  /** Virtual min buffer */
  nzVirtualMinBufferPx: number;
  /** Virtual for trackBy */
  nzVirtualForTrackBy: TrackByFunction<T>;
  /** Page size change event */
  nzPageSizeChange: EventEmitter<number>;
  /** Page index change event */
  nzPageIndexChange: EventEmitter<number>;
  /** Query params change event */
  nzQueryParams: EventEmitter<NzTableQueryParams>;
  /** Current page data change */
  nzCurrentPageDataChange: EventEmitter<readonly T[]>;
}

/**
 * Table column directive
 * Selector: th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]
 */
interface NzThAddOnComponent {
  /** Column key */
  nzColumnKey: string;
  /** Sort function */
  nzSortFn: NzTableSortFn<any> | null;
  /** Sort order */
  nzSortOrder: NzTableSortOrder | null;
  /** Filter configurations */
  nzFilters: NzTableFilterList;
  /** Filter function */
  nzFilterFn: NzTableFilterFn<any> | null;
  /** Multiple filter */
  nzFilterMultiple: boolean;
  /** Show sort */
  nzShowSort: boolean;
  /** Show filter */
  nzShowFilter: boolean;
  /** Custom filter */
  nzCustomFilter: boolean;
  /** Sort change event */
  nzSortOrderChange: EventEmitter<string | null>;
  /** Filter change event */
  nzFilterChange: EventEmitter<any[] | any>;
}

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

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

interface NzTableQueryParams {
  pageIndex: number;
  pageSize: number;
  sort: Array<{ key: string; value: NzTableSortOrder }>;
  filter: Array<{ key: string; value: any[] }>;
}

// Module
class NzTableModule {
  static forRoot(): ModuleWithProviders<NzTableModule>;
}

import { NzTableModule } from 'ng-zorro-antd/table';

interface DataItem {
  name: string;
  age: number;
  address: string;
}

@Component({
  template: `
    <nz-table #basicTable [nzData]="listOfData" [nzPageSize]="10">
      <thead>
        <tr>
          <th nzColumnKey="name" [nzSortFn]="sortByName">Name</th>
          <th nzColumnKey="age" [nzSortFn]="sortByAge">Age</th>
          <th>Address</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td>{{ data.name }}</td>
          <td>{{ data.age }}</td>
          <td>{{ data.address }}</td>
          <td>
            <a (click)="editRecord(data)">Edit</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="deleteRecord(data.id)">Delete</a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  `
})
export class TableExampleComponent {
  listOfData: DataItem[] = [
    { name: 'John Brown', age: 32, address: 'New York' },
    { name: 'Jim Green', age: 42, address: 'London' }
  ];

  sortByName = (a: DataItem, b: DataItem) => a.name.localeCompare(b.name);
  sortByAge = (a: DataItem, b: DataItem) => a.age - b.age;
}

/**
 * List component for displaying series of content
 * Selector: nz-list
 */
interface NzListComponent {
  /** Data source */
  nzDataSource: any[];
  /** Item layout */
  nzItemLayout: 'horizontal' | 'vertical';
  /** Loading state */
  nzLoading: boolean;
  /** List size */
  nzSize: 'large' | 'default' | 'small';
  /** Show split line */
  nzSplit: boolean;
  /** Bordered list */
  nzBordered: boolean;
  /** Header template */
  nzHeader: string | TemplateRef<void>;
  /** Footer template */
  nzFooter: string | TemplateRef<void>;
  /** Pagination config */
  nzPagination: TemplateRef<void>;
  /** No result template */
  nzNoResult: string | TemplateRef<void>;
  /** Item render template */
  nzRenderItem: TemplateRef<void>;
  /** Load more template */
  nzLoadMore: TemplateRef<void>;
  /** Grid config */
  nzGrid: object;
}

/**
 * List item component
 * Selector: nz-list-item
 */
interface NzListItemComponent {
  /** No flex layout */
  nzNoFlex: boolean;
  /** Extra content */
  nzExtra: TemplateRef<void>;
  /** Actions */
  nzActions: Array<TemplateRef<void>>;
}

/**
 * List item meta component
 * Selector: nz-list-item-meta
 */
interface NzListItemMetaComponent {
  /** Avatar */
  nzAvatar: string | TemplateRef<void>;
  /** Title */
  nzTitle: string | TemplateRef<void>;
  /** Description */
  nzDescription: string | TemplateRef<void>;
}

// Module
class NzListModule {
  static forRoot(): ModuleWithProviders<NzListModule>;
}

/**
 * Card component
 * Selector: nz-card
 */
interface NzCardComponent {
  /** Bordered card */
  nzBordered: boolean;
  /** Loading state */
  nzLoading: boolean;
  /** Hoverable effect */
  nzHoverable: boolean;
  /** Body style */
  nzBodyStyle: NgStyleInterface;
  /** Cover template */
  nzCover: TemplateRef<void>;
  /** Actions */
  nzActions: Array<TemplateRef<void>>;
  /** Card type */
  nzType: 'inner';
  /** Card size */
  nzSize: 'default' | 'small';
  /** Title */
  nzTitle: string | TemplateRef<void>;
  /** Extra content */
  nzExtra: string | TemplateRef<void>;
}

/**
 * Card meta component
 * Selector: nz-card-meta
 */
interface NzCardMetaComponent {
  /** Title */
  nzTitle: string | TemplateRef<void>;
  /** Description */
  nzDescription: string | TemplateRef<void>;
  /** Avatar */
  nzAvatar: TemplateRef<void>;
}

// Module
class NzCardModule {
  static forRoot(): ModuleWithProviders<NzCardModule>;
}

/**
 * Avatar component
 * Selector: nz-avatar
 */
interface NzAvatarComponent {
  /** Shape of avatar */
  nzShape: 'circle' | 'square';
  /** Size of avatar */
  nzSize: 'large' | 'small' | 'default' | number;
  /** Gap between text and avatar edge */
  nzGap: number;
  /** Avatar source */
  nzSrc: string;
  /** Source set for responsive images */
  nzSrcSet: string;
  /** Alt text */
  nzAlt: string;
  /** Icon type */
  nzIcon: string;
  /** Avatar text */
  nzText: string;
  /** Error event when image load fails */
  nzError: EventEmitter<Event>;
}

/**
 * Avatar group component
 * Selector: nz-avatar-group
 */
interface NzAvatarGroupComponent {
  /** Max count of avatars to show */
  nzMaxCount: number;
  /** Max style */
  nzMaxStyle: NgStyleInterface;
  /** Max popover placement */
  nzMaxPopoverPlacement: 'top' | 'bottom';
  /** Max popover trigger */
  nzMaxPopoverTrigger: 'click' | 'hover' | 'focus';
  /** Size of avatars in group */
  nzSize: 'large' | 'small' | 'default' | number;
}

// Module
class NzAvatarModule {
  static for Root(): ModuleWithProviders<NzAvatarModule>;
}

/**
 * Tag component
 * Selector: nz-tag
 */
interface NzTagComponent {
  /** Tag mode */
  nzMode: 'default' | 'closeable' | 'checkable';
  /** Tag color */
  nzColor: string;
  /** Checked state for checkable mode */
  nzChecked: boolean;
  /** Close event */
  nzOnClose: EventEmitter<MouseEvent>;
  /** Checked change event */
  nzCheckedChange: EventEmitter<boolean>;
  /** After close animation */
  nzAfterClose: EventEmitter<void>;
}

// Module
class NzTagModule {
  static forRoot(): ModuleWithProviders<NzTagModule>;
}

/**
 * Badge component
 * Selector: nz-badge
 */
interface NzBadgeComponent {
  /** Badge count */
  nzCount: number | TemplateRef<void>;
  /** Show zero count */
  nzShowZero: boolean;
  /** Max count to show */
  nzOverflowCount: number;
  /** Show dot instead of count */
  nzDot: boolean;
  /** Badge status */
  nzStatus: 'success' | 'processing' | 'default' | 'error' | 'warning';
  /** Status text */
  nzText: string;
  /** Badge color */
  nzColor: string;
  /** Badge title */
  nzTitle: string | null | undefined;
  /** Badge offset */
  nzOffset: [number, number];
  /** Badge size */
  nzSize: 'default' | 'small';
}

// Module
class NzBadgeModule {
  static forRoot(): ModuleWithProviders<NzBadgeModule>;
}

/**
 * Tooltip directive
 * Selector: [nz-tooltip]
 */
interface NzTooltipDirective {
  /** Tooltip title */
  nzTooltipTitle: string | TemplateRef<void> | null;
  /** Tooltip trigger */
  nzTooltipTrigger: 'click' | 'focus' | 'hover' | null;
  /** Tooltip placement */
  nzTooltipPlacement: string;
  /** Tooltip color */
  nzTooltipColor: string;
  /** Tooltip origin */
  nzTooltipOrigin: ElementRef<HTMLElement>;
  /** Tooltip visible */
  nzTooltipVisible: boolean;
  /** Mouse enter delay */
  nzTooltipMouseEnterDelay: number;
  /** Mouse leave delay */
  nzTooltipMouseLeaveDelay: number;
  /** Overlay class name */
  nzTooltipOverlayClassName: string;
  /** Overlay style */
  nzTooltipOverlayStyle: NgStyleInterface;
  /** Arrow point at center */
  nzTooltipArrowPointAtCenter: boolean;
  /** Visible change event */
  nzTooltipVisibleChange: EventEmitter<boolean>;
}

// Module
class NzToolTipModule {
  static forRoot(): ModuleWithProviders<NzToolTipModule>;
}

/**
 * Popover directive
 * Selector: [nz-popover]
 */
interface NzPopoverDirective {
  /** Popover title */
  nzPopoverTitle: string | TemplateRef<void>;
  /** Popover content */
  nzPopoverContent: string | TemplateRef<void>;
  /** Popover trigger */
  nzPopoverTrigger: 'click' | 'focus' | 'hover';
  /** Popover placement */
  nzPopoverPlacement: string;
  /** Popover visible */
  nzPopoverVisible: boolean;
  /** Mouse enter delay */
  nzPopoverMouseEnterDelay: number;
  /** Mouse leave delay */
  nzPopoverMouseLeaveDelay: number;
  /** Overlay class name */
  nzPopoverOverlayClassName: string;
  /** Overlay style */
  nzPopoverOverlayStyle: NgStyleInterface;
  /** Arrow point at center */
  nzPopoverArrowPointAtCenter: boolean;
  /** Backdrop */
  nzPopoverBackdrop: boolean;
  /** Visible change event */
  nzPopoverVisibleChange: EventEmitter<boolean>;
}

// Module
class NzPopoverModule {
  static forRoot(): ModuleWithProviders<NzPopoverModule>;
}

/**
 * Timeline component
 * Selector: nz-timeline
 */
interface NzTimelineComponent {
  /** Timeline mode */
  nzMode: 'left' | 'alternate' | 'right' | 'custom';
  /** Pending text */
  nzPending: string | boolean | TemplateRef<void>;
  /** Pending dot */
  nzPendingDot: string | TemplateRef<void>;
  /** Reverse timeline */
  nzReverse: boolean;
  /** Item position */
  nzItemPosition: string;
}

/**
 * Timeline item component
 * Selector: nz-timeline-item
 */
interface NzTimelineItemComponent {
  /** Item color */
  nzColor: string;
  /** Custom dot */
  nzDot: string | TemplateRef<void>;
  /** Item position */
  nzPosition: 'left' | 'right';
  /** Item label */
  nzLabel: string | TemplateRef<void>;
}

// Module
class NzTimelineModule {
  static forRoot(): ModuleWithProviders<NzTimelineModule>;
}

/**
 * Collapse component
 * Selector: nz-collapse
 */
interface NzCollapseComponent {
  /** Accordion mode */
  nzAccordion: boolean;
  /** Bordered style */
  nzBordered: boolean;
  /** Ghost style */
  nzGhost: boolean;
  /** Expand icon position */
  nzExpandIconPosition: 'left' | 'right';
  /** Size */
  nzSize: 'large' | 'default' | 'small';
}

/**
 * Collapse panel component
 * Selector: nz-collapse-panel
 */
interface NzCollapsePanelComponent {
  /** Panel active state */
  nzActive: boolean;
  /** Panel disabled state */
  nzDisabled: boolean;
  /** Show arrow */
  nzShowArrow: boolean;
  /** Panel header */
  nzHeader: string | TemplateRef<void>;
  /** Expand icon */
  nzExpandedIcon: string | TemplateRef<void>;
  /** Extra content */
  nzExtra: string | TemplateRef<void>;
  /** Active change event */
  nzActiveChange: EventEmitter<boolean>;
}

// Module
class NzCollapseModule {
  static forRoot(): ModuleWithProviders<NzCollapseModule>;
}

/**
 * Tree component
 * Selector: nz-tree
 */
interface NzTreeComponent {
  /** Tree data */
  nzData: NzTreeNodeOptions[] | NzTreeNode[];
  /** Multiple selection */
  nzMultiple: boolean;
  /** Checkable nodes */
  nzCheckable: boolean;
  /** Async load data */
  nzAsyncData: boolean;
  /** Draggable nodes */
  nzDraggable: boolean;
  /** Expand all nodes */
  nzExpandAll: boolean;
  /** Hide unmatched nodes */
  nzHideUnMatched: boolean;
  /** Select mode */
  nzSelectMode: boolean;
  /** Check strictly */
  nzCheckStrictly: boolean;
  /** Block node */
  nzBlockNode: boolean;
  /** Expand icon */
  nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
  /** Tree template */
  nzTreeTemplate: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
  /** Before drop validation */
  nzBeforeDrop: (confirm: NzFormatBeforeDropEvent) => Observable<boolean>;
  /** Virtual height */
  nzVirtualHeight: string | null;
  /** Virtual item size */
  nzVirtualItemSize: number;
  /** Virtual max buffer */
  nzVirtualMaxBufferPx: number;
  /** Virtual min buffer */
  nzVirtualMinBufferPx: number;
  /** Click event */
  nzClick: EventEmitter<NzFormatEmitEvent>;
  /** Double click event */
  nzDblClick: EventEmitter<NzFormatEmitEvent>;
  /** Context menu event */
  nzContextMenu: EventEmitter<NzFormatEmitEvent>;
  /** Check box change event */
  nzCheckBoxChange: EventEmitter<NzFormatEmitEvent>;
  /** Expand change event */
  nzExpandChange: EventEmitter<NzFormatEmitEvent>;
  /** Search value change event */
  nzSearchValueChange: EventEmitter<NzFormatEmitEvent>;
}

// Types
interface NzTreeNodeOptions {
  title: string;
  key: string;
  icon?: string;
  isLeaf?: boolean;
  checked?: boolean;
  selected?: boolean;
  expanded?: boolean;
  disabled?: boolean;
  disableCheckbox?: boolean;
  selectable?: boolean;
  children?: NzTreeNodeOptions[];
  [key: string]: any;
}

interface NzFormatEmitEvent {
  eventName: string;
  node?: NzTreeNode;
  event: Event;
  dragNode?: NzTreeNode;
  selectedKeys?: NzTreeNode[];
  checkedKeys?: NzTreeNode[];
  matchedKeys?: NzTreeNode[];
  keys?: string[];
  nodes?: NzTreeNode[];
}

// Module
class NzTreeModule {
  static forRoot(): ModuleWithProviders<NzTreeModule>;
}

/**
 * Calendar component
 * Selector: nz-calendar
 */
interface NzCalendarComponent {
  /** Calendar mode */
  nzMode: 'month' | 'year';
  /** Selected value */
  nzValue: Date;
  /** Date full cell render */
  nzDateCell: TemplateRef<Date>;
  /** Date cell render */
  nzDateFullCell: TemplateRef<Date>;
  /** Month cell render */
  nzMonthCell: TemplateRef<Date>;
  /** Month full cell render */
  nzMonthFullCell: TemplateRef<Date>;
  /** Custom header */
  nzCustomHeader: TemplateRef<void>;
  /** Disabled date */
  nzDisabledDate: (current: Date) => boolean;
  /** Panel change event */
  nzPanelChange: EventEmitter<{ date: Date; mode: string }>;
  /** Select change event */
  nzSelectChange: EventEmitter<Date>;
  /** Value change event */
  nzValueChange: EventEmitter<Date>;
  /** Mode change event */
  nzModeChange: EventEmitter<'month' | 'year'>;
}

// Module
class NzCalendarModule {
  static forRoot(): ModuleWithProviders<NzCalendarModule>;
}