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

未关闭 适合新手
#33,455 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
72/100
Issue 类型
文档
描述清晰度
基本清楚
活跃度
冷清
技术栈
angular, typescript
领域
documentation

调研方向

从受影响的文档页面 https://material.angular.dev/components/table/examples 开始,查看现有的 Table 示例。添加一个使用所提供的 ISOTOPE_DATA 的示例,以演示使用 rowspan 垂直合并单元格,并匹配所展示的 Hydrogen 和 Helium 布局。完成的标准是页面能够清晰地解释并渲染这一用例。

由索引模型根据 Issue 内容生成。

描述

area: material/table docs gemini-triaged P4
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

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

主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 2 小时
30 天内合并 PR
81

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

查看 angular/components 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。