Got the HTTP table working, just need to plug in the sort direction and active sort column

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -1,47 +1,57 @@
-<table *ngIf="dataSource" mat-table [dataSource]="dataSource.collection" class="mat-elevation-z8 table">
-
-  <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on the row definition" -->
-
-  <ng-container matColumnDef="requestedBy">
-    <th mat-header-cell *matHeaderCellDef> Requested By </th>
-    <td mat-cell *matCellDef="let element"> {{element.requestedUser.userAlias}} </td>
-  </ng-container>
-
-  <ng-container matColumnDef="title">
-    <th mat-header-cell *matHeaderCellDef> Title </th>
-    <td mat-cell *matCellDef="let element"> {{element.title}} ({{element.releaseDate | amLocal | amDateFormat: 'YYYY'}}) </td>
-  </ng-container>
-
-  <ng-container matColumnDef="requestedDate">
-    <th mat-header-cell *matHeaderCellDef> Request Date </th>
-    <td mat-cell *matCellDef="let element"> {{element.requestedDate | amLocal | amDateFormat: 'LL'}} </td>
-  </ng-container>
-  
-  <ng-container matColumnDef="status">
-    <th mat-header-cell *matHeaderCellDef> Status </th>
-    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
-  </ng-container>
-
-    
-  <ng-container matColumnDef="requestStatus">
-    <th mat-header-cell *matHeaderCellDef> Request Status </th>
-    <td mat-cell *matCellDef="let element">   
-      <div *ngIf="element.approved && !element.available">{{'Common.ProcessingRequest' | translate}}</div>
-      <div *ngIf="element.requested && !element.approved && !element.available">{{'Common.PendingApproval' | translate}}
-      </div>
-      <div *ngIf="!element.requested && !element.available && !element.approved">{{'Common.NotRequested' | translate}}
-      </div>
-    </td>
-  </ng-container>  
-
-  <ng-container matColumnDef="actions">
-    <th mat-header-cell *matHeaderCellDef> </th>
-    <td mat-cell *matCellDef="let element"> 
-    <button mat-raised-button color="primary" [routerLink]="">Details</button>  
-    </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+<div class="example-table-container mat-elevation-z8 ">
+  <div class="example-loading-shade" *ngIf="isLoadingResults">
+    <mat-spinner *ngIf="isLoading"></mat-spinner>
+  </div>
+
+  <table mat-table [dataSource]="dataSource" class="table" matSort matSortActive="requestedDate"
+    matSortDisableClear matSortDirection="desc">
+
+
+    <ng-container matColumnDef="requestedBy">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Requested By </th>
+      <td mat-cell *matCellDef="let element"> {{element.requestedUser?.userAlias}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="title">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>
+      <td mat-cell *matCellDef="let element"> {{element.title}} ({{element.releaseDate | amLocal | amDateFormat:
+        'YYYY'}}) </td>
+    </ng-container>
+
+    <ng-container matColumnDef="requestedDate">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Request Date </th>
+      <td mat-cell *matCellDef="let element"> {{element.requestedDate | amLocal | amDateFormat: 'LL'}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="requestStatus">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Request Status </th>
+      <td mat-cell *matCellDef="let element">
+        <div *ngIf="element.approved && !element.available">{{'Common.ProcessingRequest' | translate}}</div>
+        <div *ngIf="element.requested && !element.approved && !element.available">{{'Common.PendingApproval' |
+          translate}}
+        </div>
+        <div *ngIf="!element.requested && !element.available && !element.approved">{{'Common.NotRequested' |
+          translate}}
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef> </th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-raised-button color="primary" [routerLink]="">Details</button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
+</div>

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts

@@ -1,23 +1,59 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, AfterViewInit, ViewChild } from "@angular/core";
 import { RequestService } from "../../../services";
 import { IMovieRequests, OrderType, FilterType, IRequestsViewModel } from "../../../interfaces";
+import { MatPaginator, MatSort } from "@angular/material";
+import { merge, Observable, of as observableOf } from 'rxjs';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
 
 @Component({
     templateUrl: "./movies-grid.component.html",
     selector: "movies-grid",
     styleUrls: ["../requests-list.component.scss"]
 })
-export class MoviesGridComponent implements OnInit {
-    public dataSource: IRequestsViewModel<IMovieRequests>;
-
+export class MoviesGridComponent implements AfterViewInit {
+    public dataSource: IMovieRequests[] = [];
+    public resultsLength: number;
+    public isLoadingResults = true;
     public displayedColumns: string[] = ['requestedBy', 'title', 'requestedDate', 'status', 'requestStatus', 'actions'];
+    public gridCount = 30;
+
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+    @ViewChild(MatSort) sort: MatSort;
 
     constructor(private requestService: RequestService) {
-        
+
     }
 
-    public async ngOnInit() {
-        this.dataSource = await this.requestService.getMovieRequests(30,0, OrderType.RequestedDateDesc,
-             {availabilityFilter: FilterType.None, statusFilter: FilterType.None}).toPromise();
+    public async ngAfterViewInit() {
+        // const results = await this.requestService.getMovieRequests(this.gridCount, 0, OrderType.RequestedDateDesc,
+        //     { availabilityFilter: FilterType.None, statusFilter: FilterType.None }).toPromise();
+        // this.dataSource = results.collection;
+        // this.resultsLength = results.total;
+
+        // If the user changes the sort order, reset back to the first page.
+        this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+
+        merge(this.sort.sortChange, this.paginator.page)
+            .pipe(
+                startWith({}),
+                switchMap(() => {
+                    this.isLoadingResults = true;
+                    // eturn this.exampleDatabase!.getRepoIssues(
+                    //     this.sort.active, this.sort.direction, this.paginator.pageIndex);
+                    return this.requestService.getMovieRequests(this.gridCount, this.paginator.pageIndex * this.gridCount, OrderType.RequestedDateDesc, 
+                        { availabilityFilter: FilterType.None, statusFilter: FilterType.None});
+                }),
+                map((data: IRequestsViewModel<IMovieRequests>) => {
+                    // Flip flag to show that loading has finished.
+                    this.isLoadingResults = false;
+                    this.resultsLength = data.total;
+
+                    return data.collection;
+                }),
+                catchError((err) => {
+                    this.isLoadingResults = false;
+                    return observableOf([]);
+                })
+            ).subscribe(data => this.dataSource = data);
     }
 }

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss

@@ -5,4 +5,22 @@
 
 .table {
     width: 100%;
-}
+}
+.example-table-container {
+    position: relative;
+    max-height: 400px;
+    overflow: auto;
+  }
+  
+.example-loading-shade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 56px;
+    right: 0;
+    background: rgba(0, 0, 0, 0.15);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }

src/Ombi/ClientApp/src/app/shared/shared.module.ts

@@ -10,7 +10,7 @@ import { IssuesReportComponent } from "./issues-report.component";
 import { InputSwitchModule, SidebarModule } from "primeng/primeng";
 
 import {
-  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule} from '@angular/material';
+  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule, MatPaginatorModule, MatSortModule} from '@angular/material';
   import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule,
     MatChipsModule } from "@angular/material";
 import { EpisodeRequestComponent } from "./episode-request/episode-request.component";
@@ -45,6 +45,8 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
     MatDialogModule,
     MatTooltipModule,
     MatSelectModule,
+    MatPaginatorModule,
+    MatSortModule,
   ],
   entryComponents: [
     EpisodeRequestComponent
@@ -77,6 +79,8 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
       MatExpansionModule,
       MatDialogModule,
       MatTableModule,
+      MatPaginatorModule,
+      MatSortModule,
     ],
 })
 export class SharedModule {}