I've been attempting to implement checkbox filtering for a table, but none of my attempts have been successful so far.
Here is a snippet of my table structure:
<mat-table [dataSource]="dataSource" [hidden]="!show" matSort >
<!-- Location -->
<ng-container matColumnDef="AITOR">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
</ng-container>
<!-- Type -->
<ng-container matColumnDef="SOG_MCOLH">
<mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
</ng-container>
This is how my checkbox setup looks like:
<input class="CheckBoxClass" type="checkbox" value="RG" (onclick)="doFilter(RG)" >
<mdb-icon class="IconClass" fas icon="tint"></mdb-icon>
RG<br>
This is the function I am using in my component:
public doFilter = (value: string) => {
this.dataSource.filter = value.trim().toLocaleLowerCase();
}
I've experimented with using [checked] instead of (onclick), but neither seem to be effective. I also tried implementing a Pipe, however, I found it confusing and struggled to write it properly. Despite searching online for a solution, I haven't come across any examples of a checkbox filter implementation.