angular / angular/components

[Table] Responsive stacking support

Ouverte
#8,494 35 commentaires 251 réactions 0 personnes assignées Voir sur GitHub
area: material/table feature needs: discussion P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le guide CDK table et la présentation générale Material table liés dans l’issue, puis comparez les mises en page empilées demandées, contrôlées par CSS et JavaScript, avec le comportement existant du tableau. Le travail serait considéré comme terminé s’il incluait une présentation empilée responsive, la répétition du contenu des cellules d’en-tête, ainsi qu’une documentation ou des démonstrations si la fonctionnalité existe déjà.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.