docs(module:table): rewrite table demo (NG-ZORRO#2950)

Ricbet · Apr 9, 2020 · 2e28665 · 2e28665
1 parent 2b129e7
commit 2e28665
Show file tree

Hide file tree

Showing 42 changed files with 655 additions and 611 deletions.
diff --git a/components/dropdown/nz-dropdown.component.html b/components/dropdown/nz-dropdown.component.html
@@ -15,10 +15,9 @@
     [style.minWidth.px]="triggerWidth"
     (mouseenter)="setVisibleStateWhen(true,'hover')"
     (mouseleave)="setVisibleStateWhen(false,'hover')">
-    <div [class.ant-table-filter-dropdown]="hasFilterButton">
+    <div [class.ant-table-filter-dropdown]="nzTableFilter">
       <ng-content select="[nz-menu]"></ng-content>
-      <ng-content select=".ant-table-filter-dropdown-btns"></ng-content>
+      <ng-content></ng-content>
     </div>
-    <ng-content></ng-content>
   </div>
 </ng-template>
diff --git a/components/dropdown/nz-dropdown.component.ts b/components/dropdown/nz-dropdown.component.ts
@@ -57,14 +57,14 @@ export class NzDropDownComponent implements OnDestroy, AfterContentInit, OnChang
   @ContentChild(NzDropDownDirective) nzDropDownDirective: NzDropDownDirective;
   @ContentChild(NzMenuDirective) nzMenuDirective: NzMenuDirective;
   @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;
-  @Input() hasFilterButton = false;
   @Input() nzTrigger: 'click' | 'hover' = 'hover';
   @Input() nzOverlayClassName = '';
   @Input() nzOverlayStyle: { [ key: string ]: string } = {};
   @Input() nzPlacement: NzPlacement = 'bottomLeft';
   @Input() @InputBoolean() nzClickHide = true;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzVisible = false;
+  @Input() @InputBoolean() nzTableFilter = false;
   @Output() readonly nzVisibleChange: EventEmitter<boolean> = new EventEmitter();
 
   setVisibleStateWhen(visible: boolean, trigger: 'click' | 'hover' | 'all' = 'all'): void {

diff --git a/components/input/public-api.ts b/components/input/public-api.ts
@@ -1,3 +1,4 @@
 export * from './nz-input-group.component';
 export * from './nz-input.module';
 export * from './nz-input-group.component';
+export * from './nz-input.directive';
diff --git a/components/table/demo/ajax.ts b/components/table/demo/ajax.ts
@@ -32,7 +32,7 @@ export class RandomUserService {
       #ajaxTable
       nzShowSizeChanger
       [nzFrontPagination]="false"
-      [nzData]="dataSet"
+      [nzData]="listOfData"
       [nzLoading]="loading"
       [nzTotal]="total"
       [(nzPageIndex)]="pageIndex"
@@ -59,7 +59,7 @@ export class NzDemoTableAjaxComponent implements OnInit {
   pageIndex = 1;
   pageSize = 10;
   total = 1;
-  dataSet = [];
+  listOfData = [];
   loading = true;
   sortValue = null;
   sortKey = null;
@@ -86,7 +86,7 @@ export class NzDemoTableAjaxComponent implements OnInit {
     this.randomUserService.getUsers(this.pageIndex, this.pageSize, this.sortKey, this.sortValue, this.searchGenderList).subscribe((data: any) => {
       this.loading = false;
       this.total = 200;
-      this.dataSet = data.results;
+      this.listOfData = data.results;
     });
   }
 

diff --git a/components/table/demo/basic.ts b/components/table/demo/basic.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-table-basic',
   template: `
-    <nz-table #basicTable [nzData]="dataSet">
+    <nz-table #basicTable [nzData]="listOfData">
       <thead>
         <tr>
           <th>Name</th>
@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
   `
 })
 export class NzDemoTableBasicComponent {
-  dataSet = [
+  listOfData = [
     {
       key    : '1',
       name   : 'John Brown',

diff --git a/components/table/demo/colspan-rowspan.ts b/components/table/demo/colspan-rowspan.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-table-colspan-rowspan',
   template: `
-    <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzBordered>
+    <nz-table #colSpanTable [nzData]="listOfData"nzBordered>
       <thead>
         <tr>
           <th>Name</th>
@@ -13,18 +13,18 @@ import { Component } from '@angular/core';
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let data of nzTable.data; index as i;">
-          <td>{{data.name}}</td>
-          <td [attr.colspan]="i==4?5:1">{{data.age}}</td>
-          <td [attr.rowspan]="i==2?2:1" *ngIf="(i!=3)&&(i!=4)">{{data.tel}}</td>
-          <td *ngIf="i!=4">{{data.phone}}</td>
-          <td *ngIf="i!=4">{{data.address}}</td>
+        <tr *ngFor="let data of colSpanTable.data; index as i;">
+          <td>{{ data.name }}</td>
+          <td [attr.colspan]="i === 4 ? 5 : 1">{{ data.age }}</td>
+          <td [attr.rowspan]="i === 2 ? 2 : 1" *ngIf="i !== 3 && i !== 4">{{ data.tel }}</td>
+          <td *ngIf="i !== 4">{{data.phone}}</td>
+          <td *ngIf="i !== 4">{{data.address}}</td>
         </tr>
       </tbody>
     </nz-table>`
 })
 export class NzDemoTableColspanRowspanComponent {
-  dataSet = [
+  listOfData = [
     {
       key    : '1',
       name   : 'John Brown',

diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-通过 `nz-dropdown`、`nzFilters` 和 `nzFilterChange` 定义自定义的列筛选功能，并实现一个搜索列的示例。
+通过 `nz-dropdown`、`nzFilters` 和 `nzFilterChange` 定义自定义的列筛选功能，并实现一个搜索列的示例，实际使用中建议将搜索组件进行单独封装。
 
 ## en-US
 

diff --git a/components/table/demo/custom-filter-panel.ts b/components/table/demo/custom-filter-panel.ts
@@ -3,21 +3,22 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-table-custom-filter-panel',
   template: `
-    <nz-table #nzTable [nzData]="displayData">
+    <nz-table #nzTable [nzData]="listOfDisplayData">
       <thead>
         <tr>
           <th nzCustomFilter>
             Name
-            <nz-dropdown nzTrigger="click" [nzClickHide]="false" #dropdown>
-              <i nz-icon type="smile-o" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
-              <div class="custom-filter-dropdown">
+            <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
+              <i nz-icon nzType="search" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
+              <div class="search-box">
                 <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue">
-                <button nz-button [nzType]="'primary'" (click)="search()">Search</button>
+                <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">Search</button>
+                <button nz-button nzSize="small" (click)="reset()">Reset</button>
               </div>
             </nz-dropdown>
           </th>
           <th>Age</th>
-          <th nzShowFilter [nzFilters]="filterAddressArray" (nzFilterChange)="filterAddressChange($event)">Address</th>
+          <th nzShowFilter [nzFilters]="listOfFilterAddress" (nzFilterChange)="filterAddressChange($event)">Address</th>
         </tr>
       </thead>
       <tbody>
@@ -30,39 +31,36 @@ import { Component } from '@angular/core';
     </nz-table>`,
   styles  : [
       `
-      .custom-filter-dropdown {
+      .search-box {
         padding: 8px;
-        border-radius: 6px;
-        background: #fff;
-        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
       }
 
-      [nz-input] {
-        width: 130px;
-        margin-right: 8px;
+      .search-box input {
+        width: 188px;
+        margin-bottom: 8px;
+        display: block;
+      }
+
+      .search-box button {
+        width: 90px;
       }
 
-      .highlight {
-        color: #f50;
+      .search-button {
+        margin-right: 8px;
       }
     `
   ]
 })
 export class NzDemoTableCustomFilterPanelComponent {
   searchValue = '';
-  filterAddressArray = [
+  sortName = null;
+  sortValue = null;
+  listOfFilterAddress = [
     { text: 'London', value: 'London' },
     { text: 'Sidney', value: 'Sidney' }
   ];
-  searchAddress = [];
-  sortMap = {
-    name   : null,
-    age    : null,
-    address: null
-  };
-  sortName = null;
-  sortValue = null;
-  data = [
+  listOfSearchAddress = [];
+  listOfData = [
     {
       name   : 'John Brown',
       age    : 32,
@@ -84,28 +82,30 @@ export class NzDemoTableCustomFilterPanelComponent {
       address: 'London No. 2 Lake Park'
     }
   ];
-  displayData = [ ...this.data ];
+  listOfDisplayData = [ ...this.listOfData ];
+
+  reset(): void {
+    this.searchValue = '';
+    this.search();
+  }
 
   sort(sortName: string, value: boolean): void {
     this.sortName = sortName;
     this.sortValue = value;
-    for (const key in this.sortMap) {
-      this.sortMap[ key ] = (key === sortName ? value : null);
-    }
     this.search();
   }
 
   filterAddressChange(value: string[]): void {
-    this.searchAddress = value;
+    this.listOfSearchAddress = value;
     this.search();
   }
 
   search(): void {
     const filterFunc = (item) => {
-      return (this.searchAddress.length ? this.searchAddress.some(address => item.address.indexOf(address) !== -1) : true) &&
+      return (this.listOfSearchAddress.length ? this.listOfSearchAddress.some(address => item.address.indexOf(address) !== -1) : true) &&
         (item.name.indexOf(this.searchValue) !== -1);
     };
-    const data = this.data.filter(item => filterFunc(item));
-    this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1));
+    const data = this.listOfData.filter(item => filterFunc(item));
+    this.listOfDisplayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1));
   }
 }
diff --git a/components/table/demo/default-filter.md b/components/table/demo/default-filter.md
@@ -7,8 +7,8 @@
 
 ## zh-CN
 
-通过设置 filter 对象的 `{ byDefault: true }` 属性来默认启用一个筛选器。注意，你必须同时自行设置过滤后应当展示的列表项，为了保持数据流的清晰和数据的一致性，ng-zorro 不会为你做这项工作。详情请见 demo。
+通过设置 filter 对象的 `{ byDefault: true }` 属性来默认启用一个筛选器。注意，你必须同时自行设置过滤后应当展示的列表项，为了保持数据流的清晰和数据的一致性，组件库不会为你做这项工作。详情请见 demo。
 
 ## en-US
 
-you can enable a filter by default by setting a `filter` object's property: `{ byDefault: true }`. Be aware that you should set the filtered table contents by yourself. In order to keep clarity and consistency of data, ng-zorro would not do default filtering for you. Please refer to the demo.
+you can enable a filter by default by setting a `filter` object's property: `{ byDefault: true }`. Be aware that you should set the filtered table contents by yourself. In order to keep clarity and consistency of data, components would not do default filtering for you. Please refer to the demo.
diff --git a/components/table/demo/default-filter.ts b/components/table/demo/default-filter.ts
@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-table-default-filter',
   template: `
-    <nz-table #filterTable [nzData]="displayData">
+    <nz-table #filterTable [nzData]="listOfDisplayData">
       <thead (nzSortChange)="sort($event)" nzSingleSort>
         <tr>
-          <th nzShowSort nzSortKey="name" nzShowFilter [nzFilters]="nameList" (nzFilterChange)="filter($event,searchAddress)">Name</th>
+          <th nzShowSort nzSortKey="name" nzShowFilter [nzFilters]="listOfName" (nzFilterChange)="filter($event,searchAddress)">Name</th>
           <th nzShowSort nzSortKey="age">Age</th>
-          <th nzShowSort nzSortKey="address" nzShowFilter [nzFilterMultiple]="false" [nzFilters]="addressList" (nzFilterChange)="filter(listOfSearchName,$event)">Address</th>
+          <th nzShowSort nzSortKey="address" nzShowFilter [nzFilterMultiple]="false" [nzFilters]="listOfAddress" (nzFilterChange)="filter(listOfSearchName,$event)">Address</th>
         </tr>
       </thead>
       <tbody>
@@ -21,41 +21,35 @@ import { Component } from '@angular/core';
     </nz-table>`
 })
 export class NzDemoTableDefaultFilterComponent {
-  nameList = [
-    { text: 'Joe', value: 'Joe', byDefault: true },
-    { text: 'Jim', value: 'Jim' }
-  ];
-  addressList = [
-    { text: 'London', value: 'London', byDefault: true },
-    { text: 'Sidney', value: 'Sidney' }
-  ];
+  listOfName = [ { text: 'Joe', value: 'Joe', byDefault: true }, { text: 'Jim', value: 'Jim' } ];
+  listOfAddress = [ { text: 'London', value: 'London', byDefault: true }, { text: 'Sidney', value: 'Sidney' } ];
+  listOfSearchName = [ 'Joe' ];  // You need to change it as well!
   sortName = null;
   sortValue = null;
-  listOfSearchName = [ 'Joe' ];  // You need to change it as well!
   searchAddress = 'London';
-  data = [
+  listOfData = [
     {
-      name: 'John Brown',
-      age: 32,
+      name   : 'John Brown',
+      age    : 32,
       address: 'New York No. 1 Lake Park'
     },
     {
-      name: 'Jim Green',
-      age: 42,
+      name   : 'Jim Green',
+      age    : 42,
       address: 'London No. 1 Lake Park'
     },
     {
-      name: 'Joe Black',
-      age: 32,
+      name   : 'Joe Black',
+      age    : 32,
       address: 'Sidney No. 1 Lake Park'
     },
     {
-      name: 'Jim Red',
-      age: 32,
+      name   : 'Jim Red',
+      age    : 32,
       address: 'London No. 2 Lake Park'
     }
   ];
-  displayData = [ ]; // You need to change it as well!
+  listOfDisplayData = []; // You need to change it as well!
 
   sort(sort: { key: string, value: string }): void {
     this.sortName = sort.key;
@@ -72,12 +66,12 @@ export class NzDemoTableDefaultFilterComponent {
   search(): void {
     /** filter data **/
     const filterFunc = item => (this.searchAddress ? item.address.indexOf(this.searchAddress) !== -1 : true) && (this.listOfSearchName.length ? this.listOfSearchName.some(name => item.name.indexOf(name) !== -1) : true);
-    const data = this.data.filter(item => filterFunc(item));
+    const data = this.listOfData.filter(item => filterFunc(item));
     /** sort data **/
     if (this.sortName && this.sortValue) {
-      this.displayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1));
+      this.listOfDisplayData = data.sort((a, b) => (this.sortValue === 'ascend') ? (a[ this.sortName ] > b[ this.sortName ] ? 1 : -1) : (b[ this.sortName ] > a[ this.sortName ] ? 1 : -1));
     } else {
-      this.displayData = data;
+      this.listOfDisplayData = data;
     }
   }
 }
diff --git a/components/table/demo/drag-sorting.ts b/components/table/demo/drag-sorting.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-table-drag-sorting',
   template: `
-    <nz-table [nzData]="dataSet" [nzFrontPagination]="false" [nzShowPagination]="false">
+    <nz-table [nzData]="listOfData" [nzFrontPagination]="false" [nzShowPagination]="false">
       <thead>
         <tr>
           <th>Name</th>
@@ -13,7 +13,7 @@ import { Component } from '@angular/core';
         </tr>
       </thead>
       <tbody cdkDropList (cdkDropListDropped)="drop($event)">
-        <tr *ngFor="let data of dataSet" cdkDrag>
+        <tr *ngFor="let data of listOfData" cdkDrag>
           <td>{{data.name}}</td>
           <td>{{data.age}}</td>
           <td>{{data.address}}</td>
@@ -35,7 +35,7 @@ import { Component } from '@angular/core';
   ]
 })
 export class NzDemoTableDragSortingComponent {
-  dataSet = [
+  listOfData = [
     {
       key    : '1',
       name   : 'John Brown',
@@ -57,6 +57,6 @@ export class NzDemoTableDragSortingComponent {
   ];
 
   drop(event: CdkDragDrop<string[]>): void {
-    moveItemInArray(this.dataSet, event.previousIndex, event.currentIndex);
+    moveItemInArray(this.listOfData, event.previousIndex, event.currentIndex);
   }
 }