• Table表格
    • 何时使用
    • 如何使用
      • 高度定制
      • 组件增强
      • 数据处理
    • 代码演示
    • API
      • 单独引入此组件
      • nz-tablecomponent
      • th
      • td
      • thead
      • tr
      • [nz-virtual-scroll]directive
    • 注意

    Table表格

    展示行列数据。

    何时使用

    • 当有大量结构化的数据需要展现时；
    • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

    如何使用

    Table 组件同时具备了易用性和高度可定制性

    高度定制

    在 nz-table 组件中完整的暴露了 W3C标准 <table> 的所有组成部分，你可以像使用 table 元素一样使用 nz-table ，根据依据业务需求，使用者可以自由的控制任何一个部分的样式、内容、逻辑和事件绑定。

    组件增强

    在 nz-table, thead, th, td 等多个暴露的元素上，组件提供了增强语法，经过配置之后可以很方便的实现多选、过滤、排序、固定列、固定表头、服务端分页等功能。

    数据处理

    传入[nzData]中的数据，经过处理之后，可以通过 模板变量 获取当前展示表格部分的数据，再使用 *ngFor 依据需求将数据渲染。

    1. <nz-table #basicTable [nzData]="dataSet">
    2.   <thead>
    3.     <tr>
    4.       <th>Name</th>
    5.       <th>Age</th>
    6.       <th>Address</th>
    7.       <th>Action</th>
    8.     </tr>
    9.   </thead>
    10.   <tbody>
    11.     <tr *ngFor="let data of basicTable.data">
    12.       <td>{{data.name}}</td>
    13.       <td>{{data.age}}</td>
    14.       <td>{{data.address}}</td>
    15.       <td>
    16.         <a>Action 一 {{data.name}}</a>
    17.         <nz-divider nzType="vertical"></nz-divider>
    18.         <a>Delete</a>
    19.       </td>
    20.     </tr>
    21.   </tbody>
    22. </nz-table>

    代码演示

    Table表格 - 图1

    基本用法

    简单的表格，最后一列是各种操作。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-basic',
    5.   template: `
    6.     <nz-table #basicTable [nzData]="listOfData">
    7.       <thead>
    8.         <tr>
    9.           <th>Name</th>
    10.           <th>Age</th>
    11.           <th>Address</th>
    12.           <th>Action</th>
    13.         </tr>
    14.       </thead>
    15.       <tbody>
    16.         <tr *ngFor="let data of basicTable.data">
    17.           <td>{{ data.name }}</td>
    18.           <td>{{ data.age }}</td>
    19.           <td>{{ data.address }}</td>
    20.           <td>
    21.             <a>Action 一 {{ data.name }}</a>
    22.             <nz-divider nzType="vertical"></nz-divider>
    23.             <a>Delete</a>
    24.           </td>
    25.         </tr>
    26.       </tbody>
    27.     </nz-table>
    28.   `
    29. })
    30. export class NzDemoTableBasicComponent {
    31.   listOfData = [
    32.     {
    33.       key: '1',
    34.       name: 'John Brown',
    35.       age: 32,
    36.       address: 'New York No. 1 Lake Park'
    37.     },
    38.     {
    39.       key: '2',
    40.       name: 'Jim Green',
    41.       age: 42,
    42.       address: 'London No. 1 Lake Park'
    43.     },
    44.     {
    45.       key: '3',
    46.       name: 'Joe Black',
    47.       age: 32,
    48.       address: 'Sidney No. 1 Lake Park'
    49.     }
    50.   ];
    51. }

    Table表格 - 图2

    选择和操作

    第一列是联动的选择框，增加 nzShowCheckbox 后，th 获得和 nz-checkbox 一样的功能，选择后进行操作，完成后清空选择，请注意：数据逻辑需要自行控制。

    1. import { Component, OnInit } from '@angular/core';
    3. export interface Data {
    4.   id: number;
    5.   name: string;
    6.   age: number;
    7.   address: string;
    8.   disabled: boolean;
    9. }
    11. @Component({
    12.   selector: 'nz-demo-table-row-selection-and-operation',
    13.   template: `
    14.     <div class="operate">
    15.       <button
    16.         nz-button
    17.         [disabled]="numberOfChecked === 0"
    18.         [nzType]="'primary'"
    19.         [nzLoading]="isOperating"
    20.         (click)="operateData()"
    21.       >
    22.         Reload
    23.       </button>
    24.       <span *ngIf="numberOfChecked">Selected {{ numberOfChecked }} items</span>
    25.     </div>
    26.     <nz-table
    27.       #rowSelectionTable
    28.       nzShowPagination
    29.       nzShowSizeChanger
    30.       [nzData]="listOfAllData"
    31.       (nzCurrentPageDataChange)="currentPageDataChange($event)"
    32.     >
    33.       <thead>
    34.         <tr>
    35.           <th
    36.             nzShowCheckbox
    37.             [(nzChecked)]="isAllDisplayDataChecked"
    38.             [nzIndeterminate]="isIndeterminate"
    39.             (nzCheckedChange)="checkAll($event)"
    40.           ></th>
    41.           <th>Name</th>
    42.           <th>Age</th>
    43.           <th>Address</th>
    44.         </tr>
    45.       </thead>
    46.       <tbody>
    47.         <tr *ngFor="let data of rowSelectionTable.data">
    48.           <td
    49.             nzShowCheckbox
    50.             [(nzChecked)]="mapOfCheckedId[data.id]"
    51.             [nzDisabled]="data.disabled"
    52.             (nzCheckedChange)="refreshStatus()"
    53.           ></td>
    54.           <td>{{ data.name }}</td>
    55.           <td>{{ data.age }}</td>
    56.           <td>{{ data.address }}</td>
    57.         </tr>
    58.       </tbody>
    59.     </nz-table>
    60.   `,
    61.   styles: [
    62.     `
    63.       .operate {
    64.         margin-bottom: 16px;
    65.       }
    67.       .operate span {
    68.         margin-left: 8px;
    69.       }
    70.     `
    71.   ]
    72. })
    73. export class NzDemoTableRowSelectionAndOperationComponent implements OnInit {
    74.   isAllDisplayDataChecked = false;
    75.   isOperating = false;
    76.   isIndeterminate = false;
    77.   listOfDisplayData: Data[] = [];
    78.   listOfAllData: Data[] = [];
    79.   mapOfCheckedId: { [key: string]: boolean } = {};
    80.   numberOfChecked = 0;
    82.   currentPageDataChange($event: Data[]): void {
    83.     this.listOfDisplayData = $event;
    84.     this.refreshStatus();
    85.   }
    87.   refreshStatus(): void {
    88.     this.isAllDisplayDataChecked = this.listOfDisplayData
    89.       .filter(item => !item.disabled)
    90.       .every(item => this.mapOfCheckedId[item.id]);
    91.     this.isIndeterminate =
    92.       this.listOfDisplayData.filter(item => !item.disabled).some(item => this.mapOfCheckedId[item.id]) &&
    93.       !this.isAllDisplayDataChecked;
    94.     this.numberOfChecked = this.listOfAllData.filter(item => this.mapOfCheckedId[item.id]).length;
    95.   }
    97.   checkAll(value: boolean): void {
    98.     this.listOfDisplayData.filter(item => !item.disabled).forEach(item => (this.mapOfCheckedId[item.id] = value));
    99.     this.refreshStatus();
    100.   }
    102.   operateData(): void {
    103.     this.isOperating = true;
    104.     setTimeout(() => {
    105.       this.listOfAllData.forEach(item => (this.mapOfCheckedId[item.id] = false));
    106.       this.refreshStatus();
    107.       this.isOperating = false;
    108.     }, 1000);
    109.   }
    111.   ngOnInit(): void {
    112.     for (let i = 0; i < 100; i++) {
    113.       this.listOfAllData.push({
    114.         id: i,
    115.         name: `Edward King ${i}`,
    116.         age: 32,
    117.         address: `London, Park Lane no. ${i}`,
    118.         disabled: i % 2 === 0
    119.       });
    120.     }
    121.   }
    122. }

    Table表格 - 图3

    自定义选择项

    通过 nzShowRowSelection 与 nzSelections 自定义选择项.

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-row-selection-custom',
    5.   template: `
    6.     <nz-table
    7.       #rowSelectionTable
    8.       nzShowSizeChanger
    9.       [nzData]="listOfAllData"
    10.       (nzCurrentPageDataChange)="currentPageDataChange($event)"
    11.     >
    12.       <thead>
    13.         <tr>
    14.           <th
    15.             nzShowCheckbox
    16.             nzShowRowSelection
    17.             [nzSelections]="listOfSelection"
    18.             [(nzChecked)]="isAllDisplayDataChecked"
    19.             [nzIndeterminate]="isIndeterminate"
    20.             (nzCheckedChange)="checkAll($event)"
    21.           ></th>
    22.           <th>Name</th>
    23.           <th>Age</th>
    24.           <th>Address</th>
    25.         </tr>
    26.       </thead>
    27.       <tbody>
    28.         <tr *ngFor="let data of rowSelectionTable.data">
    29.           <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
    30.           <td>{{ data.name }}</td>
    31.           <td>{{ data.age }}</td>
    32.           <td>{{ data.address }}</td>
    33.         </tr>
    34.       </tbody>
    35.     </nz-table>
    36.   `
    37. })
    38. export class NzDemoTableRowSelectionCustomComponent implements OnInit {
    39.   listOfSelection = [
    40.     {
    41.       text: 'Select All Row',
    42.       onSelect: () => {
    43.         this.checkAll(true);
    44.       }
    45.     },
    46.     {
    47.       text: 'Select Odd Row',
    48.       onSelect: () => {
    49.         this.listOfDisplayData.forEach((data, index) => (this.mapOfCheckedId[data.id] = index % 2 !== 0));
    50.         this.refreshStatus();
    51.       }
    52.     },
    53.     {
    54.       text: 'Select Even Row',
    55.       onSelect: () => {
    56.         this.listOfDisplayData.forEach((data, index) => (this.mapOfCheckedId[data.id] = index % 2 === 0));
    57.         this.refreshStatus();
    58.       }
    59.     }
    60.   ];
    61.   isAllDisplayDataChecked = false;
    62.   isIndeterminate = false;
    63.   listOfDisplayData: any[] = [];
    64.   listOfAllData: any[] = [];
    65.   mapOfCheckedId: { [key: string]: boolean } = {};
    67.   currentPageDataChange($event: Array<{ id: number; name: string; age: number; address: string }>): void {
    68.     this.listOfDisplayData = $event;
    69.     this.refreshStatus();
    70.   }
    72.   refreshStatus(): void {
    73.     this.isAllDisplayDataChecked = this.listOfDisplayData.every(item => this.mapOfCheckedId[item.id]);
    74.     this.isIndeterminate =
    75.       this.listOfDisplayData.some(item => this.mapOfCheckedId[item.id]) && !this.isAllDisplayDataChecked;
    76.   }
    78.   checkAll(value: boolean): void {
    79.     this.listOfDisplayData.forEach(item => (this.mapOfCheckedId[item.id] = value));
    80.     this.refreshStatus();
    81.   }
    83.   ngOnInit(): void {
    84.     for (let i = 0; i < 100; i++) {
    85.       this.listOfAllData.push({
    86.         id: i,
    87.         name: `Edward King ${i}`,
    88.         age: 32,
    89.         address: `London, Park Lane no. ${i}`
    90.       });
    91.     }
    92.   }
    93. }

    Table表格 - 图4

    筛选和排序

    对某一列数据进行筛选，通过指定 th 的 nzShowFilter 属性来展示筛选菜单， 使用 nzFilters 属性来指定筛选选项，nzFilterChange 用于获取当前选中的选项，nzFilterMultiple 用于指定多选和单选。

    对某一列数据进行排序，通过指定 th 的 nzShowSort 属性来展示排序按钮，使用 nzSortKey 来指定排序的 key，在 thead 上通过 nzSortChange 来获取排序改变事件，通过 nzSingleSort 来指定是否单列排序。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-head',
    5.   template: `
    6.     <nz-table #filterTable [nzData]="listOfDisplayData">
    7.       <thead (nzSortChange)="sort($event)" nzSingleSort>
    8.         <tr>
    9.           <th
    10.             nzShowSort
    11.             nzSortKey="name"
    12.             nzShowFilter
    13.             [nzFilters]="listOfName"
    14.             (nzFilterChange)="filter($event, searchAddress)"
    15.           >
    16.             Name
    17.           </th>
    18.           <th nzShowSort nzSortKey="age">Age</th>
    19.           <th
    20.             nzShowSort
    21.             nzSortKey="address"
    22.             nzShowFilter
    23.             [nzFilterMultiple]="false"
    24.             [nzFilters]="listOfAddress"
    25.             (nzFilterChange)="filter(listOfSearchName, $event)"
    26.           >
    27.             Address
    28.           </th>
    29.         </tr>
    30.       </thead>
    31.       <tbody>
    32.         <tr *ngFor="let data of filterTable.data">
    33.           <td>{{ data.name }}</td>
    34.           <td>{{ data.age }}</td>
    35.           <td>{{ data.address }}</td>
    36.         </tr>
    37.       </tbody>
    38.     </nz-table>
    39.   `
    40. })
    41. export class NzDemoTableHeadComponent {
    42.   sortName: string | null = null;
    43.   sortValue: string | null = null;
    44.   searchAddress: string;
    45.   listOfName = [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }];
    46.   listOfAddress = [{ text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' }];
    47.   listOfSearchName: string[] = [];
    48.   listOfData: Array<{ name: string; age: number; address: string; [key: string]: string | number }> = [
    49.     {
    50.       name: 'John Brown',
    51.       age: 32,
    52.       address: 'New York No. 1 Lake Park'
    53.     },
    54.     {
    55.       name: 'Jim Green',
    56.       age: 42,
    57.       address: 'London No. 1 Lake Park'
    58.     },
    59.     {
    60.       name: 'Joe Black',
    61.       age: 32,
    62.       address: 'Sidney No. 1 Lake Park'
    63.     },
    64.     {
    65.       name: 'Jim Red',
    66.       age: 32,
    67.       address: 'London No. 2 Lake Park'
    68.     }
    69.   ];
    70.   listOfDisplayData: Array<{ name: string; age: number; address: string; [key: string]: string | number }> = [
    71.     ...this.listOfData
    72.   ];
    74.   sort(sort: { key: string; value: string }): void {
    75.     this.sortName = sort.key;
    76.     this.sortValue = sort.value;
    77.     this.search();
    78.   }
    80.   filter(listOfSearchName: string[], searchAddress: string): void {
    81.     this.listOfSearchName = listOfSearchName;
    82.     this.searchAddress = searchAddress;
    83.     this.search();
    84.   }
    86.   search(): void {
    87.     /** filter data **/
    88.     const filterFunc = (item: { name: string; age: number; address: string }) =>
    89.       (this.searchAddress ? item.address.indexOf(this.searchAddress) !== -1 : true) &&
    90.       (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true);
    91.     const data = this.listOfData.filter(item => filterFunc(item));
    92.     /** sort data **/
    93.     if (this.sortName && this.sortValue) {
    94.       this.listOfDisplayData = data.sort((a, b) =>
    95.         this.sortValue === 'ascend'
    96.           ? a[this.sortName!] > b[this.sortName!]
    97.             ? 1
    98.             : -1
    99.           : b[this.sortName!] > a[this.sortName!]
    100.           ? 1
    101.           : -1
    102.       );
    103.     } else {
    104.       this.listOfDisplayData = data;
    105.     }
    106.   }
    107. }

    Table表格 - 图5

    默认筛选

    通过设置 filter 对象的 { byDefault: true } 属性来默认启用一个筛选器。注意，你必须同时自行设置过滤后应当展示的列表项，为了保持数据流的清晰和数据的一致性，组件库不会为你做这项工作。详情请见 demo。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-default-filter',
    5.   template: `
    6.     <nz-table #filterTable [nzData]="listOfDisplayData">
    7.       <thead (nzSortChange)="sort($event)" nzSingleSort>
    8.         <tr>
    9.           <th
    10.             nzShowSort
    11.             nzSortKey="name"
    12.             nzShowFilter
    13.             [nzFilters]="listOfName"
    14.             (nzFilterChange)="filter($event, searchAddress)"
    15.           >
    16.             Name
    17.           </th>
    18.           <th nzShowSort nzSortKey="age">Age</th>
    19.           <th
    20.             nzShowSort
    21.             nzSortKey="address"
    22.             nzShowFilter
    23.             [nzFilterMultiple]="false"
    24.             [nzFilters]="listOfAddress"
    25.             (nzFilterChange)="filter(listOfSearchName, $event)"
    26.           >
    27.             Address
    28.           </th>
    29.         </tr>
    30.       </thead>
    31.       <tbody>
    32.         <tr *ngFor="let data of filterTable.data">
    33.           <td>{{ data.name }}</td>
    34.           <td>{{ data.age }}</td>
    35.           <td>{{ data.address }}</td>
    36.         </tr>
    37.       </tbody>
    38.     </nz-table>
    39.   `
    40. })
    41. export class NzDemoTableDefaultFilterComponent {
    42.   listOfName = [{ text: 'Joe', value: 'Joe', byDefault: true }, { text: 'Jim', value: 'Jim' }];
    43.   listOfAddress = [{ text: 'London', value: 'London', byDefault: true }, { text: 'Sidney', value: 'Sidney' }];
    44.   listOfSearchName = ['Joe']; // You need to change it as well!
    45.   sortName: string | null = null;
    46.   sortValue: string | null = null;
    47.   searchAddress = 'London';
    48.   listOfData: Array<{ name: string; age: number; address: string; [key: string]: string | number }> = [
    49.     {
    50.       name: 'John Brown',
    51.       age: 32,
    52.       address: 'New York No. 1 Lake Park'
    53.     },
    54.     {
    55.       name: 'Jim Green',
    56.       age: 42,
    57.       address: 'London No. 1 Lake Park'
    58.     },
    59.     {
    60.       name: 'Joe Black',
    61.       age: 32,
    62.       address: 'Sidney No. 1 Lake Park'
    63.     },
    64.     {
    65.       name: 'Jim Red',
    66.       age: 32,
    67.       address: 'London No. 2 Lake Park'
    68.     }
    69.   ];
    70.   // You need to change it as well!
    71.   listOfDisplayData: Array<{ name: string; age: number; address: string; [key: string]: string | number }> = [];
    73.   sort(sort: { key: string; value: string }): void {
    74.     this.sortName = sort.key;
    75.     this.sortValue = sort.value;
    76.     this.search();
    77.   }
    79.   filter(listOfSearchName: string[], searchAddress: string): void {
    80.     console.log(listOfSearchName, searchAddress);
    81.     this.listOfSearchName = listOfSearchName;
    82.     this.searchAddress = searchAddress;
    83.     this.search();
    84.   }
    86.   search(): void {
    87.     /** filter data **/
    88.     const filterFunc = (item: { name: string; age: number; address: string }) =>
    89.       (this.searchAddress ? item.address.indexOf(this.searchAddress) !== -1 : true) &&
    90.       (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true);
    91.     const data = this.listOfData.filter(item => filterFunc(item));
    92.     /** sort data **/
    93.     if (this.sortName && this.sortValue) {
    94.       this.listOfDisplayData = data.sort((a, b) =>
    95.         this.sortValue === 'ascend'
    96.           ? a[this.sortName!] > b[this.sortName!]
    97.             ? 1
    98.             : -1
    99.           : b[this.sortName!] > a[this.sortName!]
    100.           ? 1
    101.           : -1
    102.       );
    103.     } else {
    104.       this.listOfDisplayData = data;
    105.     }
    106.   }
    107. }

    Table表格 - 图6

    可控的筛选和排序

    使用受控属性对筛选状态进行控制。

    1. 在th 中定义了 nzSort 属性即视为受控模式。
    2. 通过手动指定 nzSort 来指定当前列的排序状态
    3. 通过 th 的 nzSortChange 事件来获取当前列排序状态的改变
    4. 不可与 thead 中的 nzSortChange 或 nzSingleSort 同时使用
    1. import { Component } from '@angular/core';
    3. interface Data {
    4.   name: string;
    5.   age: number;
    6.   address: string;
    8.   [key: string]: any;
    9. }
    11. @Component({
    12.   selector: 'nz-demo-table-reset-filter',
    13.   template: `
    14.     <div class="table-operations">
    15.       <button nz-button (click)="sort('age', 'descend')">Sort age</button>
    16.       <button nz-button (click)="resetFilters()">Clear filters</button>
    17.       <button nz-button (click)="resetSortAndFilters()">Clear filters and sorters</button>
    18.     </div>
    19.     <nz-table #filterTable [nzData]="listOfDisplayData">
    20.       <thead>
    21.         <tr>
    22.           <th
    23.             nzShowSort
    24.             nzShowFilter
    25.             [(nzSort)]="mapOfSort.name"
    26.             (nzSortChange)="sort('name', $event)"
    27.             [nzFilters]="listOfFilterName"
    28.             (nzFilterChange)="search($event, listOfSearchAddress)"
    29.           >
    30.             Name
    31.           </th>
    32.           <th nzShowSort [(nzSort)]="mapOfSort.age" (nzSortChange)="sort('age', $event)">Age</th>
    33.           <th
    34.             nzShowSort
    35.             nzShowFilter
    36.             [(nzSort)]="mapOfSort.address"
    37.             (nzSortChange)="sort('address', $event)"
    38.             [nzFilters]="listOfFilterAddress"
    39.             (nzFilterChange)="search(listOfSearchName, $event)"
    40.           >
    41.             Address
    42.           </th>
    43.         </tr>
    44.       </thead>
    45.       <tbody>
    46.         <tr *ngFor="let data of filterTable.data">
    47.           <td>{{ data.name }}</td>
    48.           <td>{{ data.age }}</td>
    49.           <td>{{ data.address }}</td>
    50.         </tr>
    51.       </tbody>
    52.     </nz-table>
    53.   `,
    54.   styles: [
    55.     `
    56.       .table-operations {
    57.         margin-bottom: 16px;
    58.       }
    60.       .table-operations > button {
    61.         margin-right: 8px;
    62.       }
    63.     `
    64.   ]
    65. })
    66. export class NzDemoTableResetFilterComponent {
    67.   listOfSearchName: string[] = [];
    68.   listOfSearchAddress: string[] = [];
    69.   listOfFilterName = [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }];
    70.   listOfFilterAddress = [{ text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' }];
    71.   listOfData: Data[] = [
    72.     {
    73.       name: 'John Brown',
    74.       age: 32,
    75.       address: 'New York No. 1 Lake Park'
    76.     },
    77.     {
    78.       name: 'Jim Green',
    79.       age: 42,
    80.       address: 'London No. 1 Lake Park'
    81.     },
    82.     {
    83.       name: 'Joe Black',
    84.       age: 32,
    85.       address: 'Sidney No. 1 Lake Park'
    86.     },
    87.     {
    88.       name: 'Jim Red',
    89.       age: 32,
    90.       address: 'London No. 2 Lake Park'
    91.     }
    92.   ];
    93.   listOfDisplayData = [...this.listOfData];
    94.   mapOfSort: { [key: string]: any } = {
    95.     name: null,
    96.     age: null,
    97.     address: null
    98.   };
    99.   sortName: string | null = null;
    100.   sortValue: string | null = null;
    102.   sort(sortName: string, value: string): void {
    103.     this.sortName = sortName;
    104.     this.sortValue = value;
    105.     for (const key in this.mapOfSort) {
    106.       this.mapOfSort[key] = key === sortName ? value : null;
    107.     }
    108.     this.search(this.listOfSearchName, this.listOfSearchAddress);
    109.   }
    111.   search(listOfSearchName: string[], listOfSearchAddress: string[]): void {
    112.     this.listOfSearchName = listOfSearchName;
    113.     this.listOfSearchAddress = listOfSearchAddress;
    114.     const filterFunc = (item: Data) =>
    115.       (this.listOfSearchAddress.length
    116.         ? this.listOfSearchAddress.some(address => item.address.indexOf(address) !== -1)
    117.         : true) &&
    118.       (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true);
    119.     const listOfData = this.listOfData.filter((item: Data) => filterFunc(item));
    120.     if (this.sortName && this.sortValue) {
    121.       this.listOfDisplayData = listOfData.sort((a, b) =>
    122.         this.sortValue === 'ascend'
    123.           ? a[this.sortName!] > b[this.sortName!]
    124.             ? 1
    125.             : -1
    126.           : b[this.sortName!] > a[this.sortName!]
    127.           ? 1
    128.           : -1
    129.       );
    130.     } else {
    131.       this.listOfDisplayData = listOfData;
    132.     }
    133.   }
    135.   resetFilters(): void {
    136.     this.listOfFilterName = [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }];
    137.     this.listOfFilterAddress = [{ text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' }];
    138.     this.listOfSearchName = [];
    139.     this.listOfSearchAddress = [];
    140.     this.search(this.listOfSearchName, this.listOfSearchAddress);
    141.   }
    143.   resetSortAndFilters(): void {
    144.     this.sortName = null;
    145.     this.sortValue = null;
    146.     this.mapOfSort = {
    147.       name: null,
    148.       age: null,
    149.       address: null
    150.     };
    151.     this.resetFilters();
    152.     this.search(this.listOfSearchName, this.listOfSearchAddress);
    153.   }
    154. }

    Table表格 - 图7

    自定义筛选菜单

    通过 nz-dropdown、nzFilters 和 nzFilterChange 定义自定义的列筛选功能，并实现一个搜索列的示例，实际使用中建议将搜索组件进行单独封装。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-custom-filter-panel',
    5.   template: `
    6.     <nz-table #nzTable [nzData]="listOfDisplayData">
    7.       <thead>
    8.         <tr>
    9.           <th nzCustomFilter>
    10.             Name
    11.             <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
    12.               <i
    13.                 nz-icon
    14.                 nzType="search"
    15.                 class="ant-table-filter-icon"
    16.                 [class.ant-table-filter-open]="dropdown.nzVisible"
    17.                 nz-dropdown
    18.               ></i>
    19.               <div class="search-box">
    20.                 <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
    21.                 <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
    22.                   Search
    23.                 </button>
    24.                 <button nz-button nzSize="small" (click)="reset()">Reset</button>
    25.               </div>
    26.             </nz-dropdown>
    27.           </th>
    28.           <th>Age</th>
    29.           <th nzShowFilter [nzFilters]="listOfFilterAddress" (nzFilterChange)="filterAddressChange($event)">Address</th>
    30.         </tr>
    31.       </thead>
    32.       <tbody>
    33.         <tr *ngFor="let data of nzTable.data">
    34.           <td>{{ data.name }}</td>
    35.           <td>{{ data.age }}</td>
    36.           <td>{{ data.address }}</td>
    37.         </tr>
    38.       </tbody>
    39.     </nz-table>
    40.   `,
    41.   styles: [
    42.     `
    43.       .search-box {
    44.         padding: 8px;
    45.       }
    47.       .search-box input {
    48.         width: 188px;
    49.         margin-bottom: 8px;
    50.         display: block;
    51.       }
    53.       .search-box button {
    54.         width: 90px;
    55.       }
    57.       .search-button {
    58.         margin-right: 8px;
    59.       }
    60.     `
    61.   ]
    62. })
    63. export class NzDemoTableCustomFilterPanelComponent {
    64.   searchValue = '';
    65.   sortName: string | null = null;
    66.   sortValue: string | null = null;
    67.   listOfFilterAddress = [{ text: 'London', value: 'London' }, { text: 'Sidney', value: 'Sidney' }];
    68.   listOfSearchAddress: string[] = [];
    69.   listOfData: Array<{ name: string; age: number; address: string; [key: string]: string | number }> = [
    70.     {
    71.       name: 'John Brown',
    72.       age: 32,
    73.       address: 'New York No. 1 Lake Park'
    74.     },
    75.     {
    76.       name: 'Jim Green',
    77.       age: 42,
    78.       address: 'London No. 1 Lake Park'
    79.     },
    80.     {
    81.       name: 'Joe Black',
    82.       age: 32,
    83.       address: 'Sidney No. 1 Lake Park'
    84.     },
    85.     {
    86.       name: 'Jim Red',
    87.       age: 32,
    88.       address: 'London No. 2 Lake Park'
    89.     }
    90.   ];
    91.   listOfDisplayData = [...this.listOfData];
    93.   reset(): void {
    94.     this.searchValue = '';
    95.     this.search();
    96.   }
    98.   sort(sortName: string, value: string): void {
    99.     this.sortName = sortName;
    100.     this.sortValue = value;
    101.     this.search();
    102.   }
    104.   filterAddressChange(value: string[]): void {
    105.     this.listOfSearchAddress = value;
    106.     this.search();
    107.   }
    109.   search(): void {
    110.     const filterFunc = (item: { name: string; age: number; address: string }) => {
    111.       return (
    112.         (this.listOfSearchAddress.length
    113.           ? this.listOfSearchAddress.some(address => item.address.indexOf(address) !== -1)
    114.           : true) && item.name.indexOf(this.searchValue) !== -1
    115.       );
    116.     };
    117.     const data = this.listOfData.filter((item: { name: string; age: number; address: string }) => filterFunc(item));
    118.     this.listOfDisplayData = data.sort((a, b) =>
    119.       this.sortValue === 'ascend'
    120.         ? a[this.sortName!] > b[this.sortName!]
    121.           ? 1
    122.           : -1
    123.         : b[this.sortName!] > a[this.sortName!]
    124.         ? 1
    125.         : -1
    126.     );
    127.   }
    128. }

    Table表格 - 图8

    远程加载数据

    这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。

    注意，此示例使用 模拟接口，展示数据可能不准确，请打开网络面板查看请求。

    1. import { HttpClient, HttpParams } from '@angular/common/http';
    2. import { Component, Injectable, OnInit } from '@angular/core';
    3. import { Observable } from 'rxjs';
    5. @Injectable()
    6. export class RandomUserService {
    7.   randomUserUrl = 'https://api.randomuser.me/';
    9.   getUsers(
    10.     pageIndex: number = 1,
    11.     pageSize: number = 10,
    12.     sortField: string,
    13.     sortOrder: string,
    14.     genders: string[]
    15.   ): Observable<{}> {
    16.     let params = new HttpParams()
    17.       .append('page', `${pageIndex}`)
    18.       .append('results', `${pageSize}`)
    19.       .append('sortField', sortField)
    20.       .append('sortOrder', sortOrder);
    21.     genders.forEach(gender => {
    22.       params = params.append('gender', gender);
    23.     });
    24.     return this.http.get(`${this.randomUserUrl}`, {
    25.       params
    26.     });
    27.   }
    29.   constructor(private http: HttpClient) {}
    30. }
    32. @Component({
    33.   selector: 'nz-demo-table-ajax',
    34.   providers: [RandomUserService],
    35.   template: `
    36.     <nz-table
    37.       #ajaxTable
    38.       nzShowSizeChanger
    39.       [nzFrontPagination]="false"
    40.       [nzData]="listOfData"
    41.       [nzLoading]="loading"
    42.       [nzTotal]="total"
    43.       [(nzPageIndex)]="pageIndex"
    44.       [(nzPageSize)]="pageSize"
    45.       (nzPageIndexChange)="searchData()"
    46.       (nzPageSizeChange)="searchData(true)"
    47.     >
    48.       <thead (nzSortChange)="sort($event)" nzSingleSort>
    49.         <tr>
    50.           <th nzShowSort nzSortKey="name">Name</th>
    51.           <th nzShowFilter [nzFilters]="filterGender" (nzFilterChange)="updateFilter($event)">Gender</th>
    52.           <th nzShowSort nzSortKey="email"><span>Email</span></th>
    53.         </tr>
    54.       </thead>
    55.       <tbody>
    56.         <tr *ngFor="let data of ajaxTable.data">
    57.           <td>{{ data.name.first }} {{ data.name.last }}</td>
    58.           <td>{{ data.gender }}</td>
    59.           <td>{{ data.email }}</td>
    60.         </tr>
    61.       </tbody>
    62.     </nz-table>
    63.   `
    64. })
    65. export class NzDemoTableAjaxComponent implements OnInit {
    66.   pageIndex = 1;
    67.   pageSize = 10;
    68.   total = 1;
    69.   listOfData = [];
    70.   loading = true;
    71.   sortValue: string | null = null;
    72.   sortKey: string | null = null;
    73.   filterGender = [{ text: 'male', value: 'male' }, { text: 'female', value: 'female' }];
    74.   searchGenderList: string[] = [];
    76.   sort(sort: { key: string; value: string }): void {
    77.     this.sortKey = sort.key;
    78.     this.sortValue = sort.value;
    79.     this.searchData();
    80.   }
    82.   constructor(private randomUserService: RandomUserService) {}
    84.   searchData(reset: boolean = false): void {
    85.     if (reset) {
    86.       this.pageIndex = 1;
    87.     }
    88.     this.loading = true;
    89.     this.randomUserService
    90.       .getUsers(this.pageIndex, this.pageSize, this.sortKey!, this.sortValue!, this.searchGenderList)
    91.       .subscribe((data: any) => {
    92.         this.loading = false;
    93.         this.total = 200;
    94.         this.listOfData = data.results;
    95.       });
    96.   }
    98.   updateFilter(value: string[]): void {
    99.     this.searchGenderList = value;
    100.     this.searchData(true);
    101.   }
    103.   ngOnInit(): void {
    104.     this.searchData();
    105.   }
    106. }

    Table表格 - 图9

    紧凑型

    两种紧凑型的列表，小型列表只用于对话框内。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-size',
    5.   template: `
    6.     <h4>Middle size table</h4>
    7.     <nz-table #middleTable nzSize="middle" [nzData]="data">
    8.       <thead>
    9.         <tr>
    10.           <th>Name</th>
    11.           <th>Age</th>
    12.           <th>Address</th>
    13.         </tr>
    14.       </thead>
    15.       <tbody>
    16.         <tr *ngFor="let data of middleTable.data">
    17.           <td>{{ data.name }}</td>
    18.           <td>{{ data.age }}</td>
    19.           <td>{{ data.address }}</td>
    20.         </tr>
    21.       </tbody>
    22.     </nz-table>
    23.     <h4>Small size table</h4>
    24.     <nz-table #smallTable nzSize="small" [nzData]="data">
    25.       <thead>
    26.         <tr>
    27.           <th>Name</th>
    28.           <th>Age</th>
    29.           <th>Address</th>
    30.         </tr>
    31.       </thead>
    32.       <tbody>
    33.         <tr *ngFor="let data of smallTable.data">
    34.           <td>{{ data.name }}</td>
    35.           <td>{{ data.age }}</td>
    36.           <td>{{ data.address }}</td>
    37.         </tr>
    38.       </tbody>
    39.     </nz-table>
    40.   `,
    41.   styles: [
    42.     `
    43.       h4 {
    44.         margin-bottom: 16px;
    45.       }
    46.     `
    47.   ]
    48. })
    49. export class NzDemoTableSizeComponent {
    50.   data = [
    51.     {
    52.       key: '1',
    53.       name: 'John Brown',
    54.       age: 32,
    55.       address: 'New York No. 1 Lake Park'
    56.     },
    57.     {
    58.       key: '2',
    59.       name: 'Jim Green',
    60.       age: 42,
    61.       address: 'London No. 1 Lake Park'
    62.     },
    63.     {
    64.       key: '3',
    65.       name: 'Joe Black',
    66.       age: 32,
    67.       address: 'Sidney No. 1 Lake Park'
    68.     }
    69.   ];
    70. }

    Table表格 - 图10

    带边框

    添加表格边框线，页头和页脚。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-bordered',
    5.   template: `
    6.     <nz-table #borderedTable nzBordered nzFooter="Footer" nzTitle="Header" [nzData]="dataSet">
    7.       <thead>
    8.         <tr>
    9.           <th>Name</th>
    10.           <th>Age</th>
    11.           <th>Address</th>
    12.         </tr>
    13.       </thead>
    14.       <tbody>
    15.         <tr *ngFor="let data of borderedTable.data">
    16.           <td>{{ data.name }}</td>
    17.           <td>{{ data.age }}</td>
    18.           <td>{{ data.address }}</td>
    19.         </tr>
    20.       </tbody>
    21.     </nz-table>
    22.   `
    23. })
    24. export class NzDemoTableBorderedComponent {
    25.   dataSet = [
    26.     {
    27.       key: '1',
    28.       name: 'John Brown',
    29.       age: 32,
    30.       address: 'New York No. 1 Lake Park'
    31.     },
    32.     {
    33.       key: '2',
    34.       name: 'Jim Green',
    35.       age: 42,
    36.       address: 'London No. 1 Lake Park'
    37.     },
    38.     {
    39.       key: '3',
    40.       name: 'Joe Black',
    41.       age: 32,
    42.       address: 'Sidney No. 1 Lake Park'
    43.     }
    44.   ];
    45. }

    Table表格 - 图11

    可展开

    当表格内容较多不能一次性完全展示时，可以通过 td 上的 nzExpand 属性展开。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-expand',
    5.   template: `
    6.     <nz-table #nzTable [nzData]="listOfData">
    7.       <thead>
    8.         <tr>
    9.           <th nzShowExpand></th>
    10.           <th>Name</th>
    11.           <th>Age</th>
    12.           <th>Address</th>
    13.         </tr>
    14.       </thead>
    15.       <tbody>
    16.         <ng-template ngFor let-data [ngForOf]="nzTable.data">
    17.           <tr>
    18.             <td nzShowExpand [(nzExpand)]="mapOfExpandData[data.id]"></td>
    19.             <td>{{ data.name }}</td>
    20.             <td>{{ data.age }}</td>
    21.             <td>{{ data.address }}</td>
    22.           </tr>
    23.           <tr [nzExpand]="mapOfExpandData[data.id]">
    24.             <td></td>
    25.             <td colspan="3">{{ data.description }}</td>
    26.           </tr>
    27.         </ng-template>
    28.       </tbody>
    29.     </nz-table>
    30.   `,
    31.   styles: []
    32. })
    33. export class NzDemoTableExpandComponent {
    34.   mapOfExpandData: { [key: string]: boolean } = {};
    35.   listOfData = [
    36.     {
    37.       id: 1,
    38.       name: 'John Brown',
    39.       age: 32,
    40.       expand: false,
    41.       address: 'New York No. 1 Lake Park',
    42.       description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
    43.     },
    44.     {
    45.       id: 2,
    46.       name: 'Jim Green',
    47.       age: 42,
    48.       expand: false,
    49.       address: 'London No. 1 Lake Park',
    50.       description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
    51.     },
    52.     {
    53.       id: 3,
    54.       name: 'Joe Black',
    55.       age: 32,
    56.       expand: false,
    57.       address: 'Sidney No. 1 Lake Park',
    58.       description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
    59.     }
    60.   ];
    61. }

    Table表格 - 图12

    表格行/列合并

    像 W3C标准 <table> 一样，使用 colspan 和 rowspan 合并行/列。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-colspan-rowspan',
    5.   template: `
    6.     <nz-table #colSpanTable [nzData]="listOfData" nzBordered>
    7.       <thead>
    8.         <tr>
    9.           <th>Name</th>
    10.           <th>Age</th>
    11.           <th colspan="2">Home phone</th>
    12.           <th>Address</th>
    13.         </tr>
    14.       </thead>
    15.       <tbody>
    16.         <tr *ngFor="let data of colSpanTable.data; index as i">
    17.           <td>{{ data.name }}</td>
    18.           <td [attr.colspan]="i === 4 ? 5 : 1">{{ data.age }}</td>
    19.           <td [attr.rowspan]="i === 2 ? 2 : 1" *ngIf="i !== 3 && i !== 4">{{ data.tel }}</td>
    20.           <td *ngIf="i !== 4">{{ data.phone }}</td>
    21.           <td *ngIf="i !== 4">{{ data.address }}</td>
    22.         </tr>
    23.       </tbody>
    24.     </nz-table>
    25.   `
    26. })
    27. export class NzDemoTableColspanRowspanComponent {
    28.   listOfData = [
    29.     {
    30.       key: '1',
    31.       name: 'John Brown',
    32.       age: 32,
    33.       tel: '0571-22098909',
    34.       phone: 18889898989,
    35.       address: 'New York No. 1 Lake Park'
    36.     },
    37.     {
    38.       key: '2',
    39.       name: 'Jim Green',
    40.       tel: '0571-22098333',
    41.       phone: 18889898888,
    42.       age: 42,
    43.       address: 'London No. 1 Lake Park'
    44.     },
    45.     {
    46.       key: '3',
    47.       name: 'Joe Black',
    48.       age: 32,
    49.       tel: '0575-22098909',
    50.       phone: 18900010002,
    51.       address: 'Sidney No. 1 Lake Park'
    52.     },
    53.     {
    54.       key: '4',
    55.       name: 'Jim Red',
    56.       age: 18,
    57.       tel: '0575-22098909',
    58.       phone: 18900010002,
    59.       address: 'London No. 2 Lake Park'
    60.     },
    61.     {
    62.       key: '5',
    63.       name: 'Jake White',
    64.       age: 18,
    65.       tel: '0575-22098909',
    66.       phone: 18900010002,
    67.       address: 'Dublin No. 2 Lake Park'
    68.     }
    69.   ];
    70. }

    Table表格 - 图13

    树形数据展示

    表格支持树形数据的展示，可以通过设置 nzIndentSize 以控制每一层的缩进宽度，本例子中提供了树与数组之间的转换函数，实际业务中请根据需求修改。

    1. import { Component, OnInit } from '@angular/core';
    3. export interface TreeNodeInterface {
    4.   key: number;
    5.   name: string;
    6.   age: number;
    7.   level: number;
    8.   expand: boolean;
    9.   address: string;
    10.   children?: TreeNodeInterface[];
    11. }
    13. @Component({
    14.   selector: 'nz-demo-table-expand-children',
    15.   template: `
    16.     <nz-table #expandTable [nzData]="listOfMapData">
    17.       <thead>
    18.         <tr>
    19.           <th nzWidth="40%">Name</th>
    20.           <th nzWidth="30%">Age</th>
    21.           <th>Address</th>
    22.         </tr>
    23.       </thead>
    24.       <tbody>
    25.         <ng-container *ngFor="let data of expandTable.data">
    26.           <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
    27.             <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
    28.               <td
    29.                 [nzIndentSize]="item.level * 20"
    30.                 [nzShowExpand]="!!item.children"
    31.                 [(nzExpand)]="item.expand"
    32.                 (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)"
    33.               >
    34.                 {{ item.name }}
    35.               </td>
    36.               <td>{{ item.age }}</td>
    37.               <td>{{ item.address }}</td>
    38.             </tr>
    39.           </ng-container>
    40.         </ng-container>
    41.       </tbody>
    42.     </nz-table>
    43.   `
    44. })
    45. export class NzDemoTableExpandChildrenComponent implements OnInit {
    46.   listOfMapData = [
    47.     {
    48.       key: 1,
    49.       name: 'John Brown sr.',
    50.       age: 60,
    51.       address: 'New York No. 1 Lake Park',
    52.       children: [
    53.         {
    54.           key: 11,
    55.           name: 'John Brown',
    56.           age: 42,
    57.           address: 'New York No. 2 Lake Park'
    58.         },
    59.         {
    60.           key: 12,
    61.           name: 'John Brown jr.',
    62.           age: 30,
    63.           address: 'New York No. 3 Lake Park',
    64.           children: [
    65.             {
    66.               key: 121,
    67.               name: 'Jimmy Brown',
    68.               age: 16,
    69.               address: 'New York No. 3 Lake Park'
    70.             }
    71.           ]
    72.         },
    73.         {
    74.           key: 13,
    75.           name: 'Jim Green sr.',
    76.           age: 72,
    77.           address: 'London No. 1 Lake Park',
    78.           children: [
    79.             {
    80.               key: 131,
    81.               name: 'Jim Green',
    82.               age: 42,
    83.               address: 'London No. 2 Lake Park',
    84.               children: [
    85.                 {
    86.                   key: 1311,
    87.                   name: 'Jim Green jr.',
    88.                   age: 25,
    89.                   address: 'London No. 3 Lake Park'
    90.                 },
    91.                 {
    92.                   key: 1312,
    93.                   name: 'Jimmy Green sr.',
    94.                   age: 18,
    95.                   address: 'London No. 4 Lake Park'
    96.                 }
    97.               ]
    98.             }
    99.           ]
    100.         }
    101.       ]
    102.     },
    103.     {
    104.       key: 2,
    105.       name: 'Joe Black',
    106.       age: 32,
    107.       address: 'Sidney No. 1 Lake Park'
    108.     }
    109.   ];
    110.   mapOfExpandedData: { [key: string]: TreeNodeInterface[] } = {};
    112.   collapse(array: TreeNodeInterface[], data: TreeNodeInterface, $event: boolean): void {
    113.     if ($event === false) {
    114.       if (data.children) {
    115.         data.children.forEach(d => {
    116.           const target = array.find(a => a.key === d.key)!;
    117.           target.expand = false;
    118.           this.collapse(array, target, false);
    119.         });
    120.       } else {
    121.         return;
    122.       }
    123.     }
    124.   }
    126.   convertTreeToList(root: object): TreeNodeInterface[] {
    127.     const stack: any[] = [];
    128.     const array: any[] = [];
    129.     const hashMap = {};
    130.     stack.push({ ...root, level: 0, expand: false });
    132.     while (stack.length !== 0) {
    133.       const node = stack.pop();
    134.       this.visitNode(node, hashMap, array);
    135.       if (node.children) {
    136.         for (let i = node.children.length - 1; i >= 0; i--) {
    137.           stack.push({ ...node.children[i], level: node.level + 1, expand: false, parent: node });
    138.         }
    139.       }
    140.     }
    142.     return array;
    143.   }
    145.   visitNode(node: TreeNodeInterface, hashMap: { [key: string]: any }, array: TreeNodeInterface[]): void {
    146.     if (!hashMap[node.key]) {
    147.       hashMap[node.key] = true;
    148.       array.push(node);
    149.     }
    150.   }
    152.   ngOnInit(): void {
    153.     this.listOfMapData.forEach(item => {
    154.       this.mapOfExpandedData[item.key] = this.convertTreeToList(item);
    155.     });
    156.   }
    157. }

    Table表格 - 图14

    固定表头

    方便一页内展示大量数据。

    需要指定 th 的 nzWidth 属性，否则列头和内容可能不对齐。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-fixed-header',
    5.   template: `
    6.     <nz-table #headerTable [nzData]="listOfData" [nzPageSize]="50" [nzScroll]="{ y: '240px' }">
    7.       <thead>
    8.         <tr>
    9.           <th nzWidth="150px">Name</th>
    10.           <th nzWidth="150px">Age</th>
    11.           <th>Address</th>
    12.         </tr>
    13.       </thead>
    14.       <tbody>
    15.         <tr *ngFor="let data of headerTable.data">
    16.           <td>{{ data.name }}</td>
    17.           <td>{{ data.age }}</td>
    18.           <td>{{ data.address }}</td>
    19.         </tr>
    20.       </tbody>
    21.     </nz-table>
    22.   `
    23. })
    24. export class NzDemoTableFixedHeaderComponent implements OnInit {
    25.   listOfData: any[] = [];
    27.   ngOnInit(): void {
    28.     for (let i = 0; i < 100; i++) {
    29.       this.listOfData.push({
    30.         name: `Edward King ${i}`,
    31.         age: 32,
    32.         address: `London, Park Lane no. ${i}`
    33.       });
    34.     }
    35.   }
    36. }

    Table表格 - 图15

    固定列

    对于列数很多的数据，可以使用 nzLeft 和 nzRight 固定前后的列，横向滚动查看其它数据，需要和 nzScroll.x 配合使用。

    固定列使用了 sticky 属性，浏览器支持情况可以参考这里。

    若列头与内容不对齐或出现列重复，请指定每一列的 th 的宽度 nzWidth。

    建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 nzScroll.x。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-fixed-columns',
    5.   template: `
    6.     <nz-table #columnTable [nzData]="listOfData" [nzScroll]="{ x: '1100px' }">
    7.       <thead>
    8.         <tr>
    9.           <th nzWidth="100px" nzLeft="0px">Full Name</th>
    10.           <th nzWidth="100px" nzLeft="100px">Age</th>
    11.           <th nzWidth="100px">Column 1</th>
    12.           <th nzWidth="100px">Column 2</th>
    13.           <th nzWidth="100px">Column 3</th>
    14.           <th nzWidth="100px">Column 4</th>
    15.           <th nzWidth="100px">Column 5</th>
    16.           <th nzWidth="100px">Column 6</th>
    17.           <th nzWidth="100px">Column 7</th>
    18.           <th nzRight="100px" nzWidth="100px">Column 8</th>
    19.           <th nzWidth="100px" nzRight="0px">Action</th>
    20.         </tr>
    21.       </thead>
    22.       <tbody>
    23.         <tr *ngFor="let data of columnTable.data">
    24.           <td nzLeft="0px">{{ data.name }}</td>
    25.           <td nzLeft="100px">{{ data.age }}</td>
    26.           <td>{{ data.address }}</td>
    27.           <td>{{ data.address }}</td>
    28.           <td>{{ data.address }}</td>
    29.           <td>{{ data.address }}</td>
    30.           <td>{{ data.address }}</td>
    31.           <td>{{ data.address }}</td>
    32.           <td>{{ data.address }}</td>
    33.           <td nzRight="100px">{{ data.address }}</td>
    34.           <td nzRight="0px">
    35.             <a>action</a>
    36.           </td>
    37.         </tr>
    38.       </tbody>
    39.     </nz-table>
    40.   `
    41. })
    42. export class NzDemoTableFixedColumnsComponent {
    43.   listOfData = [
    44.     {
    45.       key: '1',
    46.       name: 'John Brown',
    47.       age: 32,
    48.       address: 'New York'
    49.     },
    50.     {
    51.       key: '2',
    52.       name: 'Jim Green',
    53.       age: 40,
    54.       address: 'London'
    55.     }
    56.   ];
    57. }

    Table表格 - 图16

    固定头和列

    适合同时展示有大量数据和数据列。

    固定列使用了 sticky 属性，浏览器支持情况可以参考这里。

    若列头与内容不对齐或出现列重复，请指定列的宽度 nzWidth。

    建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 nzScroll.x。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-fixed-columns-header',
    5.   template: `
    6.     <nz-table #fixedTable [nzData]="listOfData" [nzScroll]="{ x: '1150px', y: '240px' }">
    7.       <thead>
    8.         <tr>
    9.           <th nzWidth="150px" nzLeft="0px">Full Name</th>
    10.           <th nzWidth="100px" nzLeft="150px">Age</th>
    11.           <th nzWidth="100px">Column 1</th>
    12.           <th nzWidth="100px">Column 2</th>
    13.           <th nzWidth="100px">Column 3</th>
    14.           <th nzWidth="100px">Column 4</th>
    15.           <th nzWidth="100px">Column 5</th>
    16.           <th nzWidth="100px">Column 6</th>
    17.           <th nzWidth="100px">Column 7</th>
    18.           <th nzWidth="100px">Column 8</th>
    19.           <th nzWidth="100px" nzRight="0px">Action</th>
    20.         </tr>
    21.       </thead>
    22.       <tbody>
    23.         <tr *ngFor="let data of fixedTable.data">
    24.           <td nzLeft="0px">{{ data.name }}</td>
    25.           <td nzLeft="150px">{{ data.age }}</td>
    26.           <td>{{ data.address }}</td>
    27.           <td>{{ data.address }}</td>
    28.           <td>{{ data.address }}</td>
    29.           <td>{{ data.address }}</td>
    30.           <td>{{ data.address }}</td>
    31.           <td>{{ data.address }}</td>
    32.           <td>{{ data.address }}</td>
    33.           <td>{{ data.address }}</td>
    34.           <td nzRight="0px">
    35.             <a>action</a>
    36.           </td>
    37.         </tr>
    38.       </tbody>
    39.     </nz-table>
    40.   `
    41. })
    42. export class NzDemoTableFixedColumnsHeaderComponent implements OnInit {
    43.   listOfData: any[] = [];
    45.   ngOnInit(): void {
    46.     for (let i = 0; i < 100; i++) {
    47.       this.listOfData.push({
    48.         name: `Edward King ${i}`,
    49.         age: 32,
    50.         address: `London`
    51.       });
    52.     }
    53.   }
    54. }

    Table表格 - 图17

    表头分组

    当使用分组表头时，th 的 nzWidth 方式不再适用，使用 nzWidthConfig 来设定每个分组的宽度

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-grouping-columns',
    5.   template: `
    6.     <nz-table
    7.       #groupingTable
    8.       [nzData]="listOfDisplayData"
    9.       nzBordered
    10.       nzSize="middle"
    11.       [nzWidthConfig]="widthConfig"
    12.       [nzScroll]="scrollConfig"
    13.     >
    14.       <thead>
    15.         <tr>
    16.           <th rowspan="4" nzLeft="0px" nzShowFilter [nzFilters]="filterName" (nzFilterChange)="search($event)">Name</th>
    17.           <th colspan="4">Other</th>
    18.           <th colspan="2">Company</th>
    19.           <th rowspan="4" nzRight="0px">Gender</th>
    20.         </tr>
    21.         <tr>
    22.           <th rowspan="3" nzShowSort [(nzSort)]="sortValue" (nzSortChange)="search(searchName)">Age</th>
    23.           <th colspan="3">Address</th>
    24.           <th rowspan="3">Company Address</th>
    25.           <th rowspan="3">Company Name</th>
    26.         </tr>
    27.         <tr>
    28.           <th rowspan="2">Street</th>
    29.           <th colspan="2">Block</th>
    30.         </tr>
    31.         <tr>
    32.           <th>Building</th>
    33.           <th>Door No.</th>
    34.         </tr>
    35.       </thead>
    36.       <tbody>
    37.         <tr *ngFor="let data of groupingTable.data">
    38.           <td nzLeft="0px">{{ data.name }}</td>
    39.           <td>{{ data.age }}</td>
    40.           <td>{{ data.street }}</td>
    41.           <td>{{ data.building }}</td>
    42.           <td>{{ data.number }}</td>
    43.           <td>{{ data.companyAddress }}</td>
    44.           <td>{{ data.companyName }}</td>
    45.           <td nzRight="0px">{{ data.gender }}</td>
    46.         </tr>
    47.       </tbody>
    48.     </nz-table>
    49.   `
    50. })
    51. export class NzDemoTableGroupingColumnsComponent implements OnInit {
    52.   widthConfig = ['100px', '200px', '200px', '100px', '100px', '200px', '200px', '100px'];
    53.   scrollConfig = { x: '1200px', y: '240px' };
    54.   listOfDisplayData: any[] = [];
    55.   listOfData: any[] = [];
    56.   sortValue: string | null = null;
    57.   filterName = [{ text: 'Joe', value: 'Joe' }, { text: 'John', value: 'John' }];
    58.   searchName: string[] = [];
    60.   search(searchName: string[]): void {
    61.     this.searchName = searchName;
    62.     const filterFunc = (item: any) => {
    63.       return this.searchName.length ? this.searchName.some(name => item.name.indexOf(name) !== -1) : true;
    64.     };
    65.     const listOfData = this.listOfData.filter(item => filterFunc(item));
    66.     this.listOfDisplayData = listOfData.sort((a, b) =>
    67.       this.sortValue === 'ascend' ? (a.age > b.age ? 1 : -1) : b.age > a.age ? 1 : -1
    68.     );
    69.   }
    71.   ngOnInit(): void {
    72.     for (let i = 0; i < 100; i++) {
    73.       this.listOfData.push({
    74.         name: 'John Brown',
    75.         age: i + 1,
    76.         street: 'Lake Park',
    77.         building: 'C',
    78.         number: 2035,
    79.         companyAddress: 'Lake Street 42',
    80.         companyName: 'SoftLake Co',
    81.         gender: 'M'
    82.       });
    83.     }
    84.     this.listOfDisplayData = [...this.listOfData];
    85.   }
    86. }

    Table表格 - 图18

    可编辑单元格

    定制带单元格编辑功能的表格，自由操作单元格内容。

    1. import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
    2. import { NzInputDirective } from 'ng-zorro-antd';
    4. @Component({
    5.   selector: 'nz-demo-table-edit-cell',
    6.   template: `
    7.     <button nz-button (click)="addRow()" nzType="primary">Add</button>
    8.     <nz-table #editRowTable nzBordered [nzData]="listOfData">
    9.       <thead>
    10.         <tr>
    11.           <th nzWidth="30%">Name</th>
    12.           <th>Age</th>
    13.           <th>Address</th>
    14.           <th>Action</th>
    15.         </tr>
    16.       </thead>
    17.       <tbody>
    18.         <tr *ngFor="let data of editRowTable.data" class="editable-row">
    19.           <td>
    20.             <div class="editable-cell" *ngIf="editId !== data.id; else editTpl">
    21.               <div class="editable-cell-value-wrap" (click)="startEdit(data.id, $event)">
    22.                 {{ data.name }}
    23.               </div>
    24.             </div>
    25.             <ng-template #editTpl>
    26.               <input type="text" nz-input [(ngModel)]="data.name" />
    27.             </ng-template>
    28.           </td>
    29.           <td>{{ data.age }}</td>
    30.           <td>{{ data.address }}</td>
    31.           <td>
    32.             <a nz-popconfirm nzTitle="Sure to delete?" (nzOnConfirm)="deleteRow(data.id)">Delete</a>
    33.           </td>
    34.         </tr>
    35.       </tbody>
    36.     </nz-table>
    37.   `,
    38.   styles: [
    39.     `
    40.       button {
    41.         margin-bottom: 16px;
    42.       }
    44.       .editable-cell {
    45.         position: relative;
    46.       }
    48.       .editable-cell-value-wrap {
    49.         padding: 5px 12px;
    50.         cursor: pointer;
    51.       }
    53.       .editable-row:hover .editable-cell-value-wrap {
    54.         border: 1px solid #d9d9d9;
    55.         border-radius: 4px;
    56.         padding: 4px 11px;
    57.       }
    58.     `
    59.   ]
    60. })
    61. export class NzDemoTableEditCellComponent implements OnInit {
    62.   i = 0;
    63.   editId: string | null;
    64.   listOfData: any[] = [];
    65.   @ViewChild(NzInputDirective, { read: ElementRef }) inputElement: ElementRef;
    67.   @HostListener('window:click', ['$event'])
    68.   handleClick(e: MouseEvent): void {
    69.     if (this.editId && this.inputElement && this.inputElement.nativeElement !== e.target) {
    70.       this.editId = null;
    71.     }
    72.   }
    74.   addRow(): void {
    75.     this.listOfData = [
    76.       ...this.listOfData,
    77.       {
    78.         id: `${this.i}`,
    79.         name: `Edward King ${this.i}`,
    80.         age: '32',
    81.         address: `London, Park Lane no. ${this.i}`
    82.       }
    83.     ];
    84.     this.i++;
    85.   }
    87.   deleteRow(id: string): void {
    88.     this.listOfData = this.listOfData.filter(d => d.id !== id);
    89.   }
    91.   startEdit(id: string, event: MouseEvent): void {
    92.     event.preventDefault();
    93.     event.stopPropagation();
    94.     this.editId = id;
    95.   }
    97.   ngOnInit(): void {
    98.     this.addRow();
    99.     this.addRow();
    100.   }
    101. }

    Table表格 - 图19

    可编辑行

    定制带行编辑功能的表格，自由操作行内容。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-edit-row',
    5.   template: `
    6.     <nz-table #editRowTable nzBordered [nzData]="listOfData">
    7.       <thead>
    8.         <tr>
    9.           <th nzWidth="25%">Name</th>
    10.           <th nzWidth="15%">Age</th>
    11.           <th nzWidth="40%">Address</th>
    12.           <th>Action</th>
    13.         </tr>
    14.       </thead>
    15.       <tbody>
    16.         <tr *ngFor="let data of editRowTable.data">
    17.           <td>
    18.             <ng-container *ngIf="!editCache[data.id].edit; else nameInputTpl">
    19.               {{ data.name }}
    20.             </ng-container>
    21.             <ng-template #nameInputTpl>
    22.               <input type="text" nz-input [(ngModel)]="editCache[data.id].data.name" />
    23.             </ng-template>
    24.           </td>
    25.           <td>
    26.             <ng-container *ngIf="!editCache[data.id].edit; else ageInputTpl">
    27.               {{ data.age }}
    28.             </ng-container>
    29.             <ng-template #ageInputTpl>
    30.               <input type="text" nz-input [(ngModel)]="editCache[data.id].data.age" />
    31.             </ng-template>
    32.           </td>
    33.           <td>
    34.             <ng-container *ngIf="!editCache[data.id].edit; else addressInputTpl">
    35.               {{ data.address }}
    36.             </ng-container>
    37.             <ng-template #addressInputTpl>
    38.               <input type="text" nz-input [(ngModel)]="editCache[data.id].data.address" />
    39.             </ng-template>
    40.           </td>
    41.           <td>
    42.             <div class="editable-row-operations">
    43.               <ng-container *ngIf="!editCache[data.id].edit; else saveTpl">
    44.                 <a (click)="startEdit(data.id)">Edit</a>
    45.               </ng-container>
    46.               <ng-template #saveTpl>
    47.                 <a (click)="saveEdit(data.id)">Save</a>
    48.                 <a nz-popconfirm nzTitle="Sure to cancel?" (nzOnConfirm)="cancelEdit(data.id)">Cancel</a>
    49.               </ng-template>
    50.             </div>
    51.           </td>
    52.         </tr>
    53.       </tbody>
    54.     </nz-table>
    55.   `,
    56.   styles: [
    57.     `
    58.       .editable-row-operations a {
    59.         margin-right: 8px;
    60.       }
    61.     `
    62.   ]
    63. })
    64. export class NzDemoTableEditRowComponent implements OnInit {
    65.   editCache: { [key: string]: any } = {};
    66.   listOfData: any[] = [];
    68.   startEdit(id: string): void {
    69.     this.editCache[id].edit = true;
    70.   }
    72.   cancelEdit(id: string): void {
    73.     const index = this.listOfData.findIndex(item => item.id === id);
    74.     this.editCache[id] = {
    75.       data: { ...this.listOfData[index] },
    76.       edit: false
    77.     };
    78.   }
    80.   saveEdit(id: string): void {
    81.     const index = this.listOfData.findIndex(item => item.id === id);
    82.     Object.assign(this.listOfData[index], this.editCache[id].data);
    83.     this.editCache[id].edit = false;
    84.   }
    86.   updateEditCache(): void {
    87.     this.listOfData.forEach(item => {
    88.       this.editCache[item.id] = {
    89.         edit: false,
    90.         data: { ...item }
    91.       };
    92.     });
    93.   }
    95.   ngOnInit(): void {
    96.     for (let i = 0; i < 100; i++) {
    97.       this.listOfData.push({
    98.         id: `${i}`,
    99.         name: `Edrward ${i}`,
    100.         age: 32,
    101.         address: `London Park no. ${i}`
    102.       });
    103.     }
    104.     this.updateEditCache();
    105.   }
    106. }

    Table表格 - 图20

    嵌套子表格

    展示每行数据更详细的信息。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-nested-table',
    5.   template: `
    6.     <nz-table #nestedTable [nzData]="listOfParentData" [nzPageSize]="10">
    7.       <thead>
    8.         <tr>
    9.           <th nzShowExpand></th>
    10.           <th>Name</th>
    11.           <th>Platform</th>
    12.           <th>Version</th>
    13.           <th>Upgraded</th>
    14.           <th>Creator</th>
    15.           <th>Date</th>
    16.           <th>Action</th>
    17.         </tr>
    18.       </thead>
    19.       <tbody>
    20.         <ng-template ngFor let-data [ngForOf]="nestedTable.data">
    21.           <tr>
    22.             <td nzShowExpand [(nzExpand)]="data.expand"></td>
    23.             <td>{{ data.name }}</td>
    24.             <td>{{ data.platform }}</td>
    25.             <td>{{ data.version }}</td>
    26.             <td>{{ data.upgradeNum }}</td>
    27.             <td>{{ data.creator }}</td>
    28.             <td>{{ data.createdAt }}</td>
    29.             <td>
    30.               <a>Publish</a>
    31.             </td>
    32.           </tr>
    33.           <tr [nzExpand]="data.expand">
    34.             <td></td>
    35.             <td colspan="7">
    36.               <nz-table #innerTable [nzData]="listOfChildrenData" nzSize="middle" [nzShowPagination]="false">
    37.                 <thead>
    38.                   <tr>
    39.                     <th>Date</th>
    40.                     <th>Name</th>
    41.                     <th>Status</th>
    42.                     <th>Upgrade Status</th>
    43.                     <th>Action</th>
    44.                   </tr>
    45.                 </thead>
    46.                 <tbody>
    47.                   <tr *ngFor="let data of innerTable.data">
    48.                     <td>{{ data.date }}</td>
    49.                     <td>{{ data.name }}</td>
    50.                     <td>
    51.                       <nz-badge [nzStatus]="'success'" [nzText]="'Finished'"></nz-badge>
    52.                     </td>
    53.                     <td>{{ data.upgradeNum }}</td>
    54.                     <td>
    55.                       <span class="table-operation">
    56.                         <nz-dropdown>
    57.                           <a nz-dropdown class="operation"> Pause <i nz-icon type="down"></i> </a>
    58.                           <ul nz-menu>
    59.                             <li nz-menu-item>
    60.                               <a>Action 1</a>
    61.                             </li>
    62.                             <li nz-menu-item>
    63.                               <a>Action 2</a>
    64.                             </li>
    65.                           </ul>
    66.                         </nz-dropdown>
    67.                         <nz-divider nzType="vertical"></nz-divider>
    68.                         <a class="operation">Stop</a>
    69.                         <nz-divider nzType="vertical"></nz-divider>
    70.                         <a>More</a>
    71.                       </span>
    72.                     </td>
    73.                   </tr>
    74.                 </tbody>
    75.               </nz-table>
    76.             </td>
    77.           </tr>
    78.         </ng-template>
    79.       </tbody>
    80.     </nz-table>
    81.   `
    82. })
    83. export class NzDemoTableNestedTableComponent implements OnInit {
    84.   listOfParentData: any[] = [];
    85.   listOfChildrenData: any[] = [];
    87.   ngOnInit(): void {
    88.     for (let i = 0; i < 3; ++i) {
    89.       this.listOfParentData.push({
    90.         key: i,
    91.         name: 'Screem',
    92.         platform: 'iOS',
    93.         version: '10.3.4.5654',
    94.         upgradeNum: 500,
    95.         creator: 'Jack',
    96.         createdAt: '2014-12-24 23:12:00',
    97.         expand: false
    98.       });
    99.     }
    100.     for (let i = 0; i < 3; ++i) {
    101.       this.listOfChildrenData.push({
    102.         key: i,
    103.         date: '2014-12-24 23:12:00',
    104.         name: 'This is production name',
    105.         upgradeNum: 'Upgraded: 56'
    106.       });
    107.     }
    108.   }
    109. }

    Table表格 - 图21

    虚拟滚动

    虚拟滚动，结合 cdk scrolling 的虚拟滚动，用于巨量数据加载。可以通过获得 cdkVirtualScrollViewport 进行进一步操作，见本示例及 API。

    1. import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
    2. import { NzTableComponent } from 'ng-zorro-antd';
    3. import { Subject } from 'rxjs';
    4. import { takeUntil } from 'rxjs/operators';
    6. @Component({
    7.   selector: 'nz-demo-table-virtual',
    8.   template: `
    9.     <button nz-button (click)="scrollToIndex(200)">Scroll To Index 200</button>
    10.     <br />
    11.     <br />
    12.     <nz-table
    13.       #virtualTable
    14.       nzVirtualScroll
    15.       [nzVirtualItemSize]="54"
    16.       [nzData]="listOfData"
    17.       [nzFrontPagination]="false"
    18.       [nzShowPagination]="false"
    19.       [nzScroll]="{ x: '1300px', y: '240px' }"
    20.     >
    21.       <thead>
    22.         <tr>
    23.           <th nzWidth="200px" nzLeft="0px">Full Name</th>
    24.           <th nzWidth="100px" nzLeft="200px">Age</th>
    25.           <th nzWidth="100px">Index</th>
    26.           <th nzWidth="100px">Column 1</th>
    27.           <th nzWidth="100px">Column 2</th>
    28.           <th nzWidth="100px">Column 3</th>
    29.           <th nzWidth="100px">Column 4</th>
    30.           <th nzWidth="100px">Column 5</th>
    31.           <th nzWidth="100px">Column 6</th>
    32.           <th nzWidth="100px">Column 7</th>
    33.           <th nzWidth="100px">Column 8</th>
    34.           <th nzWidth="100px" nzRight="0px">Action</th>
    35.         </tr>
    36.       </thead>
    37.       <tbody>
    38.         <ng-template nz-virtual-scroll let-data let-index="index">
    39.           <tr>
    40.             <td nzLeft="0px">{{ data.name }} {{ index }}</td>
    41.             <td nzLeft="200px">{{ data.age }}</td>
    42.             <td>{{ data.index }}</td>
    43.             <td>{{ data.address }}</td>
    44.             <td>{{ data.address }}</td>
    45.             <td>{{ data.address }}</td>
    46.             <td>{{ data.address }}</td>
    47.             <td>{{ data.address }}</td>
    48.             <td>{{ data.address }}</td>
    49.             <td>{{ data.address }}</td>
    50.             <td>{{ data.address }}</td>
    51.             <td nzRight="0px">
    52.               <a>action</a>
    53.             </td>
    54.           </tr>
    55.         </ng-template>
    56.       </tbody>
    57.     </nz-table>
    58.   `
    59. })
    60. export class NzDemoTableVirtualComponent implements OnInit, AfterViewInit, OnDestroy {
    61.   @ViewChild('virtualTable') nzTableComponent: NzTableComponent;
    62.   private destroy$ = new Subject();
    63.   listOfData: any[] = [];
    65.   scrollToIndex(index: number): void {
    66.     this.nzTableComponent.cdkVirtualScrollViewport.scrollToIndex(index);
    67.   }
    69.   ngOnInit(): void {
    70.     for (let i = 0; i < 20000; i++) {
    71.       this.listOfData.push({
    72.         index: i,
    73.         name: `Edward King`,
    74.         age: 32,
    75.         address: `London`
    76.       });
    77.     }
    78.   }
    80.   ngAfterViewInit(): void {
    81.     this.nzTableComponent.cdkVirtualScrollViewport.scrolledIndexChange
    82.       .pipe(takeUntil(this.destroy$))
    83.       .subscribe(data => {
    84.         console.log('scroll index to', data);
    85.       });
    86.   }
    88.   ngOnDestroy(): void {
    89.     this.destroy$.next();
    90.     this.destroy$.complete();
    91.   }
    92. }

    Table表格 - 图22

    拖拽排序

    使用自定义元素，我们可以集成 cdk drag-drop 来实现拖拽排序。

    1. import { moveItemInArray, CdkDragDrop } from '@angular/cdk/drag-drop';
    2. import { Component } from '@angular/core';
    4. @Component({
    5.   selector: 'nz-demo-table-drag-sorting',
    6.   template: `
    7.     <nz-table [nzData]="listOfData" [nzFrontPagination]="false" [nzShowPagination]="false">
    8.       <thead>
    9.         <tr>
    10.           <th>Name</th>
    11.           <th>Age</th>
    12.           <th>Address</th>
    13.         </tr>
    14.       </thead>
    15.       <tbody cdkDropList (cdkDropListDropped)="drop($event)">
    16.         <tr *ngFor="let data of listOfData" cdkDrag>
    17.           <td>{{ data.name }}</td>
    18.           <td>{{ data.age }}</td>
    19.           <td>{{ data.address }}</td>
    20.         </tr>
    21.       </tbody>
    22.     </nz-table>
    23.   `,
    24.   styles: [
    25.     `
    26.       ::ng-deep .cdk-drag-preview {
    27.         display: table;
    28.       }
    30.       ::ng-deep .cdk-drag-placeholder {
    31.         opacity: 0;
    32.       }
    33.     `
    34.   ]
    35. })
    36. export class NzDemoTableDragSortingComponent {
    37.   listOfData = [
    38.     {
    39.       key: '1',
    40.       name: 'John Brown',
    41.       age: 32,
    42.       address: 'New York No. 1 Lake Park'
    43.     },
    44.     {
    45.       key: '2',
    46.       name: 'Jim Green',
    47.       age: 42,
    48.       address: 'London No. 1 Lake Park'
    49.     },
    50.     {
    51.       key: '3',
    52.       name: 'Joe Black',
    53.       age: 32,
    54.       address: 'Sidney No. 1 Lake Park'
    55.     }
    56.   ];
    58.   drop(event: CdkDragDrop<string[]>): void {
    59.     moveItemInArray(this.listOfData, event.previousIndex, event.currentIndex);
    60.   }
    61. }

    Table表格 - 图23

    模板用法

    模板模式，显示内容仅由模板内容控制，不再需要向 nzData 传入数据，完全像普通 table 一样使用，使用 ant-design 的样式。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-template',
    5.   template: `
    6.     <nz-table nzTemplateMode>
    7.       <thead>
    8.         <tr>
    9.           <th>Company</th>
    10.           <th>Contact</th>
    11.           <th>Country</th>
    12.         </tr>
    13.       </thead>
    14.       <tbody>
    15.         <tr>
    16.           <td>Alfreds Futterkiste</td>
    17.           <td>Maria Anders</td>
    18.           <td>Germany</td>
    19.         </tr>
    20.         <tr>
    21.           <td>Centro comercial Moctezuma</td>
    22.           <td>Francisco Chang</td>
    23.           <td>Mexico</td>
    24.         </tr>
    25.         <tr>
    26.           <td>Ernst Handel</td>
    27.           <td>Roland Mendel</td>
    28.           <td>Austria</td>
    29.         </tr>
    30.         <tr>
    31.           <td>Island Trading</td>
    32.           <td>Helen Bennett</td>
    33.           <td>UK</td>
    34.         </tr>
    35.         <tr>
    36.           <td>Laughing Bacchus Winecellars</td>
    37.           <td>Yoshi Tannamuri</td>
    38.           <td>Canada</td>
    39.         </tr>
    40.         <tr>
    41.           <td>Magazzini Alimentari Riuniti</td>
    42.           <td>Giovanni Rovelli</td>
    43.           <td>Italy</td>
    44.         </tr>
    45.       </tbody>
    46.     </nz-table>
    47.   `
    48. })
    49. export class NzDemoTableTemplateComponent {}

    Table表格 - 图24

    动态控制表格属性

    选择不同配置组合查看效果。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-table-dynamic-settings',
    5.   template: `
    6.     <div class="components-table-demo-control-bar">
    7.       <form nz-form nzLayout="inline">
    8.         <nz-form-item>
    9.           <nz-form-label><label>Bordered</label></nz-form-label>
    10.           <nz-form-control><nz-switch [(ngModel)]="bordered" name="bordered"></nz-switch></nz-form-control>
    11.         </nz-form-item>
    12.         <nz-form-item>
    13.           <nz-form-label><label>Loading</label></nz-form-label>
    14.           <nz-form-control><nz-switch [(ngModel)]="loading" name="loading"></nz-switch></nz-form-control>
    15.         </nz-form-item>
    16.         <nz-form-item>
    17.           <nz-form-label><label>Pagination</label></nz-form-label>
    18.           <nz-form-control><nz-switch [(ngModel)]="pagination" name="pagination"></nz-switch></nz-form-control>
    19.         </nz-form-item>
    20.         <nz-form-item>
    21.           <nz-form-label><label>PageSizeChanger</label></nz-form-label>
    22.           <nz-form-control><nz-switch [(ngModel)]="sizeChanger" name="sizeChanger"></nz-switch></nz-form-control>
    23.         </nz-form-item>
    24.         <nz-form-item>
    25.           <nz-form-label><label>Title</label></nz-form-label>
    26.           <nz-form-control><nz-switch [(ngModel)]="title" name="title"></nz-switch></nz-form-control>
    27.         </nz-form-item>
    28.         <nz-form-item>
    29.           <nz-form-label><label>Column Header</label></nz-form-label>
    30.           <nz-form-control><nz-switch [(ngModel)]="header" name="header"></nz-switch></nz-form-control>
    31.         </nz-form-item>
    32.         <nz-form-item>
    33.           <nz-form-label><label>Footer</label></nz-form-label>
    34.           <nz-form-control><nz-switch [(ngModel)]="footer" name="footer"></nz-switch></nz-form-control>
    35.         </nz-form-item>
    36.         <nz-form-item>
    37.           <nz-form-label><label>Expandable</label></nz-form-label>
    38.           <nz-form-control><nz-switch [(ngModel)]="expandable" name="expandable"></nz-switch></nz-form-control>
    39.         </nz-form-item>
    40.         <nz-form-item>
    41.           <nz-form-label><label>Checkbox</label></nz-form-label>
    42.           <nz-form-control><nz-switch [(ngModel)]="checkbox" name="checkbox"></nz-switch></nz-form-control>
    43.         </nz-form-item>
    44.         <nz-form-item>
    45.           <nz-form-label><label>Fixed Header</label></nz-form-label>
    46.           <nz-form-control><nz-switch [(ngModel)]="fixHeader" name="fixHeader"></nz-switch></nz-form-control>
    47.         </nz-form-item>
    48.         <nz-form-item>
    49.           <nz-form-label><label>No Result</label></nz-form-label>
    50.           <nz-form-control
    51.             ><nz-switch [(ngModel)]="noResult" (ngModelChange)="noResultChange($event)" name="noResult"></nz-switch
    52.           ></nz-form-control>
    53.         </nz-form-item>
    54.         <nz-form-item>
    55.           <nz-form-label><label>Simple Pagination</label></nz-form-label>
    56.           <nz-form-control><nz-switch [(ngModel)]="simple" name="simple"></nz-switch></nz-form-control>
    57.         </nz-form-item>
    58.         <nz-form-item>
    59.           <nz-form-label><label>Size</label></nz-form-label>
    60.           <nz-form-control>
    61.             <nz-radio-group [(ngModel)]="size" name="size">
    62.               <label nz-radio-button nzValue="default">Default</label>
    63.               <label nz-radio-button nzValue="middle">Middle</label>
    64.               <label nz-radio-button nzValue="small">Small</label>
    65.             </nz-radio-group>
    66.           </nz-form-control>
    67.         </nz-form-item>
    68.         <nz-form-item>
    69.           <nz-form-label><label>Pagination Position</label></nz-form-label>
    70.           <nz-form-control>
    71.             <nz-radio-group [(ngModel)]="position" name="position">
    72.               <label nz-radio-button nzValue="top">Top</label>
    73.               <label nz-radio-button nzValue="bottom">Bottom</label>
    74.               <label nz-radio-button nzValue="both">Both</label>
    75.             </nz-radio-group>
    76.           </nz-form-control>
    77.         </nz-form-item>
    78.       </form>
    79.     </div>
    80.     <nz-table
    81.       #dynamicTable
    82.       [nzScroll]="fixHeader ? { y: '240px' } : null"
    83.       [nzData]="listOfData"
    84.       [nzBordered]="bordered"
    85.       [nzSimple]="simple"
    86.       [nzLoading]="loading"
    87.       [nzPaginationPosition]="position"
    88.       [nzShowSizeChanger]="sizeChanger"
    89.       [nzFrontPagination]="pagination"
    90.       [nzShowPagination]="pagination"
    91.       [nzFooter]="footer ? 'Here is Footer' : null"
    92.       [nzTitle]="title ? 'Here is Title' : null"
    93.       [nzSize]="size"
    94.       (nzCurrentPageDataChange)="currentPageDataChange($event)"
    95.     >
    96.       <thead>
    97.         <tr *ngIf="header">
    98.           <th nzWidth="50px" nzShowExpand *ngIf="expandable"></th>
    99.           <th
    100.             nzWidth="62px"
    101.             nzShowCheckbox
    102.             *ngIf="checkbox"
    103.             [(nzChecked)]="allChecked"
    104.             [nzIndeterminate]="indeterminate"
    105.             (nzCheckedChange)="checkAll($event)"
    106.           ></th>
    107.           <th nzWidth="150px">Name</th>
    108.           <th nzWidth="70px">Age</th>
    109.           <th>Address</th>
    110.           <th nzWidth="260px">Action</th>
    111.         </tr>
    112.       </thead>
    113.       <tbody>
    114.         <ng-template ngFor let-data [ngForOf]="dynamicTable.data">
    115.           <tr>
    116.             <td nzShowExpand *ngIf="expandable" [(nzExpand)]="data.expand"></td>
    117.             <td nzShowCheckbox *ngIf="checkbox" [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
    118.             <td>{{ data.name }}</td>
    119.             <td>{{ data.age }}</td>
    120.             <td>{{ data.address }}</td>
    121.             <td>
    122.               <a href="#">Action 一 {{ data.name }}</a>
    123.               <nz-divider nzType="vertical"></nz-divider>
    124.               <a href="#">Delete</a>
    125.             </td>
    126.           </tr>
    127.           <tr [nzExpand]="data.expand && expandable">
    128.             <td></td>
    129.             <td [attr.colspan]="checkbox ? 5 : 4">{{ data.description }}</td>
    130.           </tr>
    131.         </ng-template>
    132.       </tbody>
    133.     </nz-table>
    134.   `,
    135.   styles: [
    136.     `
    137.       .components-table-demo-control-bar {
    138.         margin-bottom: 12px;
    139.       }
    141.       .nz-form-item {
    142.         margin-right: 16px;
    143.         margin-bottom: 8px;
    144.       }
    145.     `
    146.   ]
    147. })
    148. export class NzDemoTableDynamicSettingsComponent implements OnInit {
    149.   listOfData: any[] = [];
    150.   bordered = false;
    151.   loading = false;
    152.   sizeChanger = false;
    153.   pagination = true;
    154.   header = true;
    155.   title = true;
    156.   footer = true;
    157.   fixHeader = false;
    158.   size = 'small';
    159.   expandable = true;
    160.   checkbox = true;
    161.   allChecked = false;
    162.   indeterminate = false;
    163.   displayData: any[] = [];
    164.   simple = false;
    165.   noResult = false;
    166.   position = 'bottom';
    168.   currentPageDataChange(
    169.     $event: Array<{
    170.       name: string;
    171.       age: number;
    172.       address: string;
    173.       checked: boolean;
    174.       expand: boolean;
    175.       description: string;
    176.     }>
    177.   ): void {
    178.     this.displayData = $event;
    179.     this.refreshStatus();
    180.   }
    182.   refreshStatus(): void {
    183.     const validData = this.displayData.filter(value => !value.disabled);
    184.     const allChecked = validData.length > 0 && validData.every(value => value.checked === true);
    185.     const allUnChecked = validData.every(value => !value.checked);
    186.     this.allChecked = allChecked;
    187.     this.indeterminate = !allChecked && !allUnChecked;
    188.   }
    190.   checkAll(value: boolean): void {
    191.     this.displayData.forEach(data => {
    192.       if (!data.disabled) {
    193.         data.checked = value;
    194.       }
    195.     });
    196.     this.refreshStatus();
    197.   }
    199.   ngOnInit(): void {
    200.     for (let i = 1; i <= 100; i++) {
    201.       this.listOfData.push({
    202.         name: 'John Brown',
    203.         age: `${i}2`,
    204.         address: `New York No. ${i} Lake Park`,
    205.         description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    206.         checked: false,
    207.         expand: false
    208.       });
    209.     }
    210.   }
    212.   noResultChange(status: boolean): void {
    213.     this.listOfData = [];
    214.     if (!status) {
    215.       this.ngOnInit();
    216.     }
    217.   }
    218. }

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzTableModule } from 'ng-zorro-antd';

    nz-tablecomponent

    参数说明类型默认值
    [nzData]数据数组any[]-
    [nzFrontPagination]是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 falsebooleantrue
    [nzTotal]当前总数据，在服务器渲染时需要传入number-
    [nzPageIndex]当前页码，可双向绑定number-
    [nzPageSize]每页展示多少数据，可双向绑定number-
    [nzShowPagination]是否显示分页器booleantrue
    [nzPaginationPosition]指定分页显示的位置'top'｜'bottom'｜'both'bottom
    [nzBordered]是否展示外边框和列边框booleanfalse
    [nzWidthConfig]表头分组时指定每列宽度，与 th 的 nzWidth 不可混用string[]-
    [nzSize]正常或迷你类型'middle'｜'small'｜'default''default'
    [nzLoading]页面是否加载中booleanfalse
    [nzLoadingIndicator]加载指示符TemplateRef<void>-
    [nzLoadingDelay]延迟显示加载效果的时间（防止闪烁）number0
    [nzScroll]横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: "300px", y: "300px" }object-
    [nzTitle]表格标题string｜TemplateRef<void>-
    [nzFooter]表格尾部string｜TemplateRef<void>-
    [nzNoResult]无数据时显示内容string｜TemplateRef<void>-
    [nzPageSizeOptions]页数选择器可选值number[][ 10, 20, 30, 40, 50 ]
    [nzShowQuickJumper]是否可以快速跳转至某页booleanfalse
    [nzShowSizeChanger]是否可以改变 nzPageSizebooleanfalse
    [nzShowTotal]用于显示数据总量和当前数据范围，用法参照 Pagination 组件TemplateRef<{ $implicit: number, range: [ number, number ] }>-
    [nzItemRender]用于自定义页码的结构，用法参照 Pagination 组件TemplateRef<{ $implicit: 'page'｜'prev'｜'next', page: number }>-
    [nzHideOnSinglePage]只有一页时是否隐藏分页器booleanfalse
    [nzSimple]当添加该属性时，显示为简单分页boolean-
    [nzVirtualScroll]是否启用虚拟滚动模式，与 [nzScroll] 配合使用booleanfalse
    [nzVirtualItemSize]虚拟滚动时每一列的高度，与 cdk itemSize 相同number0
    [nzVirtualMaxBufferPx]缓冲区最大像素高度，与 cdk maxBufferPx 相同number200
    [nzVirtualMinBufferPx]缓冲区最小像素高度，低于该值时将加载新结构，与 cdk minBufferPx 相同number100
    (nzPageIndexChange)当前页码改变时的回调函数EventEmitter<number>-
    (nzPageSizeChange)页数改变时的回调函数EventEmitter<number>-
    (nzCurrentPageDataChange)当前页面展示数据改变的回调函数EventEmitter<any[]>-

    th

    勾选属性

    参数说明类型默认值
    [nzShowCheckbox]是否添加checkboxboolean-
    [nzDisabled]checkbox 是否禁用boolean-
    [nzIndeterminate]checkbox indeterminate 状态boolean-
    [nzChecked]checkbox 是否被选中，可双向绑定boolean-
    (nzCheckedChange)选中的回调EventEmitter<boolean>-

    下拉选择属性

    参数说明类型默认值
    [nzShowRowSelection]是否显示下拉选择boolean-
    [nzSelections]下拉选择的内容 text 及回调函数 onSelectArray<{ text: string, onSelect: any }>-

    排序属性

    参数说明类型默认值
    [nzShowSort]是否显示排序boolean-
    [nzSortKey]排序key，非受控模式使用，与 thead 中 nzSortChange 配合使用string-
    [nzSort]当前排序状态，受控模式使用，可双向绑定'descend'｜'ascend'｜nullnull
    (nzSortChange)排序状态改变回调，受控模式使用EventEmitter<'descend'｜'ascend'｜null>-

    过滤属性

    参数说明类型默认值
    [nzShowFilter]是否显示过滤boolean-
    [nzFilters]过滤器内容, 显示数据 text，回调函数传出 value，设置 byDefault 以默认应用过滤规则Array<{ text: string; value: any; byDefault?: boolean }>-
    [nzFilterMultiple]是否为多选过滤器booleantrue
    (nzFilterChange)过滤器内容选择的 value 数据回调EventEmitter<any[]｜any>-

    样式属性

    参数说明类型默认值
    [nzWidth]指定该列宽度，表头未分组时可用string-
    [nzLeft]左侧距离，用于固定左侧列string-
    [nzRight]右侧距离，用于固定右侧列string-
    [nzAlign]设置列内容的对齐方式'left'｜'right'｜'center'-

    其他

    参数说明类型默认值
    [nzExpand]当前列是否包含展开按钮boolean-

    td

    勾选属性

    参数说明类型默认值
    [nzShowCheckbox]是否添加checkboxboolean-
    [nzDisabled]checkbox 是否禁用boolean-
    [nzIndeterminate]checkbox indeterminate 状态boolean-
    [nzChecked]checkbox 是否被选中，可双向绑定boolean-
    (nzCheckedChange)选中的回调EventEmitter<boolean>-

    展开属性

    参数说明类型默认值
    [nzShowExpand]是否显示展开按钮boolean-
    [nzExpand]当前展开按钮状态，可双向绑定boolean-
    (nzExpandChange)当前展开按钮状态改变回调函数EventEmitter<boolean>-

    样式属性

    参数说明类型默认值
    [nzLeft]左侧距离，用于固定左侧列string-
    [nzRight]右侧距离，用于固定右侧列string-
    [nzAlign]设置列内容的对齐方式'left'｜'right'｜'center'-

    其他

    参数说明类型默认值
    [nzIndentSize]展示树形数据时，每层缩进的宽度，以 px 为单位number-

    thead

    参数说明类型默认值
    [nzSingleSort]是否单列排序模式，非受控排序下使用booleanfalse
    (nzSortChange)排序改变时的回调函数，需要与 th 上的 nzSortKey 同时使用，非受控排序下使用EventEmitter<{ nzSortKey: string, value: 'descend'｜'ascend'｜null }>-

    tr

    参数说明类型默认值
    [nzExpand]当前列是否展开，与 td 上的 nzExpand 属性配合使用boolean-

    [nz-virtual-scroll]directive

    虚拟滚动时配合 ng-template 使用, 格式为： TemplateRef<{ $implicit: any, index: number }>.

    注意

    按照 Angular 的设计，当需要对 nzData 中的数据进行增删时需要使用以下操作，使用 push 或者 splice 修改 nzData 的数据不会生效

    1. // 增加数据
    2. this.dataSet = [ ...this.dataSet, {
    3.   key    : `${this.i}`,
    4.   name   : `Edward King ${this.i}`,
    5.   age    : '32',
    6.   address: `London, Park Lane no. ${this.i}`
    7. }];
    8. // 删除数据
    9. this.dataSet = this.dataSet.filter(d => d.key !== i);