angular / angular/components

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

Abierto
#24,102 15 comentarios 24 reacciones 0 asignados Ver en GitHub
area: material/sort feature P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con los puntos de entrada MatSort y MatSortHeader y, después, revisa el método de ordenación de MatTableDataSource mencionado en el issue. Rastrea cómo representan actualmente el estado sortChanged, active y direction antes de evaluar la API de ordenación múltiple propuesta. Se considera terminado cuando se admite la ordenación por varias columnas sin problemas de compatibilidad sin resolver ni un comportamiento predeterminado de la fuente de datos sin definir.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
30/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.