angular / angular/components

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

Ouverte
#24,102 15 commentaires 24 réactions 0 personnes assignées Voir sur GitHub
area: material/sort feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

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` 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[]
});
}
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par les points d’entrée MatSort et MatSortHeader, puis examinez la méthode de tri de MatTableDataSource mentionnée dans l’issue. Suivez la manière dont sortChanged, active et direction représentent actuellement l’état avant d’évaluer l’API de tri multiple proposée. Le travail est considéré comme terminé lorsque le tri sur plusieurs colonnes est pris en charge sans problème de compatibilité non résolu ni comportement par défaut de la source de données non défini.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.