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