数据表格显示原始数据集,通常出现在桌面端的企业产品中。
数据表格可以嵌入到其他组件中,例如卡片,并可以包含:
- 一组相关的可视化数据
- 查询和操作数据的功能
卡片中的数据表格可在顶部和底部显示导航与数据操作工具栏。

数据表格可以嵌入到其他组件中,例如卡片,并可以包含:
卡片中的数据表格可在顶部和底部显示导航与数据操作工具栏。

数据表格顶部包含列名称的表头,下方为数据行。
如需选择或操作数据,应为每一行添加复选框。
数据表格可包含:

基础数据表格
表格内容
13sp Roboto Regular
87% black
列标题
12sp Roboto Medium
54% black
文本对齐方式
数值列右对齐
文本列左对齐
当鼠标悬停在行上时,在该行显示背景色。如果个别单元格有独立悬停状态,则同时显示单元格和行的状态。
悬停背景色

行悬停效果
当数据行被选中时,在该行显示背景色。
选中行背景色
复选框

选中的行
如果启用了列排序功能,默认对最重要的数据进行排序,并在列标题中显示已排序状态。用户点击已排序的列时,反转排序顺序并旋转排序图标。
已排序列名称
排序图标

带有升序排序列的表格
如需对列标题提供更详细说明,可在悬停时显示工具提示。如果启用了排序,悬停时显示浅色排序图标,表明该列可排序。
工具提示
排序图标

悬停在列标题上
有时,按推荐的 56dp 列间距排布时,列名称在容器中容纳不下。有两种处理方式:

过长列名用省略号截断

悬停在截断的列名称上
表格可能需要基本的文本编辑功能(例如编辑现有文本内容或添加评论)。可在表格中包含可编辑字段,并通过占位符文本标识。可点击显示仅含文本框的简易编辑对话框,或显示完整的对话框组件。
占位符文本

含占位符的可编辑单元格
简易编辑对话框

简单的单字段编辑对话框
大型编辑对话框

复杂、灵活的编辑对话框
单元格内编辑图标

(可选)基于图标的编辑提示。在单元格中与内容相对的一侧边缘放置图标。

含内联菜单的表格

展开的内联菜单
表格可嵌入卡片中,顶部和底部显示表格导航与数据操作工具栏。

带表头和底部的表格卡片
卡片标题
20sp Roboto Regular
87% black
卡片操作图标(表头和底部)
24dp container
54% black
底部分页标签
12sp Roboto Regular
54% black
某些表格卡片可能需要带操作的表头,而非带标题的表头。这种情况下,可以:

表格卡片的替代表头
操作按钮
使用无边框按钮
在选中条目后启用
彩色表头
使用应用辅助色的 50 号色阶作为背景填充
显示选中条目数量
在选中条目后显示可用的上下文图标

数据表格卡片及其最后一行的垂直间距

表格卡片中元素间的水平间距

列之间的内边距