<table mat-table class="full-width-table" (matSortChange)="sortData($event)" [dataSource]="this.datasrcCollIndex" aria-label="Elements" matSort matSortActive="strName" matSortDirection="asc" matSortDisableClear>

        <!-- Name Column -->
        <ng-container matColumnDef="strName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <mat-form-field style="margin-top: 0px;">
                    <input matInput placeholder="Name" (keyup)="filteringByColumns()"  [(ngModel)]="strName" >
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let user">{{user.strName}}</td>
        </ng-container>

        <!-- Gender Column -->
        <ng-container matColumnDef="strGender">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <mat-form-field style="margin-top: 0px; width: 70px;">
                    <input matInput placeholder="Gender" (keyup)="filteringByColumns()" [(ngModel)]="strGenderColumn">
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let user">{{user.strGender}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.dictstrDisplayedColumns"></tr>
        <tr mat-row (click)="this.showDetailsOfUsers(user)"
            *matRowDef="let user; columns: this.dictstrDisplayedColumns;"></tr>

    </table>