[Table] - Add example with multiple filtering columns

[dev054]

Bug, feature request, or proposal:

Proposal.

What is the expected behavior?

It would be good to see an example showing multiple filters (in this case inputs/selects) to filter rows/cells in md-table.

You can see this as an example.

What is the current behavior?

Currently the filter example just shows how to filter multiple columns by a single input.

[mikeaxle]

@andrewseguin I haven't come across any examples on how to accomplish this yet... any leads?

[willshowell]

This shows two separate text filters, but the concept would be the same for selects, checkboxes, etc.

https://plnkr.co/edit/oQOYQgW0vCx8tfAgb1w9?p=preview

EDIT: and here's a version filtering with a slider

https://plnkr.co/edit/KZChr8jw1XJCCeNiDmUj?p=preview

[mikeaxle]

thanks! this has helped me sort out my issue, I couldn't tell from the sample code that it was just a filter in a filter, but the code in that plunker you sent is well formatted, I could easily understand it. Thanks again

[nickwinger]

Hi,

actually the mat(cdk)-table doesn't seem to be as flexible as promised.
I want to have a second header-row above the normal header-row
where i can have text-input fields for filtering each column
This doesn't seem to be possible as of right now ?

Regards,
Nick

[rbleuse]

@nickwinger ,
try this, this is working for me :

<ng-container matColumnDef="entity">
  <mat-header-cell *matHeaderCellDef>
    <div fxFlexFill>
      <span translate="front.monitoring.quarterly.entity"></span>
      <mat-form-field floatPlaceholder="never">
        <mat-icon matPrefix>search</mat-icon>
        <input matInput [formControl]="entityFilter">
      </mat-form-field>
    </div>
  </mat-header-cell>
  <mat-cell *matCellDef="let history">{{ history.entity }}</mat-cell>
</ng-container>

[nickwinger]

@spanja
i don't know what you are trying to tell me ?
Where is the "second" header row in here ??
This is only a filter header, actually i have the normal header with sorting also

[rbleuse]

My bad I misunderstood, I thought you wanted a second row in the header instead of a second header.

[erickyi2006]

trying to implement multiple columns filtering using the filterPredicate. The limitation i saw when trying to perform filtering on multiple columns is that the "this" pointer is that of the MatTableDataSource and not that of my component. if the filterPredicate pass back the context of my component, then i can have a simpler solution. At this point, the work around is have a form based input to accept search values for each column or to have another table above the main mat-table.

[erickyi2006]

solve it! woot!!!
first, as i said earlier, there is a limitation in the filteredPredicate, i tried to put in the component "this" pointer into each data item which solved my problem of accessing the "this" pointer inside the filterPredicate function. but still trying to manipulate this.dataSource.filteredData is too buggy.

i ended up rolling my own filter function.
the issue itself deals with a 2nd header. I solved it by putting a footer instead as this is our requirement. implementing another top header is similar.

Sharing my poc. hope this is useful to others.

  <mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="f1">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Field 1 </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.f1}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="f2">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Field 2</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.f2}}</mat-cell>
    </ng-container>

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

  <div class="eps-footer-row mat-header-row" role="row">
    <div class="eps-footer-cell mat-header-cell mat-column-f1" role="columnheader">
        <input (keyup)="applyColumnFilter('f1', $event.target.value)" placeholder="search Field 1" />
    </div>
    <div class="eps-footer-cell mat-header-cell mat-column-f2" role="columnheader">
        <input (keyup)="applyColumnFilter('f2', $event.target.value)" placeholder="search Field 2" />
    </div>
  </div>

  <mat-paginator [pageSizeOptions]="[5, 25, 50, 100]"></mat-paginator>

Updated: I also styled the two css elements; "eps-footer-row" and "eps-footer-cell". no magic here, just background colors and color

[nickwinger]

I also did it this way now as a workaround, but it is not perfect when it comes to horizontal scrolling and responsivness.
It is a hack and not a real second mat-header-row.