If you have been using Angular as your client side framework and worked with Material Tables before you probably know that custom and complicated filtering of the tables are not supported by default. For those complicated filtering requirements you eventually find yourself repeatadly writing ui code for filter inputs and making filter-predicate calls for every single table you put in your application.
In order to reduce the code repeat and have less filtering logic in my applications I had developed a library that provides easier filtering support to Angular Material tables through a directive. It is mat-table-filter, I recently decided to publish it on npm and github.
The way mat-table-filter works is inspired by hibernate’s example api. You define your example entity object and provide it to the directive and it’s done. When you populate the properties of the example entity the data on the table will be filtered out according to the properties of example entity you provide. Directive keeps the example entity object’s old and new values internally and compares them for any difference at ngDoCheck phase.
ngDoCheck(): void {
if (this._deepDiffService.isDifferent(this._oldExampleEntity, this._exampleEntity)) {
this._exampleEntitySubject.next();
}
}
Usage
A datasource of a simple array won’t work. In order to use mat-table-filter, your table’s datasource must be created as MatTableDataSource, see the example below.
dataSource = new MatTableDataSource(ELEMENT_DATA);
- Add matTableFilter directive as a property to your material table
<table mat-table matTableFilter [dataSource]="dataSource" ...>
- Keep an example object of the same type with your items in your table.
- Bind the exampleObject to the exampleEntity property of the matTableFilter directive
<table mat-table matTableFilter [dataSource]="dataSource" [exampleEntity]="exampleObject"...>
That’s all. When you populate the exampleObject’s properties, the filter will automatically work just fine with the default debounce support. You can change the debounce time also.
For an in-depth example please check the readme file of the project.
talhature.com 