diff --git a/components/table/demo/custom-filter-panel.ts b/components/table/demo/custom-filter-panel.ts index b6b30e3cfba..f6f99b1f193 100644 --- a/components/table/demo/custom-filter-panel.ts +++ b/components/table/demo/custom-filter-panel.ts @@ -102,7 +102,7 @@ export class NzDemoTableCustomFilterPanelComponent { search(): void { const filterFunc = (item) => { - return (this.searchAddress.length ? this.searchAddress.some(address => item.address.indexOf(address.name) !== -1) : true) && + return (this.searchAddress.length ? this.searchAddress.some(address => item.address.indexOf(address) !== -1) : true) && (item.name.indexOf(this.searchValue) !== -1); }; const data = this.data.filter(item => filterFunc(item)); diff --git a/components/table/nz-th.component.ts b/components/table/nz-th.component.ts index dda17563e1a..3ded5366468 100644 --- a/components/table/nz-th.component.ts +++ b/components/table/nz-th.component.ts @@ -2,6 +2,7 @@ import { Component, ElementRef, EventEmitter, + HostBinding, Input, Output, Renderer2, @@ -55,6 +56,11 @@ export class NzThComponent { /* tslint:disable-next-line:no-any */ @Output() nzFilterChange = new EventEmitter(); + @HostBinding('class.ant-table-column-has-filters') + get hasFiltersClass(): boolean { + return this.nzShowSort || this.nzShowFilter; + } + @Input() set nzShowSort(value: boolean) { this._showSort = toBoolean(value); @@ -157,16 +163,30 @@ export class NzThComponent { this.nzSortChange.emit(this.nzSort); } + get filterList(): NzThItemInterface[] { + return this.multipleFilterList.filter(item => item.checked).map(item => item.value); + } + + /* tslint:disable-next-line:no-any */ + get filterValue(): any { + const checkedFilter = this.singleFilterList.find(item => item.checked); + return checkedFilter ? checkedFilter.value : null; + } + + updateFilterStatus(): void { + if (this.nzFilterMultiple) { + this.hasFilterValue = this.filterList.length > 0; + } else { + this.hasFilterValue = isNotNil(this.filterValue); + } + } + search(): void { + this.updateFilterStatus(); if (this.nzFilterMultiple) { - const filterList = this.multipleFilterList.filter(item => item.checked).map(item => item.value); - this.hasFilterValue = filterList.length > 0; - this.nzFilterChange.emit(filterList); + this.nzFilterChange.emit(this.filterList); } else { - const checkedFilter = this.singleFilterList.find(item => item.checked); - const filterValue = checkedFilter ? checkedFilter.value : null; - this.hasFilterValue = isNotNil(filterValue); - this.nzFilterChange.emit(filterValue); + this.nzFilterChange.emit(this.filterValue); } this.hideDropDown(); } @@ -204,6 +224,7 @@ export class NzThComponent { this._filters = value; this.initMultipleFilterList(); this.initSingleFilterList(); + this.updateFilterStatus(); } else { console.warn('nzFilters only accept type of Array<{ text: string; value: any }>'); } diff --git a/components/table/nz-th.spec.ts b/components/table/nz-th.spec.ts index 07866c8154e..c72d2dee7ff 100644 --- a/components/table/nz-th.spec.ts +++ b/components/table/nz-th.spec.ts @@ -77,9 +77,11 @@ describe('nz-th', () => { }); it('should showSort work', () => { fixture.detectChanges(); + expect(th.nativeElement.classList).not.toContain('ant-table-column-has-filters'); expect(th.nativeElement.querySelector('.ant-table-column-sorter')).toBeNull(); testComponent.showSort = true; fixture.detectChanges(); + expect(th.nativeElement.classList).toContain('ant-table-column-has-filters'); expect(th.nativeElement.querySelector('.ant-table-column-sorter')).toBeDefined(); }); it('should sort change work', () => { @@ -167,9 +169,11 @@ describe('nz-th', () => { }); it('should showFilter work', () => { fixture.detectChanges(); + expect(th.nativeElement.classList).not.toContain('ant-table-column-has-filters'); expect(th.nativeElement.querySelector('.anticon anticon-filter')).toBeNull(); testComponent.showFilter = true; fixture.detectChanges(); + expect(th.nativeElement.classList).toContain('ant-table-column-has-filters'); expect(th.nativeElement.querySelector('.anticon anticon-filter')).toBeDefined(); }); it('should filterChange work', () => { @@ -184,6 +188,35 @@ describe('nz-th', () => { expect(testComponent.nzThComponent.hasFilterValue).toBe(true); expect(testComponent.filterChange).toHaveBeenCalledWith([ '1' ]); }); + it('should hasFilter change after filters change with multiple', () => { + testComponent.showFilter = true; + fixture.detectChanges(); + testComponent.nzThComponent.checkMultiple(testComponent.nzThComponent.multipleFilterList[ 0 ]); + testComponent.nzThComponent.search(); + fixture.detectChanges(); + expect(testComponent.nzThComponent.hasFilterValue).toBe(true); + testComponent.filters = [ + { text: 'filter1', value: '4' }, + { text: 'filter2', value: '3' } + ]; + fixture.detectChanges(); + expect(testComponent.nzThComponent.hasFilterValue).toBe(false); + }); + it('should hasFilter change after filters change with single', () => { + testComponent.showFilter = true; + testComponent.filterMultiple = false; + fixture.detectChanges(); + testComponent.nzThComponent.checkSingle(testComponent.nzThComponent.singleFilterList[ 0 ]); + testComponent.nzThComponent.search(); + fixture.detectChanges(); + expect(testComponent.nzThComponent.hasFilterValue).toBe(true); + testComponent.filters = [ + { text: 'filter1', value: '5' }, + { text: 'filter2', value: '3' } + ]; + fixture.detectChanges(); + expect(testComponent.nzThComponent.hasFilterValue).toBe(false); + }); it('should reset work', () => { testComponent.showFilter = true; fixture.detectChanges();