mat-table-filter

Provides filtering support for @angular/material tables

Usage no npm install needed!

<script type="module">
  import matTableFilter from 'https://cdn.skypack.dev/mat-table-filter';
</script>

README

Material Table Filter (matTableFilter Directive)

Node version 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);
  1. Add matTableFilter directive as a property to your material table.
<table mat-table matTableFilter [dataSource]="dataSource"  ...>
  1. Keep an example object of the same type with your items in your table.
  2. 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:

  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
  1. 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.

GitHub Org's stars -> Become a star-gazer, giving a star at Github

Patreon Badge -> Become a Patreon

Crypto Donation -> Donate in crypto currencies

 

Licence

Apache-2.0