IssueRaiser

[Table] Responsive stacking support

#### 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 ![image](https://user-images.githubusercontent.com/3712209/32919968-d78590e2

Posted by marcusreese on Nov 16, 2017, 11:12 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments

support (Other)

[Table] Responsive stacking support

marcusreeseNov 16, 2017, 11:12 PM

#### 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 ![image](https://user-images.githubusercontent.com/3712209/32919968-d78590e2

Comments (0)

No comments yet. Start the discussion.

Comment on this issue