angular / angular/components

feat(MatSort): Enable multi-sorting capability on current Interface

Offen
#24,102 15 Kommentare 24 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/sort feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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` 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` 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:

```html




Name

{{element.name}}

Symbol

{{element.symbol}}

```

```typescript
@ViewChild(MatSort) matSort: MatSort;

ngAfterViewInit() {
matSort.sortChanged.pipe(map(() => Array.from(matSort.sortstate.values()))
.subscribe((sorts: Sort[])=> {
// do something with the Sort[]
});
}
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit den Einstiegspunkten MatSort und MatSortHeader und überprüfe anschließend die in der Issue genannte Sortiermethode von MatTableDataSource. Verfolge, wie sortChanged, active und direction derzeit den Zustand darstellen, bevor du die vorgeschlagene Multi-Sort-API bewertest. Als abgeschlossen gilt die Arbeit, wenn die Sortierung nach mehreren Spalten unterstützt wird, ohne ungelöste Kompatibilitätsprobleme oder ein nicht definiertes Standardverhalten der Datenquelle.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.