angular / angular/components

docs-bug(Table): Add example with `rowspan`

Offen Anfängerfreundlich
#33,455 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/table docs gemini-triaged P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Documentation Feedback

There are many useful `Table` examples in the documentation. However, a common use case that’s missing is how to use `rowspan` to merge identical cells vertically.

For example, say we have the following data:

```ts
const ISOTOPE_DATA: PeriodicElement[] = [
{position: 1, element: 'Hydrogen', isotope: 'Protium', weight: 1.0078},
{position: 2, element: 'Hydrogen', isotope: 'Deuterium', weight: 2.0141},
{position: 3, element: 'Hydrogen', isotope: 'Tritium', weight: 3.016},
{position: 4, element: 'Helium', isotope: 'Helium-3', weight: 3.016},
{position: 5, element: 'Helium', isotope: 'Helium-4', weight: 4.0026},
];
```

We should be able to use it to create a table like this:


Element
Isotope
Weight


Hydrogen
Protium
1.0078


Deuterium
2.0141


Tritium
3.016


Helium
Helium-3
3.016


Helium-4
4.0026

This is related to https://github.com/angular/components/issues/11551, which is similar but for the `CdkTable` documentation.

### Affected documentation page

https://material.angular.dev/components/table/examples

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie auf der betroffenen Dokumentationsseite https://material.angular.dev/components/table/examples und überprüfen Sie die vorhandenen Table-Beispiele. Fügen Sie ein Beispiel hinzu, das die bereitgestellten ISOTOPE_DATA verwendet, um vertikal zusammengeführte Zellen mit rowspan zu demonstrieren und dabei das gezeigte Hydrogen- und Helium-Layout nachzubilden. Die Aufgabe ist erledigt, wenn die Seite diesen Anwendungsfall klar erklärt und rendert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
72/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.