angular / angular/components

help(COMPONENT): Getting Sticky to work right for Angular Material Data Table.

Đang mở
#19,872 6 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/table cannot reproduce P4 troubleshooting
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ả

#### What are you trying to do?

Get sticky to work right. Here's a Stackblitz that has an ID column that is sticky, and two other columns. In this case sticky works correctly because there are only two other columns:

https://stackblitz.com/edit/angular-material-minimal-sticky

However if we add 100 columns, as is done in this demo:

https://stackblitz.com/edit/angular-material-minimal-with-paging-and-sorting-and-sticky-100

The ID column disappears when scrolling horizontally.

The solution suggested on SO is to use inline-flex:

https://stackoverflow.com/questions/62562388/getting-sticky-to-always-stick-the-column-in-material-data-table

However that creates another problem, which is that the header cells no longer expand to fit the table with.

That can cause table rows to wrap inside the main table container as described here:

https://stackoverflow.com/questions/62584549/material-data-table-wraps-rows-when-table-width-allows-it

Any thoughts on how to get sticky to work right, without causing the wrapping issues?

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

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

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện hành vi trong hai bản demo StackBlitz được liên kết và so sánh với cách tiếp cận inline-flex được mô tả trong các câu trả lời Stack Overflow được liên kết. Điều tra hành vi của cột cố định trong bảng dữ liệu Angular Material, sau đó xác minh rằng cột ID vẫn hiển thị khi có 100 cột, đồng thời việc định kích thước tiêu đề và xuống dòng của các hàng vẫn hoạt động chính xác.

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
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
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
35/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.