angular / angular/components

[Table] Responsive stacking support

Aperta
#8,494 35 commenti 251 reazioni 0 assegnatari Vedi su GitHub
area: material/table feature needs: discussion P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la guida CDK table e la panoramica Material table collegate nell’issue, quindi confronta i layout impilati richiesti, controllati tramite CSS e JavaScript, con il comportamento esistente della tabella. Il lavoro sarebbe considerato completato se includesse una presentazione impilata responsive, il contenuto ripetuto delle celle di intestazione e documentazione o dimostrazioni se la funzionalità esiste già.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.