Greetings, esteemed members of the Stackoverflow community,
As per the Angular Material 2 documentation, it is mentioned that you can include an mdSort directive in your table:
Sorting
The mdSort directive enables a sorting user interface on the column headers of the table. The sort headers generate events that can be utilized to trigger an update through the table's data source.
Code : component.html
Utilizing the mdSort directive and the md-sort-headers
<md-table fxFlex="100%" #table [dataSource]="dataSource" mdSort>
<ng-container mdColumnDef="category">
<md-header-cell *mdHeaderCellDef md-sort-header> Category </md-header-cell>
<md-cell (click)="alert(element)" *mdCellDef="let element"> {{element.category}} </md-cell>
</ng-container>
...
...
</md-table>
Code: component.ts
Declaring the sort directive:
@ViewChild(MdSort) sort: MdSort;
Injecting it into the datasource:
this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort);
And utilizing it to sort the objects:
getSortedData(): Task[] {
const data = this._exampleDatabase.data.slice();
if (!this._sort.active || this._sort.direction === '') { return data; }
return data.sort((a, b) => {
let propertyA: number|string|boolean = '';
let propertyB: number|string|boolean = '';
switch (this._sort.active) {
case 'category': [propertyA, propertyB] = [a.category, b.category]; break;
case 'task': [propertyA, propertyB] = [a.task, b.task]; break;
case 'favorite': [propertyA, propertyB] = [a.favorite, b.favorite]; break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
});
}
Now, I have a need for another sortable table with its own datasource and database setup.
How can I distinguish between multiple mdSort directives effectively?