chore: table component sticky header

Author: jfmcquade

src/app/shared/components/template/components/table/table.component.html

@@ -5,7 +5,7 @@
       <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
-    <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
   </table>
 </div>

src/app/shared/components/template/components/table/table.component.scss

@@ -1,4 +1,9 @@
 .table-container {
   width: 100%;
-  overflow-y: scroll;
+  max-height: 80vh;
+  overflow: auto;
+
+  tr[mat-header-row] {
+    background-color: var(--ion-background-color);
+  }
 }