Change bikes table

src/app/app.component.html

@@ -37,9 +37,7 @@
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>
-      <div>
         <router-outlet></router-outlet>
-      </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

src/app/pages/tables/bikes/bikes.component.html

@@ -1,28 +1,37 @@
+<div class="table-control">
   <button mat-raised-button color="primary">Primary</button>
   <button mat-raised-button color="accent">Accent</button>
-
+</div>
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="bikes" class="mat-elevation-z8">
-
   <!--- Note that these columns can be defined in any order.
         The actual rendered columns are set as a property on the row definition" -->
 
   <!-- Position Column -->
-  <ng-container matColumnDef="position">
+  <ng-container matColumnDef="id">
-    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <th mat-header-cell *matHeaderCellDef>ID</th>
-    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
   </ng-container>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Name</th>
-    <td mat-cell *matCellDef="let element" contenteditable (input)="onTableInput(element)"> {{element.name}} </td>
+    <td
+      mat-cell
+      *matCellDef="let element"
+      contenteditable
+      (input)="onTableInput(element)"
+    >
+      {{ element.name }}
+    </td>
   </ng-container>
 
   <!-- Weight Column -->
   <ng-container matColumnDef="weight">
     <th mat-header-cell *matHeaderCellDef>Weight</th>
     <td mat-cell *matCellDef="let element">
-    <mat-form-field><input matInput color="warn" [value]="element.weight"></mat-form-field>
+      <mat-form-field
+        ><input matInput color="warn" [value]="element.weight"
+      /></mat-form-field>
     </td>
   </ng-container>
 
@@ -33,5 +42,5 @@
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>

src/app/pages/tables/bikes/bikes.component.scss

@@ -0,0 +1,6 @@
+.table-control {
+    margin: 0.5em;
+}
+table {
+    width: 100%;
+}

src/app/pages/tables/bikes/bikes.component.ts

@@ -10,8 +10,7 @@ type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["cargoBike
   styleUrls: ['./bikes.component.scss'],
 })
 export class BikesComponent implements OnInit {
-  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  displayedColumns: string[] = ['id', 'name', 'weight', 'symbol'];
-  dataSource = ELEMENT_DATA;
   
   bikes: CargoBikeResult[];
 
@@ -32,16 +31,3 @@ export class BikesComponent implements OnInit {
 
   ngOnInit(): void {}
 }
-
-const ELEMENT_DATA = [
-  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
-  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
-  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
-  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
-  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
-  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
-  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
-  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
-  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
-  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
-];