Description
Feature Description
Currently MatSort has a simplistic design that enables sorting only on one column at a time.
Most of enterprise level applications should need multi-sorting capabilities on its datasets. And having it included would be really nice.
In simple terms, my proposal would be to expose a boolean input matMultiSort flag and refactor MatSort and MatSortHeader so that MatSort will hold the MatSortable's state, and expose isActive(id: string) => boolean and getNextDirection(id: string) => SortDirection that will be used instead of directly accessing active and direction.
MatSort will hold a sortState: Map<string, Sort> that can be used to query its state whenever a sort event occurs.
This change should avoid most (if not all) compatibility issues. But it would be best if we can deprecate the current sortChanged: EventEmitter<Sort> for one that emits Sort[] instead, this way we wont need to expose sortState (although most of the usage examples for this API expect one to access its internal state anyway).
Known issues
This change of sorting behavior will require a review of the included sorting method for MatTableDataSource, that was designed around a single column sort.
Having multiple possible sortable columns will require a better strategy on sorting (weighting by index position?).
Or, whenever the MatTableDataSource default implementation is used, multi-sorting could be disabled?
Use Case
We want to be able to enable sorting based on multiple columns at a time.
This should be done with minimal changes.
Proposed usage:
<!-- Adding matSortMultiple will enable multi-sorting -->
<table mat-table matSort matSortMultiple matSortActive="position" matSortDirection="asc" [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by name">
Name
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by symbol">
Symbol
</th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
</table>@ViewChild(MatSort) matSort: MatSort;
ngAfterViewInit() {
matSort.sortChanged.pipe(map(() => Array.from(matSort.sortstate.values()))
.subscribe((sorts: Sort[])=> {
// do something with the Sort[]
});
}