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)

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

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.

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);

Add matTableFilter directive as a property to your material table. Assign the table's template referance to it.

<table mat-table [dataSource]="dataSource" #myTable [matTableFilter]="myTable" ...>

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 [dataSource]="dataSource" #myTable [matTableFilter]="myTable" [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.

Full Example

We rename our "exampleObject" as filterEntity in this example.

table-test.component.html

<!-- All the placement of these inputs is just for the sake of example
  you are fully free to decide how your filter inputs will look like -->
<table mat-table [dataSource]="dataSource" #myTable class="mat-elevation-z8" [matTableFilter]="myTable" [exampleEntity]="filterEntity" [filterType]="filterType">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>
      <mat-form-field appearance="outline">
        <input matInput placeholder="Name" [(ngModel)]="filterEntity.name">
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="captainName">
    <th mat-header-cell *matHeaderCellDef>
      <mat-form-field appearance="outline">
        <input matInput placeholder="Captain Name" [(ngModel)]="filterEntity.captain.name">
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.captain.name}} </td>
  </ng-container>

  <ng-container matColumnDef="captainSurname">
    <th mat-header-cell *matHeaderCellDef>
      <mat-form-field appearance="outline">
        <input matInput placeholder="Captain Surname" [(ngModel)]="filterEntity.captain.surname">
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.captain.surname}} </td>
  </ng-container>

  <ng-container matColumnDef="isConstitutionClass">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox class="example-margin" [(ngModel)]="filterEntity.isConstitutionClass">Constitution Class</mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let element"> {{element.isConstitutionClass}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

table-test.component.ts

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { MatTableFilter } from 'mat-table-filter';

export class Captain {
  name: string;
  surname: string;
}

export class SpaceCraft {
  name: string;
  isConstitutionClass: boolean;
  captain: Captain;
}

const SPACECRAFT_DATA: SpaceCraft[] = [
  {name: 'Endurance', isConstitutionClass: false, captain: {name: 'Joseph', surname: 'Cooper'}},
  {name: 'Enterprise', isConstitutionClass: false, captain: {name: 'Christopher', surname: 'Pike'}},
  {name: 'Discovery', isConstitutionClass: false, captain: {name: 'Christopher', surname: 'Pike'}},
  {name: 'Enterprise', isConstitutionClass: false, captain: {name: 'Jean-Luc', surname: 'Pickard'}}
];

@Component({
  selector: 'app-table-test',
  templateUrl: './table-test.component.html',
  styleUrls: ['./table-test.component.css']
})

export class TableTestComponent implements OnInit {
  filterEntity: SpaceCraft;
  filterType: MatTableFilter;
  displayedColumns: string[] = ['name', 'captainName', 'captainSurname', 'isConstitutionClass'];
  dataSource = new MatTableDataSource(SPACECRAFT_DATA);
  constructor() { }

  ngOnInit() {
    // Do not forget to initialize your object and it's non-primitive properties
    this.filterEntity = new SpaceCraft();
    this.filterEntity.captain = new Captain();
    this.filterType = MatTableFilter.ANYWHERE;
  }
}

The input components are placed inside table headers in this example however you are completely free to do what ever you want. UX is up to you.

API

matTableFilter is the directive selector

Input	Property	Type	Description
`@Input`	matTableFilter	`any`	Directive selector. Takes template-referance of MatTable as input
`@Input`	exampleEntity	`any`	The example entity that is used to filter the table
`@Input`	filterType	`FilterType`	(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`