docs-bug(Table): Add example with `rowspan`
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 72/100
- Issue type
- Documentation
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- angular, typescript
- Domain
- documentation
Research direction
Start at the affected documentation page, https://material.angular.dev/components/table/examples, and review the existing Table examples. Add an example using the provided ISOTOPE_DATA to demonstrate vertically merged cells with rowspan, matching the shown Hydrogen and Helium layout. Done means the page clearly explains and renders this use case.
Written by the indexing model from the issue text.
Description
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:
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
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 80
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular/components
-
area: material/tree docs gemini-triaged needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/components#33763 · 2 comments · 3 reactions ·
-
area: material/table gemini-triaged P4
Difficulty 1/5 Under an hour Newbie friendliness 88/100
angular/components#33709 · 1 comment ·
-
area: material/core gemini-triaged P3
Difficulty 1/5 Under an hour Newbie friendliness 78/100
angular/components#33059 · 2 comments ·
-
area: material/dialog P2
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
angular/components#30536 · 3 reactions ·
All issues in angular/components
Similar issues
-
clawsweeper:linked-pr-open clawsweeper:no-new-fix-pr clawsweeper:source-repro impact:message-loss issue-rating: 🦞 diamond lobster maturity:stable P2
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#616 ·
-
ZCode 3.14.3 に対応する Open
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
supermomonga/zcode-acp#24 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
growthbook/growthbook#7100 ·
-
triage
Difficulty 1/5 1-3 hours Newbie friendliness 88/100