Package Exports

mat-table-filter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mat-table-filter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 --save mat-table-filter

NOTE: For the previous major versions of Angular install version 1.2.5

npm install --save mat-table-filter@1.2.5

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 in ng-material-extensions directory
Do npm install in ng-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 run ng s -o

Licence

Apache-2.0