ng-mat-table-filter

This library adds MatSort like filter functionality to MatTable component. Add filtering functionality to column definition you want by simply adding mat-table-filter-header just like mat-sort-header

How to use

Assuming your application is already up and running using Angular Material, you can add this library by following these steps:

1. Install ng-mat-table-filter:

   npm i ng-mat-table-filter

2. Import the MatTableFilterModule and add it to the module that declares your component:

   import {MatTableModule} from '@angular/material/table';
   import {MatTableFilterModule} from 'ng-mat-table-filter';
   
   @NgModule({
     declarations: [MyComponent],
     imports: [MatTableModule, MatTableFilterModule],
   })
   export class MyModule {}

3. Use the directives in your component's template:

   <table mat-table matTableFilter [dataSource]="dataSource">
     <ng-container matColumnDef="position">
       <th mat-header-cell mat-table-filter-header *matHeaderCellDef>No.</th>
       <td mat-cell *matCellDef="let data">{{data.position}}</td>
     </ng-container>
   
     <ng-container matColumnDef="name">
       <th mat-header-cell mat-table-filter-header *matHeaderCellDef>Name</th>
       <td mat-cell *matCellDef="let data">{{data.name}}</td>
     </ng-container>
   
     <tr mat-header-row *matHeaderRowDef="myColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: myColumns;"></tr>
   </table>

Using mat-filter-table-header with mat-sort-header

To use both mat-filter-table-header and mat-sort-header together:

<ng-container matColumnDef="position">
  <th mat-header-cell mat-table-filter-header *matHeaderCellDef>
    <div mat-sort-header>No.</div>
  </th>
  <td mat-cell *matCellDef="let data">{{data.position}}</td>
</ng-container>

Rendered template

As default MatTableFilterComponent using for filter triggerer. But you can give your custom components that extends MatTableTriggerer<T> base class as well:

import {MatTableModule} from '@angular/material/table';
import {MAT_TABLE_TRIGGERER_TYPE, MatTableDefaultFilterSelection, MatTableFilterModule, MatTableTriggerer} from 'ng-mat-table-filter';

@Component({
  /**/
})
class MyCustomComponent extends MatTableTriggerer<MatTableDefaultFilterSelection> {}

@NgModule({
  declarations: [MyComponent],
  imports: [MatTableModule, MatTableFilterModule],
  providers: [
    {
      provide: MAT_TABLE_TRIGGERER_TYPE,
      useValue: Type<MyCustomComponent>,
    },
  ],
})
export class MyModule {}

Header type

There are 3 different types of default MatTableFilterButton. string, number and boolean. By default every filter header directive type is string. You can define the type by giving matTableFilterHeaderType input to mat-table-filter-header;

<ng-container matColumnDef="weight">
  <th mat-header-cell mat-table-filter-header matTableFilterHeaderType="number" *matHeaderCellDef>Weight</th>
  <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
</ng-container>
<ng-container matColumnDef="learned">
  <th mat-header-cell mat-table-filter-header matTableFilterHeaderType="boolean" *matHeaderCellDef>Learned</th>
  <td mat-cell *matCellDef="let element">{{ element.learned ? 'Yes' : 'No' }}</td>
</ng-container>

Live stackblitz demo