
<form [formGroup]="form" name="form" autocomplete="off" novalidate>
<table mat-table [dataSource]="dataSource" matSort [matSortActive]="sortColumn" matSortDisableClear
    [matSortDirection]="sortDirection" class="crud-table table" style="margin-bottom: 0; " #tablainput>

    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
            <mat-icon *ngIf="sortColumn === 'id'">
                
            </mat-icon>
        </th>
        <td mat-cell *matCellDef="let element" style="width: 450px;align-items: center;"
        >
             <xdf-checkbox name="{{element.identifier}}" [options]="{showSuggest: false}" [formGroup]="form" (onChange)="checkboxchange()">
            </xdf-checkbox>
            
        </td>
    </ng-container>

    <ng-container matColumnDef="identifier" >
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Descripción
            <mat-icon *ngIf="sortColumn === 'identifier'">
                <i class="fa fa-sort-amount-desc" *ngIf="sortDirection === 'desc'"></i>
                <i class="fa fa-sort-amount-asc" *ngIf="sortDirection === 'asc'"></i>
            </mat-icon>
        </th>
        <td mat-cell *matCellDef="let element"  >
            {{element.identifier}}</td>
    </ng-container>

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

</table>
<mat-paginator #paginator [length]="pagination?.totalItems" [pageSize]="5" 
    [pageSizeOptions]="[5]" [pageIndex]="pagination?.currentPage" (page)="pageChanged($event)" 
    >
</mat-paginator>
</form>
