Extract table

Problem on sortable

dashboard/src/app/album/album.component.html

@@ -84,38 +84,9 @@
       </div>
   </div>
 
-  <table class="table table-striped" (window:scroll)="onScroll($event)">
-  <thead>
-      <tr>
-          <th></th>
-          <th>Name</th>
-          <th>Artist</th>
-          <th>Album</th>
-          <th>Album Artist</th>
-          <th>Play Count</th>
-          <th>Genre</th>
-      </tr>
-  </thead>
-  <tbody>
-      <tr *ngFor="let song of songs | sortBy : 'Track Number'">
-          <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
-          <td>{{song.Name}}</td>
-          <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
-          <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
-          <td>{{song['Album Artist']}}</td>
-          <td>{{song['Play Count']}}</td>
-          <td><a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a></td>
-      </tr>
-  </tbody>
-  </table>
+  <app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
 
   <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
       <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
   </button>
-
-  <!-- Go to Top Button-->
-  <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
-      aria-label="Top" (click)="scrollTop()">
-      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
-  </button>
   </div>