angular / angular/components

[Table] Responsive stacking support

Open
#8,494 35 comments 251 reactions 0 assignees View on GitHub
area: material/table feature needs: discussion P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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-cae4-11e7-8699-1f0f6c7c481b.png)

#### 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.

Contributor guide

Open the contributing guide

Research direction

Start with the CDK table guide and Material table overview linked in the issue, then compare the requested CSS- and JavaScript-controlled stacked layouts with the existing table behavior. Done would include responsive stacked presentation, repeated header cell contents, and documentation or demonstrations if the capability already exists.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.