<p>modules</p>

<div>

<table #handlersTable mat-table
matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
(matSortChange)="sortHandlers($event)" matSortDisableClear
 [dataSource]="dataSource" class="mat-elevation-z8 packages-table">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Name">Name</th>
    <td mat-cell *matCellDef="let handler">{{handler.name}}</td>
  </ng-container>

  <ng-container matColumnDef="coverage">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Coverage">Coverage</th>
    <td mat-cell *matCellDef="let handler">{{handler.coverage}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let handler; columns: displayedColumns;" routerLink="/packages/{{package.id}}/handlers/{{handler.id}}"></tr>
</table>

<mat-paginator #paginator [length]="10" [pageSize]="itemsCount" [pageSizeOptions]="[10, 20, 30, 50]" showFirstLastButtons>

</mat-paginator>

</div>

<p>modules</p>


<div>

  <table #modulesTable mat-table
  matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
  (matSortChange)="sortModules($event)" matSortDisableClear
   [dataSource]="dataSource" class="mat-elevation-z8 packages-table">
  
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="Name">Name</th>
      <td mat-cell *matCellDef="let handler">{{handler.name}}</td>
    </ng-container>
  
    <ng-container matColumnDef="version">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="Version">Version</th>
      <td mat-cell *matCellDef="let module">{{module.version}}</td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let module; columns: displayedColumns;"></tr>
  </table>
  
  <mat-paginator #paginator [length]="10" [pageSize]="itemsCount" [pageSizeOptions]="[10, 20, 30, 50]" showFirstLastButtons>
  
  </mat-paginator>
  
  </div>