angular / angular/components

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

Đang mở
#24,102 15 bình luận 24 reaction 0 người được giao Xem trên GitHub
area: material/sort feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với các entry point MatSort và MatSortHeader, sau đó xem xét phương thức sắp xếp của MatTableDataSource được nêu trong issue. Theo dõi cách sortChanged, active và direction hiện biểu diễn trạng thái trước khi đánh giá API multi-sort được đề xuất. Hoàn tất khi hỗ trợ sắp xếp theo nhiều cột mà không còn vấn đề tương thích chưa được giải quyết hoặc hành vi mặc định chưa được xác định của data source.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
30/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.