I am facing an issue with incorporating multiple filters for each column in an angular material table. I cannot figure out why the filter input is not moving to a new line under the header. Here is an image for reference -> Angular material table with multiple filtering
HTML:
<div class="mat-elevation-z8" style="text-align:right;" dir="rtl">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Name Column -->
<ng-container matColumnDef="nvOperatorName">
<th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>
שם
<mat-form-field class="filter" floatLabel="never">
<mat-label>Search</mat-label>
<input matInput [formControl]="nameFilter" >
</mat-form-field>
</th>
<td mat-cell *matCellDef="let row"> {{row.nvOperatorName}} </td>
</ng-container>
<!-- Contact Name Column -->
<ng-container matColumnDef="nvContactPerson">
<th style="width: 10%;size: 100px;" mat-header-cell *matHeaderCellDef mat-sort-header> שם איש קשר
<mat-form-field class="filter" floatLabel="never">
<mat-label>Search</mat-label>
<input matInput [formControl]="ContactNameFilter" >
</mat-form-field>
</th>
<td mat-cell *matCellDef="let row"> {{row.nvContactPerson}} </td>
</ng-container>
...
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
CSS:
table {
width: 100%;
/* overflow-x: auto;
overflow-y: hidden;
min-width: 500px; */
}
th.mat-header-cell {
text-align: left;
max-width: 300px;
}
input.matInput{
direction: rtl;
}
p {
font-family: Lato;
}
.header {
padding: 5px;
}
.filter {
display: block;
}
If you have any suggestions or solutions for implementing multiple filters on a table, please share them. Your help would be greatly appreciated.