-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(data-table): ability to exclude columns when filtering data (closes
#513) (#548) * feat: Data Table: Searchable and unsearchable columns Added notsearchable property on columns to keep certain columns from being searched on in the filterData method. Also added unit tests for table and updated documentation. Closes #513 * fixing linting * updating notsearchable to filter * defaulting filter on demo to true * update(docs): data-table demo toggles * update(docs): fix filter * Updating to pass in an array of strings of column names to exclude from the search rather than the full columns config object. This will allow the columns by which you are searching on to be more easily changed on the fly * fix for backward compatability on filterData, fixing unit tests, backwards compatability test * updating parameter on filterdata to excludedColumns, changing label in unit test file, updating demo with latest API changes
- Loading branch information
1 parent
bec8a3a
commit 11c3d15
Showing
5 changed files
with
166 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 111 additions & 0 deletions
111
src/platform/core/data-table/data-table.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { | ||
| TestBed, | ||
| inject, | ||
| async, | ||
| ComponentFixture, | ||
| } from '@angular/core/testing'; | ||
| import 'hammerjs'; | ||
| import { Component } from '@angular/core'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { TdDataTableComponent, ITdDataTableColumn } from './data-table.component'; | ||
| import { TdDataTableService } from './services/data-table.service'; | ||
| import { CovalentDataTableModule } from './data-table.module'; | ||
| import { NgModule, DebugElement } from '@angular/core'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
|
|
||
| describe('Component: TdDataTableComponent', () => { | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [ | ||
| BrowserAnimationsModule, | ||
| CovalentDataTableModule, | ||
| ], | ||
| declarations: [ | ||
| TestFilterColumnComponent, | ||
| ], | ||
| providers: [ | ||
| TdDataTableService, | ||
| ], | ||
| }); | ||
| TestBed.compileComponents(); | ||
| })); | ||
|
|
||
| it('should create the component', (done: DoneFn) => { | ||
| let fixture: ComponentFixture<any> = TestBed.createComponent(TestFilterColumnComponent); | ||
| let component: TestFilterColumnComponent = fixture.debugElement.componentInstance; | ||
|
|
||
| fixture.detectChanges(); | ||
| fixture.whenStable().then(() => { | ||
| expect(component).toBeTruthy(); | ||
| done(); | ||
| }); | ||
| }); | ||
|
|
||
| it('should set filter and not get search hits and set it to false and get search results', (done: DoneFn) => { | ||
| inject([TdDataTableService], (tdDataTableService: TdDataTableService) => { | ||
| let fixture: ComponentFixture<any> = TestBed.createComponent(TestFilterColumnComponent); | ||
| let component: TestFilterColumnComponent = fixture.debugElement.componentInstance; | ||
|
|
||
| fixture.detectChanges(); | ||
| fixture.whenStable().then(() => { | ||
| let columns: ITdDataTableColumn[] = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance.columns; | ||
| expect(columns[1].filter).toBe(false); | ||
|
|
||
| let newData: any[] = component.data; | ||
| // backwards compatability test | ||
| newData = tdDataTableService.filterData(newData, '1452-2', true); | ||
| fixture.detectChanges(); | ||
| fixture.whenStable().then(() => { | ||
| expect(newData.length).toBe(1); | ||
|
|
||
| let nonSearchAbleColumns: string[] = component.columns | ||
| .filter((column: ITdDataTableColumn) => { | ||
| return (typeof column.filter !== undefined && column.filter === false); | ||
| }).map((column: ITdDataTableColumn) => { | ||
| return column.name; | ||
| }); | ||
| newData = component.data; | ||
| newData = tdDataTableService.filterData(newData, 'Pork', true, nonSearchAbleColumns); | ||
| fixture.detectChanges(); | ||
| fixture.whenStable().then(() => { | ||
| expect(newData.length).toBe(0); | ||
|
|
||
| fixture.detectChanges(); | ||
| fixture.whenStable().then(() => { | ||
| newData = component.data; | ||
| newData = tdDataTableService.filterData(newData, 'Pork', true, []); | ||
| fixture.detectChanges(); | ||
| fixture.whenStable().then(() => { | ||
| expect(newData.length).toBe(1); | ||
| done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| })(); | ||
| }); | ||
| }); | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <td-data-table | ||
| #dataTable | ||
| [data]="filteredData" | ||
| [columns]="columns"> | ||
| </td-data-table>`, | ||
| }) | ||
| class TestFilterColumnComponent { | ||
| data: any[] = [ | ||
| { sku: '1452-2', item: 'Pork Chops', price: 32.11 }, | ||
| { sku: '1421-0', item: 'Prime Rib', price: 41.15 }, | ||
| ]; | ||
| columns: ITdDataTableColumn[] = [ | ||
| { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit' }, | ||
| { name: 'item', label: 'Item name', filter: false }, | ||
| { name: 'price', label: 'Price (US$)', numeric: true }, | ||
| ]; | ||
|
|
||
| filteredData: any[] = this.data; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters