How to filter just one column in dataTable angular

Question

I'm working on an angular project I have created a Datatable with sorting/pagination/and filtring but I need filter my table now by one column, for example, I need to filter my table by CIN.

My cpm.ts:

fake_arr: fake[] = [];
displayedColumns: string[] = ['Role', 'Email', 'Fullname', 'CIN', 'Age', 'actions'];
listdata: MatTableDataSource < any > ;

@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, null) paginator: MatPaginator;
searchkey: string;

ngOnInit() {
    this.service.getUsers().subscribe((arr: fake[]) => {
        arr.forEach(element => {
            console.log(element);
        });
        this.listdata = new MatTableDataSource(arr);
        this.listdata.sort = this.sort;
        this.listdata.paginator = this.paginator;
    });
}

onfilterClear() {
    this.searchkey = "";
}

applyfilter() {
    this.listdata.filter = this.searchkey.trim().toLowerCase();
}

cmp.html:

<div class="mat-elevation-z8">
    <mat-table [dataSource]="listdata" matSort>
        <ng-container matColumnDef="Role">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Role</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.Role}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Email">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Fullname">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Fullname</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.Fname}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="CIN">
            <mat-header-cell *matHeaderCellDef mat-sort-header>CIN</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.CIN}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Age">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Age</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.age}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button>
                    <div class="tooltip">
                        <mat-icon>create</mat-icon><span class="tooltiptxt">Éditer</span>
                    </div>
                </button>
                <button mat-icon-button color="warn" class="sup">
                    <div class="tot">
                        <mat-icon>delete_outline</mat-icon><span class="tottxt">Supprimer</span>
                    </div>
                </button>
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5"></mat-paginator>
</div>

Plz guide me how to modify my code to do that

Nope I need to make filter input filter just by ordering just one data for example If I have data like {"name:"ala,"age:"15,"father:ihab"}{"name:"sami,"age:"15,"father:ala"} here I need to filter by name for example we have ala like input here the filter result just {"name:"ala,"age:"15,"father:ihab"} It's clear now? — omar bouhajja, Mar 27 '20 at 08:20
Hi. It would really help if you could prepare a stackblitz with how your code is right now https://stackblitz.com/ — igg, Mar 27 '20 at 09:56

score 1 · Answer 1 · answered Mar 27 '20 at 11:18

You can use filter method that creates an array filled with all array elements that pass a test:

    applyFilter(key: string) {
            const list=this.listdata.filter(a => String(a[key]).toLowerCase() == 
            String(this.searchKey).toLowerCase())
            this.dataSource = new MatTableDataSource<yourType>(list);
            this.listdata.sort = this.sort;
            this.listdata.paginator = this.paginator;
       }

where key is the property of object where the search is performed. So if table array has this two object:

[{"name:"ala,"age:"15,"father:ihab"}{"name:"sami,"age:"15,"father:ala"}]

if key is name and your serach key is ala it will find:

{"name:"ala,"age:"15,"father:ihab"}

How to filter just one column in dataTable angular

1 Answers1