angular / angular/components

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

オープン
#24,102 コメント 15 件 リアクション 24 件 担当者 0 名 GitHub で見る
area: material/sort feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

MatSort と MatSortHeader のエントリポイントから開始し、次に issue で取り上げられている MatTableDataSource のソートメソッドを確認します。提案されているマルチソート API を評価する前に、sortChanged、active、direction が現在どのように状態を表現しているかを追跡します。複数列のソートが、未解決の互換性問題やデータソースのデフォルト動作の未定義を残さずにサポートされれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
30/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。