docs-bug(Table): Add example with `rowspan`
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
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:
```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
Contributor guide
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.
Assessment
- Tech stack
- angular, typescript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100