组件 数据表格

数据表格

数据表格显示原始数据集,通常出现在桌面端的企业产品中。

数据表格可以嵌入到其他组件中,例如卡片,并可以包含:

  • 一组相关的可视化数据
  • 查询和操作数据的功能

卡片中的数据表格可在顶部和底部显示导航与数据操作工具栏。

支持的交互功能

行悬停(桌面端)
行选择
列排序
列悬停(桌面端)
长列名处理方式
文本编辑
菜单

相关组件

卡片

Material Design 中用于显示原始数据的数据表格

结构 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

数据表格顶部包含列名称的表头,下方为数据行。

如需选择或操作数据,应为每一行添加复选框。

数据表格可包含:

  • 三列或更多列数据
  • 一组相关的可视化数据
  • 查询或操作数据的功能
Material Design 中的基础数据表格

基础数据表格

表格内容

13sp Roboto Regular
87% black

列标题

12sp Roboto Medium
54% black

文本对齐方式

数值列右对齐
文本列左对齐

交互 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

行悬停(桌面端)

当鼠标悬停在行上时,在该行显示背景色。如果个别单元格有独立悬停状态,则同时显示单元格和行的状态。

悬停背景色

  • Grey 200 (#EEEEEE)
Material Design 数据表格中的行悬停效果

行悬停效果

行选择

当数据行被选中时,在该行显示背景色。

选中行背景色

  • Grey 100 (#F5F5F5)

复选框

  • 使用应用的辅助色
Material Design 数据表格中的选中行

选中的行

列排序

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

已排序列名称

  • 12sp Roboto Medium
  • 87% black

排序图标

  • 16dp container
  • 87% black
Material Design 数据表格中带升序排序列的表格

带有升序排序列的表格

列标题悬停(桌面端)

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

工具提示

排序图标

  • 16dp container
  • 38% black
Material Design 数据表格中悬停在列标题上

悬停在列标题上

长列名处理方式

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

  1. 显示完整列名称,并在表格容器内启用水平滚动
  2. 缩短列名称,悬停时显示完整名称
Material Design 数据表格中过长列名用省略号截断

过长列名用省略号截断

Material Design 数据表格中悬停在截断的列名称上

悬停在截断的列名称上

内联文本编辑

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

占位符文本

  • 13sp Roboto Regular
  • 38% black
  • 文本框中无分隔线
Material Design 中含占位符的可编辑单元格

含占位符的可编辑单元格


简易编辑对话框

  • 将对话框边缘与最近的分隔线或表格边缘对齐
  • 左右内边距均为 24dp
  • 包含一个简单的文本框,并应用主题(如适用)
  • 用户按回车键确认文本
Material Design 中简单的单字段编辑对话框

简单的单字段编辑对话框

大型编辑对话框

  • 将对话框边缘与最近的分隔线或表格边缘对齐
  • 遵循对话框设计指南,并应用主题(如适用)
  • 用户点击保存按钮确认文本
Material Design 中灵活的编辑对话框

复杂、灵活的编辑对话框

单元格内编辑图标

  • 18dp container
  • 54% black
Material Design 中单元格边缘的图标编辑提示

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

内联菜单

除了编辑文本,用户可能还需要从预定义选项列表中选择。这种情况下,可将菜单组件直接嵌入表格。

内联菜单

  • 13sp Roboto Regular
  • 87% black
  • 遵循菜单的间距和尺寸指南
Material Design 中含内联菜单的表格

含内联菜单的表格

Material Design 中展开的内联菜单

展开的内联菜单

卡片中的表格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

表格可嵌入卡片中,顶部和底部显示表格导航与数据操作工具栏。

Material Design 中带表头和底部的表格卡片

带表头和底部的表格卡片

卡片标题

20sp Roboto Regular
87% black

卡片操作图标(表头和底部)

24dp container
54% black

底部分页标签

12sp Roboto Regular
54% black

替代表头

某些表格卡片可能需要带操作的表头,而非带标题的表头。这种情况下,可以:

  • 持续显示操作
  • 在选中条目时显示上下文表头
Material Design 中表格卡片的替代表头

表格卡片的替代表头

操作按钮

使用无边框按钮
在选中条目后启用

彩色表头

使用应用辅助色的 50 号色阶作为背景填充
显示选中条目数量
在选中条目后显示可用的上下文图标

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

垂直间距

Material Design 数据表格卡片的垂直间距

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

  1. 卡片表头高度:64dp
  2. 最后一行高度:56dp
  3. 数据行高度:48dp

表头与底部内边距

Material Design 表格卡片的水平间距

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

  1. 表格卡片四周有 24dp 内边距
  2. 底部控件组之间间距为 32dp
  3. 底部行数与其标签之间间距为 40dp

列内边距

Material Design 数据表格的列内边距

列之间的内边距

  1. 列之间最小间距为 56dp。列中最宽条目(包含数据和列名称)划定列边框。
  2. 复选框图标在 24dp 图标容器中,宽高均为 18dp