docs(material/table): use declarative idiomatic RxJS in table-http-example (#22053)

- remove usages of `subscribe()`
- fix jank and spinner covering table headers

Author: Splaktar

src/components-examples/material/table/table-http/table-http-example.css

@@ -6,7 +6,7 @@
 
 .example-table-container {
   position: relative;
-  max-height: 400px;
+  height: 400px;
   overflow: auto;
 }
 

src/components-examples/material/table/table-http/table-http-example.html

@@ -9,8 +9,9 @@
 
   <div class="example-table-container">
 
-    <table mat-table [dataSource]="data" class="example-table"
-           matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
+    <table mat-table [dataSource]="filteredAndPagedIssues" class="example-table" matSort
+           matSortActive="created" matSortDisableClear matSortDirection="desc"
+           (matSortChange)="resetPaging()">
       <!-- Number Column -->
       <ng-container matColumnDef="number">
         <th mat-header-cell *matHeaderCellDef>#</th>

src/components-examples/material/table/table-http/table-http-example.ts

@@ -16,7 +16,7 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 export class TableHttpExample implements AfterViewInit {
   displayedColumns: string[] = ['created', 'state', 'number', 'title'];
   exampleDatabase: ExampleHttpDatabase | null;
-  data: GithubIssue[] = [];
+  filteredAndPagedIssues: Observable<GithubIssue[]>;
 
   resultsLength = 0;
   isLoadingResults = true;
@@ -30,10 +30,7 @@ export class TableHttpExample implements AfterViewInit {
   ngAfterViewInit() {
     this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
 
-    // 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)
+    this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)
       .pipe(
         startWith({}),
         switchMap(() => {
@@ -55,7 +52,11 @@ export class TableHttpExample implements AfterViewInit {
           this.isRateLimitReached = true;
           return observableOf([]);
         })
-      ).subscribe(data => this.data = data);
+      );
+  }
+
+  resetPaging(): void {
+    this.paginator.pageIndex = 0;
   }
 }