feat(module:table): support default filter

close NG-ZORRO#1872

add spec and fix bug

components/table/demo/dynamic-settings.md

@@ -1,5 +1,5 @@
 ---
-order: 26
+order: 27
 title:
   en-US: Dynamic Settings
   zh-CN: 动态控制表格属性

components/table/doc/index.en-US.md

@@ -109,7 +109,7 @@ Filter property
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzShowFilter]` | Whether show filter | boolean | - |
-| `[nzFilters]` | Filter options,  `text`，and `value` for callback | `Array<{ text: string; value: any }>` | - |
+| `[nzFilters]` | Filter options,  `text`, and `value` for callback, `byDefalt` to enable filter by default | `Array<{ text: string; value: any; byDefault?: boolean }>` | - |
 | `[nzFilterMultiple]` | Whether filter multiple mode | boolean | true |
 | `(nzFilterChange)` | Filter change callback `value` | `EventEmitter<any[] 丨 any>` | - |
 

components/table/doc/index.zh-CN.md

@@ -118,7 +118,7 @@ Table 组件同时具备了易用性和高度可定制性
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzShowFilter]` | 是否显示过滤 | boolean | - |
-| `[nzFilters]` | 过滤器内容, 显示数据 `text`，回调函数传出 `value` | `Array<{ text: string; value: any }>` | - |
+| `[nzFilters]` | 过滤器内容, 显示数据 `text`，回调函数传出 `value`，设置 `byDefault` 以默认应用过滤规则 | `Array<{ text: string; value: any; byDefault?: boolean }>` | - |
 | `[nzFilterMultiple]` | 是否为多选过滤器 | boolean | true |
 | `(nzFilterChange)` | 过滤器内容选择的 value 数据回调 | `EventEmitter<any[]丨 any>` | - |
 

components/table/nz-th.component.ts

@@ -15,7 +15,7 @@ import { toBoolean } from '../core/util/convert';
 import { NzDropDownComponent } from '../dropdown/nz-dropdown.component';
 
 /* tslint:disable-next-line:no-any */
-export type NzThFilterType = Array<{ text: string; value: any }>;
+export type NzThFilterType = Array<{ text: string; value: any; byDefault?: boolean }>;
 
 export interface NzThItemInterface {
   text: string;
@@ -37,6 +37,7 @@ export class NzThComponent {
   private _showFilter = false;
   private _showCheckbox = false;
   private _showRowSelection = false;
+  private _hasDefaultFilter = false;
   el: HTMLElement;
   hasFilterValue = false;
   multipleFilterList: NzThItemInterface[] = [];
@@ -196,7 +197,7 @@ export class NzThComponent {
     this.initSingleFilterList();
     this.search();
     this.hideDropDown();
-    this.hasFilterValue = false;
+    this.hasFilterValue =  !!this._hasDefaultFilter;
   }
 
   checkMultiple(filter: NzThItemInterface): void {
@@ -236,13 +237,32 @@ export class NzThComponent {
 
   initMultipleFilterList(): void {
     this.multipleFilterList = this.nzFilters.map(item => {
-      return { text: item.text, value: item.value, checked: false };
+      const checked = !!item.byDefault;
+      if (checked) { this._hasDefaultFilter = true; }
+      return { text: item.text, value: item.value, checked };
     });
+    this.checkDefaultFilters();
   }
 
   initSingleFilterList(): void {
     this.singleFilterList = this.nzFilters.map(item => {
-      return { text: item.text, value: item.value, checked: false };
+      const checked = !!item.byDefault;
+      if (checked) { this._hasDefaultFilter = true; }
+      return { text: item.text, value: item.value, checked };
+    });
+    this.checkDefaultFilters();
+  }
+
+  checkDefaultFilters(): void {
+    if (!this.nzFilters || this.nzFilters.length === 0 || !this._hasDefaultFilter) { return; }
+    // To avoid mutating the source table data twice in a cycle
+    setTimeout(() => {
+      if (this.nzFilterMultiple) {
+        this.nzFilterChange.emit(this.filterList);
+      } else {
+        this.nzFilterChange.emit(this.filterValue);
+      }
+      this.updateFilterStatus();
     });
   }
 

components/table/nz-th.spec.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { fakeAsync, flush, TestBed } from '@angular/core/testing';
+import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 import { NzTableComponent } from './nz-table.component';
@@ -10,7 +10,7 @@ describe('nz-th', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzThTestNzTableComponent ],
+      declarations: [ NzThTestNzTableComponent, NzThTestTableDefaultFilterComponent ],
       providers   : [ NzMeasureScrollbarService ]
     });
     TestBed.compileComponents();
@@ -256,6 +256,26 @@ describe('nz-th', () => {
       }).toThrow();
     });
   });
+  describe('nz-th with default filter in nz-table', () => {
+    let fixture;
+    let testComponent;
+    let th;
+    let table;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzThTestTableDefaultFilterComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      th = fixture.debugElement.query(By.directive(NzThComponent));
+      table = fixture.debugElement.query(By.directive(NzTableComponent));
+    });
+    it('should default filter work', (done) => {
+      expect(testComponent.displayData.length).toBe(4);
+      fixture.whenStable().then(() => {
+        expect(testComponent.displayData.length).toBe(0);
+        done();
+      });
+    });
+  });
 });
 
 @Component({
@@ -314,6 +334,88 @@ export class NzThTestNzTableComponent {
   expand = false;
 }
 
+@Component({
+  selector: 'nz-demo-table-default-filter',
+  template: `
+    <nz-table #filterTable [nzData]="displayData">
+      <thead (nzSortChange)="sort($event)" nzSingleSort>
+        <tr>
+          <th nzShowSort nzSortKey="name" nzShowFilter [nzFilters]="nameList" (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>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of filterTable.data">
+          <td>{{data.name}}</td>
+          <td>{{data.age}}</td>
+          <td>{{data.address}}</td>
+        </tr>
+      </tbody>
+    </nz-table>`
+})
+export class NzThTestTableDefaultFilterComponent {
+  nameList = [
+    { text: 'Joe', value: 'Joe', byDefault: true },
+    { text: 'Jim', value: 'Jim' }
+  ];
+  addressList = [
+    { text: 'London', value: 'London', byDefault: true },
+    { text: 'Sidney', value: 'Sidney' }
+  ];
+  sortName = null;
+  sortValue = null;
+  listOfSearchName = [];
+  searchAddress: string;
+  data = [
+    {
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park'
+    },
+    {
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park'
+    },
+    {
+      name: 'Jim Red',
+      age: 32,
+      address: 'London No. 2 Lake Park'
+    }
+  ];
+  displayData = [ ...this.data ];
+
+  sort(sort: { key: string, value: string }): void {
+    this.sortName = sort.key;
+    this.sortValue = sort.value;
+    this.search();
+  }
+
+  filter(listOfSearchName: string[], searchAddress: string): void {
+    this.listOfSearchName = listOfSearchName;
+    this.searchAddress = searchAddress;
+    this.search();
+  }
+
+  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));
+    /** sort data **/
+    if (this.sortName) {
+      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));
+    } else {
+      this.displayData = data;
+    }
+  }
+}
+
 @Component({
   selector: 'nz-disable-th',
   template: `