Skip to content

Commit 67dc1fd

Browse files
authored
docs(material/table): use declarative idiomatic RxJS in table-http-example (#22053)
- remove usages of `subscribe()` - fix jank and spinner covering table headers
1 parent 0441ae9 commit 67dc1fd

File tree

3 files changed

+11
-9
lines changed

3 files changed

+11
-9
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
.example-table-container {
88
position: relative;
9-
max-height: 400px;
9+
height: 400px;
1010
overflow: auto;
1111
}
1212

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99

1010
<div class="example-table-container">
1111

12-
<table mat-table [dataSource]="data" class="example-table"
13-
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
12+
<table mat-table [dataSource]="filteredAndPagedIssues" class="example-table" matSort
13+
matSortActive="created" matSortDisableClear matSortDirection="desc"
14+
(matSortChange)="resetPaging()">
1415
<!-- Number Column -->
1516
<ng-container matColumnDef="number">
1617
<th mat-header-cell *matHeaderCellDef>#</th>

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
1616
export class TableHttpExample implements AfterViewInit {
1717
displayedColumns: string[] = ['created', 'state', 'number', 'title'];
1818
exampleDatabase: ExampleHttpDatabase | null;
19-
data: GithubIssue[] = [];
19+
filteredAndPagedIssues: Observable<GithubIssue[]>;
2020

2121
resultsLength = 0;
2222
isLoadingResults = true;
@@ -30,10 +30,7 @@ export class TableHttpExample implements AfterViewInit {
3030
ngAfterViewInit() {
3131
this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
3232

33-
// If the user changes the sort order, reset back to the first page.
34-
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
35-
36-
merge(this.sort.sortChange, this.paginator.page)
33+
this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)
3734
.pipe(
3835
startWith({}),
3936
switchMap(() => {
@@ -55,7 +52,11 @@ export class TableHttpExample implements AfterViewInit {
5552
this.isRateLimitReached = true;
5653
return observableOf([]);
5754
})
58-
).subscribe(data => this.data = data);
55+
);
56+
}
57+
58+
resetPaging(): void {
59+
this.paginator.pageIndex = 0;
5960
}
6061
}
6162

0 commit comments

Comments
 (0)