I have successfully set up a component in Angular and Material. The data I need is accessible through the BitBucket status API:
However, I am facing an issue with enabling column sorting for all 3 columns using default settings. Any help or guidance on this matter would be highly appreciated.
For reference, here is the stackblitz link: https://stackblitz.com/edit/angular-gmdy9j
HTML:
<div class="example-table-container">
<table mat-table [dataSource]="data"
matSort matSortActive="name" matSortDirection="desc">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let row">{{row.status}}</td>
</ng-container>
<ng-container matColumnDef="created_at">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Created
</th>
<td mat-cell *matCellDef="let row">{{row.created_at | date}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
TS:
import {HttpClient} from '@angular/common/http';
import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {MatSort} from '@angular/material';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
@Component({
selector: 'app-headlines',
templateUrl: './headlines.component.html',
styleUrls: ['./headlines.component.scss']
})
export class HeadlinesComponent implements AfterViewInit {
displayedColumns: string[] = ['name', 'status', 'created_at'];
tableDatabase: TableHttpDatabase | null;
data: BitBucketIssue[] = [];
resultsLength = 0;
isLoadingResults = true;
@ViewChild(MatSort) sort: MatSort;
constructor(private http: HttpClient) {}
ngAfterViewInit() {
this.tableDatabase = new TableHttpDatabase(this.http);
merge(this.sort.sortChange)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.tableDatabase!.getRepoIssues(
this.sort.active, this.sort.direction);
}),
map(data => {
// Flip flag to show that loading has finished.
this.isLoadingResults = false;
this.resultsLength = data.incidents.length;
console.log(data.incidents.length)
console.log(data.incidents)
return data.incidents;
}),
catchError(() => {
this.isLoadingResults = false;
return observableOf([]);
})
).subscribe(data => this.data = data);
}
}
export interface BitBucketApi {
incidents: BitBucketIssue[];
}
export interface BitBucketIssue {
name: string;
status: string;
created_at: number;
}
/** An example database that the data source uses to retrieve data for the table. */
export class TableHttpDatabase {
constructor(private http: HttpClient) {}
getRepoIssues(sort: string, order: string): Observable<BitBucketApi> {
const href = 'https://bqlf8qjztdtr.statuspage.io/api/v2/incidents.json';
const requestUrl =
`${href}?q=&sort=${sort}&order=${order}`;
return this.http.get<BitBucketApi>(requestUrl);
}
}
For further reference, here is the stackblitz link: https://stackblitz.com/edit/angular-gmdy9j