CODEWITHSUNDEEP
angularangular-material
Armen Stepanyan
Armen Stepanyan

Reputation: 1848

How to add filter row inside material table?

I'm using angular material table and I try to use filter option. In documentation I find filter example but for my case I need to add textInputs after each headers. How can I do it ? My example

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Id Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID</th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>


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

I need table like this. material filter columns

Upvotes: 7

Views: 13393

Answers (3)

Liam Fleming
Liam Fleming

Reputation: 1106

I struggled with this for a while, here's how I solved it:

You can't use the footer, unless you're happy to have your filter inputs on the bottom of the table.

From viewing the source of mat-table, there's no expansibility point for you to 'inject' the filters row.

But, what you can do is this:

  1. Add an additional 'matColumnDef' for each column, which will hold the filter input field:
// Original column
<ng-container matColumnDef="id">
   <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Id</th>
   <td mat-cell *matCellDef="let row">{{ row.id }}</td>
</ng-container>

// Additional 'filter' column
<ng-container matColumnDef="id-filter">
   <th mat-header-cell *matHeaderCellDef>
      <input type="number" (change)="filterchanged($event.target.value, 'id')" />
   </th>
</ng-container>

Then add a new list of column names to your controller:

  // Original column list
  displayedColumns: string[] = [
    'id'
  ];

  // Additional 'filter' column list
  displayedColumnFilters: string[] = [
    'id-filter'
  ];

In the table: Specify an additional header column using the new list 'displayedColumnFilters':

<tr mat-header-row *matHeaderRowDef="displayedColumnFilters"></tr>

  ...

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-header-row *matHeaderRowDef="displayedColumnFilters"></tr>

  <tr
    mat-row
    class="clickable"
    *matRowDef="let deal; columns: displayedColumns"
    (click)="dealClick(deal)"
  ></tr>

 </table>

This will add a new row with your input field:

enter image description here

A sprinkle of CSS and you're away:

enter image description here

Upvotes: 10

rakesh
rakesh

Reputation: 169

filterPredicate: ((data: T, filter: string) => boolean)

https://stackblitz.com/edit/stackover-flow-answer-02

Upvotes: -1

Tushar
Tushar

Reputation: 2078

I think this is the perfect case for you. Check below example:

https://stackblitz.com/edit/angular-hbakxo-5jeaic

Upvotes: 3

Related Questions