Improved Form Input on Dashboard

src/app/graphs/graphs.component.html

@@ -72,7 +72,7 @@
           >Run</button>
 
       </mat-card-header>
-      <div >
+        <p>
         <mat-form-field style="height:5vw"> 
           <mat-date-range-input [rangePicker]="picker">
             <input matStartDate [(ngModel)]="start_date">
@@ -81,14 +81,16 @@
           <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
           <mat-date-range-picker #picker></mat-date-range-picker>
         </mat-form-field>
-
+      </p>
+      <p>
         <mat-form-field style="height:5vw">
           <mat-label>Location ID(s)</mat-label>
           <input matInput 
           [(ngModel)]="form.location"
           placeholder="Ex. Pizza">
         </mat-form-field>
-      
+      </p>
+      <p>
         <mat-form-field style="height:5vw">
           <mat-label>Student ID(s)</mat-label>
           <textarea matInput 
@@ -96,7 +98,8 @@
           placeholder="Ex. It makes me feel..."></textarea>
 
         </mat-form-field>
-
+</p>
+<p>
         <mat-form-field style="height:5vw">
           <mat-label>Compute ID(s)</mat-label>
           <textarea matInput 
@@ -104,7 +107,7 @@
           placeholder="Ex. It makes me feel..."></textarea>
 
         </mat-form-field>
-      </div>
+        </p>
     </mat-card>
 
   </mat-grid-tile>
@@ -159,29 +162,50 @@
       <mat-card-header>
         <h3 class="mb-0">Records to be processed </h3>
       </mat-card-header>
-      <div class="table-responsive">
-        <table class="table align-items-center table-flush">
-          <thead>
-            <tr>
-              <th>Barcode </th>
-              <th>Date</th>
-              <th>Location</th>
-              <th>IDs</th>
-              <th>Contacts</th>
-              <th>Notifications</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let sample of searchResult">
-              <td>{{sample.barcode}}</td>
-              <td>{{sample.date| date :"medium"}}</td>
-              <td>Location: {{sample.location}}<br>Station: {{sample.station}}</td>
-              <td>Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}</td>
-              <td>Phone: {{sample.phone}}<br>Email: {{sample.email}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+
+      <table mat-table [dataSource]="searchResult" class="mat-elevation-z8">
+
+        <!--- Note that these columns can bea defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
+      
+        <!-- Position Column -->
+        <ng-container matColumnDef="position">
+          <th mat-header-cell *matHeaderCellDef> Barcode </th>
+          
+          <td mat-cell *matCellDef="let sample; let i = index;"> {{sample.barcode}} </td>
+        </ng-container>
+      
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> Date </th>
+          
+          <td mat-cell *matCellDef="let sample; let i = index;"> {{sample.date}}</td>
+        </ng-container>
+      
+        <!-- Weight Column -->
+        <ng-container matColumnDef="weight">
+          <th mat-header-cell *matHeaderCellDef> Location </th>
+          
+          <td mat-cell *matCellDef="let sample; let i = index;"> Location: {{sample.location}}<br>Station: {{sample.station}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="email">
+
+          <th mat-header-cell *matHeaderCellDef> IDs </th>
+          <td mat-cell *matCellDef="let sample; let i = index;">
+            Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="text">
+          <th mat-header-cell *matHeaderCellDef> Contacts </th>
+          <td mat-cell *matCellDef="let sample; let i = index;">
+            Phone: {{sample.phone}}<br>Email: {{sample.email}}
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+    
     </mat-card>
   </mat-grid-tile>
 

src/app/graphs/graphs.component.ts

@@ -87,10 +87,10 @@ export class GraphsComponent implements OnInit {
       }
     }
   };
-
   tempData: JSON = <JSON>{};
 
   searchResult: Sample[] = [];
+  displayedColumns: string[] = ['position', 'name', 'weight', 'text', 'email'];
 
   start_date: Date = new Date();
   end_date: Date = new Date();