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

This reverts commit 67dc1fd.

(cherry picked from commit 9295ce5)

Author: andrewseguin

scripts/shim-scss-imports.js

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

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

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

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

@@ -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;
-  filteredAndPagedIssues: Observable<GithubIssue[]>;
+  data: GithubIssue[] = [];
 
   resultsLength = 0;
   isLoadingResults = true;
@@ -30,7 +30,10 @@ export class TableHttpExample implements AfterViewInit {
   ngAfterViewInit() {
     this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
 
-    this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)
+    // 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(() => {
@@ -52,11 +55,7 @@ export class TableHttpExample implements AfterViewInit {
           this.isRateLimitReached = true;
           return observableOf([]);
         })
-      );
-  }
-
-  resetPaging(): void {
-    this.paginator.pageIndex = 0;
+      ).subscribe(data => this.data = data);
   }
 }