<div class="app-card-title mb-4">
	<anglo-title-component title="Standard"></anglo-title-component>
</div>
<div class="app-card standard-table-wrapper">
   <mat-card>
      <div>
         <div class="card-title p-2">
            <h3>{{'Standard'|translate}}</h3>
         </div>
         <div class="card-content p-2">
            <div class="content">
               <p>
                  The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the <code>hide-actions</code> prop.
               </p>
            </div>
            <div class="card-content">
               <div class="overflow-hidden">
                  <div class="table-responsive">
                  	<table mat-table [dataSource]="sourceData" matSort matSortDirection="asc" matSortDisableClear class="mat-elevation-z8 full-wid">
                        <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
                           <th mat-sort-header matTooltip={{column}} mat-header-cell *matHeaderCellDef> {{column}} </th>
                           <td mat-cell *matCellDef="let element2"> {{element2[column]}} </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                     </table>
                  </div>
               </div>
            </div>
         </div>  
      </div>    
   </mat-card>
</div>
