[Table] Responsive stacking support
- 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ả
#### Bug, feature request, or proposal:
feature request
#### What is the expected behavior?
I would like to be able to convert a CDK table into a stacked list. I want to do this through CSS media queries (i.e. when window size is narrow), and I also want to be able to do it through JavaScript (e.g., when the user clicks a button). The header cell contents should be displayed on each line instead of just at the top. E.g.,
```
Header 1 Header 2 Header 3 Header 4
1.1 1.2 1.3 1.4
2.1 2.2 2.3 2.4
```
becomes
```
Header 1 1.1
Header 2 1.2
Header 3 1.3
Header 4 1.4
Header 1 2.1
Header 2 2.2
Header 3 2.3
Header 4 2.4
```
and even
```
Header 1
1.1
Header 2
1.2
Header 3
1.3
Header 4
1.4
Header 1
2.1
Header 2
2.2
Header 3
2.3
Header 4
2.4
```
If this is already facilitated by the CDK, I would like to see an example of this feature in the docs.
#### What is the current behavior?
The two docs pages I am looking at (https://material.angular.io/guide/cdk-table and the link below) do not mention 'responsive' or 'stack', and there are no demonstrations of tables that stack.
From https://material.angular.io/components/table/overview

#### What are the steps to reproduce?
Go to https://material.angular.io/components/table/overview on a small mobile browser or, with a desktop browser, resize the window to be narrow (e.g., 760px wide).
#### What is the use-case or motivation for changing an existing behavior?
1) There are groups where I work, and no doubt at many other organizations, that do not want to use a table library that does not offer this feature.
2) The need for this feature is evidenced by its existence in other solutions, such as PrimeNG datatable https://www.primefaces.org/primeng/#/datatable/responsive and https://css-tricks.com/responsive-data-tables/
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
N/A
#### Is there anything else we should know?
This is a restatement of https://github.com/angular/material2/issues/6608, trying to follow the advice of @jelbourn.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với hướng dẫn CDK table và tổng quan Material table được liên kết trong issue, sau đó so sánh các bố cục dạng xếp chồng được yêu cầu, do CSS và JavaScript điều khiển, với hành vi bảng hiện có. Kết quả hoàn thành sẽ bao gồm cách trình bày dạng xếp chồng đáp ứng, nội dung ô tiêu đề được lặp lại và tài liệu hoặc bản trình diễn nếu khả năng này đã tồn tại.
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
- 35/100