mat-table-filter
v15.0.0
Published
Provides filtering support for @angular/material tables
Downloads
4,315
Maintainers
Readme
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 mat-table-filter
NOTE: Angular versions older than Angular 8 should install [email protected]
npm install [email protected]
For Angular versions between 8-13 (inclusive), please install [email protected]
npm install [email protected]
After installing mat-table-filter import MatTableFilterModule in your ngModule
import { MatTableFilterModule } from 'mat-table-filter';
@NgModule({
imports: [
...
MatTableFilterModule
],
]})
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.
<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.
Stackblitz demo mat-table-filter-example
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)
export enum MatTableFilter {
EQUALS = 'EQUALS',
ANYWHERE = 'ANYWHERE',
STARTS_WITH = 'STARTS_WITH',
ENDS_WITH = 'ENDS_WITH'
}
Contributing
This project is a library project inside ng-material-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
inng-material-extensions
directory - Do
npm install
inng-material-extensions\projects\mat-table-filter
directory - Go to
ng-material-extensions
directory - Build it:
ng build mat-table-filter
- You can run the showcase application and see your changes in action. In
ng-material-extensions
runng s -o
Support & Donations
Feel free to show your support. Donating supporters will be added into Supporters section inside the README.md of the repository.
-> Become a star-gazer, giving a star at Github
-> Donate in crypto currencies
Licence
Apache-2.0