Material Table Filter (matTableFilter Directive)

 !Total Downloads

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 mat-table-filter@1.2.5
`
npm install mat-table-filter@1.2.5
`

For Angular versions between 8-13 (inclusive), please install mat-table-filter@10.2.4
`
npm install mat-table-filter@10.2.4
`

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);
`
1. Add matTableFilter directive as a property to your material table.
`html



`
2. Keep an example object of the same type with your items in your table.
3. Bind the exampleObject to the exampleEntity property of the matTableFilter directive
`html

`

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.

 

$3

 

API

$3

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 |


 

$3


| Property | Type | Description |
|----------|-------------|-------------|
| [property: string] | Options \| (data: any) => boolean | Key-Value pair where you set Options or PredicateFunc for a property. See examples.|

 

$3

| Property | Type | Description |
|----------|-------------|-------------|
| filterType | MatTableFilter | (Optional) Defines the filtering strategy. Default value is FilterType.ANYWHERE|
| caseSensitive | boolean | (Optional) Default value is false|

 

$3

`js
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:

1. Do `npm install` in `ng-material-extensions` directory
2. Do `npm install` in `ng-material-extensions\projects\mat-table-filter` directory
3. Go to `ng-material-extensions` directory
4. Build it:
`
ng build mat-table-filter
`
5. You can run the showcase application and see your changes in action. In `ng-material-extensions` run `ng 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