Material Table Filter (matTableFilter Directive)
Provides filtering support for @angular/material tables. Table filtering is done by using the directive matTableFilter. This project is inspired by Hibernate's example api. By employing this directive you will end up with having
- Less code, less complicated logic for filtering
- Default debounce support
- Being able to filter nested objects no matter how deep the properties are
Installation
npm install --save mini-mat-table-filter
NOTE: For the previous major versions of Angular install version 1.2.5
npm install --save mini-mat-table-filter@1.2.5
After installing mini-mat-table-filter import MatTableFilterModule in your ngModule
import { MatTableFilterModule } from 'mini-mat-table-filter';
Usage
A datasource of a simple array won't work. In order to use matTableFilter, 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.
- 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
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.
mini-mat-table-filter-example
Stackblitz demo
API
MatTableFilterDirective
matTableFilter is the directive selector
Input | Property | Type | Description |
---|---|---|---|
@Input |
exampleEntity | any |
The example entity that is used to filter the table |
@Input |
filterType | MatTableFilter |
(Optional) Defines the filtering strategy. Default value is FilterType.ANYWHERE |
@Input |
debounceTime | number |
(Optional) Defines debounce time in milliseconds. Default value is 400 |
@Input |
caseSensitive | boolean |
(Optional) Default value is false |
@Input |
customPredicate | (data: any) => boolean |
(Optional) You can set your own filtering implementation by providing your predicate function with this input |
@Input |
propertyOptions | PropertyOptions |
(Optional) With this input you can set seperate filterTypes and some more options for different keys of table item |
PropertyOptions
Property | Type | Description |
---|---|---|
[property: string] |
Options \| (data: any) => boolean |
Key-Value pair where you set Options or PredicateFunc for a property. See examples. |
Options
Property | Type | Description |
---|---|---|
filterType | MatTableFilter |
(Optional) Defines the filtering strategy. Default value is FilterType.ANYWHERE |
caseSensitive | boolean |
(Optional) Default value is false |
MatTableFilter (Filter Types)
Contributing
This project is a library project inside mat-table-extensions angular workspace. If you are interested in the source code of this particular library you can get ready and build the project by applying the steps below:
- Do
npm install
inmat-table-extensions
directory - Do
npm install
inmat-table-extensions\projects\mini-mat-table-filter
directory - Go to
mat-table-extensions
directory - Build it:
ng build mini-mat-table-filter
Licence
Apache-2.0